角材料组件 - dateTimePicker-午夜12h/24h发行

发布于 2025-01-23 13:22:29 字数 2151 浏览 4 评论 0原文

我已经实现了Angular Material DateTime Picker,并且有奇怪的问题。

它显示24:00:00作为午夜时间

选择同样的问题,即使我将其更改为00

html

<div fxLayout="row" fxLayoutAlign="start start" [formGroup]="filtersFormGroup">
  <input class="configuration-input" [ngxMatDatetimePicker]="picker" (focus)="initDatesRange()" placeholder="Choose a date" [formControlName]="dateControl" style="width: 100%"
         [min]="minDate" [max]="maxDate" [disabled]="disabled">
  <mat-datepicker-toggle matSuffix [for]="picker" (click)="initDatesRange()"></mat-datepicker-toggle>
  <ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
                           [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
                           [touchUi]="touchUi" [color]="color" [enableMeridian]="enableMeridian"
                           [disableMinute]="disableMinute" [hideTime]="hideTime">
  </ngx-mat-datetime-picker>
</div>

ts

import {Component, Input, OnInit, Output} from '@angular/core';
import {ThemePalette} from '@angular/material/core';
import {FormGroup} from '@angular/forms';

@Component({
  selector: 'app-form-datetimepicker',
  templateUrl: './form-datetimepicker.component.html',
  styleUrls: ['./form-datetimepicker.component.scss']
})
export class FormDatetimepickerComponent implements OnInit {
  @Input() dateControl: string;
  @Input() filtersFormGroup: FormGroup;

  minDate:Date;
  maxDate:Date;
  disabled: false;
  showSpinners= false;
  showSeconds= false;
  stepSecond= 1;
  stepMinute=1;
  stepHour= 1;
  touchUi= false;
  color: ThemePalette;
  enableMeridian= true;
  hideTime= false;
  disableMinute= false;


  constructor() {
  }

  ngOnInit(): void {
  }

  initDatesRange() {
    this.minDate = new Date();
    this.maxDate =  new Date();
    this.maxDate.setMinutes(new Date().getMinutes()+1);

  }
}

“

I have implemented angular material datetime picker and I have strange issue.

It shows 24:00:00 as midnight time

On time picking it has same issue, it back to 12 even if I am changing it to 00

HTML

<div fxLayout="row" fxLayoutAlign="start start" [formGroup]="filtersFormGroup">
  <input class="configuration-input" [ngxMatDatetimePicker]="picker" (focus)="initDatesRange()" placeholder="Choose a date" [formControlName]="dateControl" style="width: 100%"
         [min]="minDate" [max]="maxDate" [disabled]="disabled">
  <mat-datepicker-toggle matSuffix [for]="picker" (click)="initDatesRange()"></mat-datepicker-toggle>
  <ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
                           [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
                           [touchUi]="touchUi" [color]="color" [enableMeridian]="enableMeridian"
                           [disableMinute]="disableMinute" [hideTime]="hideTime">
  </ngx-mat-datetime-picker>
</div>

TS

import {Component, Input, OnInit, Output} from '@angular/core';
import {ThemePalette} from '@angular/material/core';
import {FormGroup} from '@angular/forms';

@Component({
  selector: 'app-form-datetimepicker',
  templateUrl: './form-datetimepicker.component.html',
  styleUrls: ['./form-datetimepicker.component.scss']
})
export class FormDatetimepickerComponent implements OnInit {
  @Input() dateControl: string;
  @Input() filtersFormGroup: FormGroup;

  minDate:Date;
  maxDate:Date;
  disabled: false;
  showSpinners= false;
  showSeconds= false;
  stepSecond= 1;
  stepMinute=1;
  stepHour= 1;
  touchUi= false;
  color: ThemePalette;
  enableMeridian= true;
  hideTime= false;
  disableMinute= false;


  constructor() {
  }

  ngOnInit(): void {
  }

  initDatesRange() {
    this.minDate = new Date();
    this.maxDate =  new Date();
    this.maxDate.setMinutes(new Date().getMinutes()+1);

  }
}

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文