Question

我使用Angular Material Datepicker。

我已按照此处的指南进行操作-> https://theinfogrid.com/tech/developers/angular/custom-date-formats-angular-material-date-picker/，因为日期选择器不允许我输入日期。

问题当用户开始输入日期时，日期选择器会自动输入2018年的日期。然后很难确定该日期

已尝试的解决方案香港专业教育学院尝试使用所有类型的日期选择器在角度材料指南上。香港专业教育学院尝试了上面列出的解决方案。我不确定为什么会这样

代码

<!--app.html file-->
<app-date-picker name="date-picker" placeholder="mm/DD/yyyy" [(ngModel)]="birthDate" format="MM/DD/YYYY"></app-date-picker>


//app.ts file
birthDate = moment();


<!--utility/date-picker/date-picker.html-->
<mat-form-field>
    <mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
        <input matInput name="date-picker" [matDatepicker]="picker" [value]="dateValue" (dateInput)="addEvent('input', $event)" [placeholder]="placeholder">
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

// utility/date-picker/date-picker.ts
import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import * as moment from 'moment';

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
//   styleUrls: ['./date-picker.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DatePickerComponent),
      multi: true
    }
  ]
})
export class DatePickerComponent implements ControlValueAccessor {
  /**
   * Set the value of the date set by user, notice the underscore infront of the datevalue
   */

  @Input() _dateValue: string = null;

  /**
   * Placeholder value for the material control input
   */
  @Input() public placeholder: string = null;

  /**
   * The date format to use with default format but allowing you to pass a custom date format
   */
  @Input() private format = 'YYYY/MM/DD HH:mm:ss';

  @Input() private isTouch: boolean = false;

  get dateValue() {
    return moment(this._dateValue, this.format);
  }

  set dateValue(val) {
    this._dateValue = moment(val).format(this.format);
    this.propagateChange(this._dateValue);
  }

  addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
    this.dateValue = moment(event.value, this.format);
  }

  writeValue(value: any) {
    if (value !== undefined) {
      this.dateValue = moment(value, this.format);
    }
  }
  propagateChange = (_: any) => {};

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched() {}
}

模块文件遵循指南中的导入。

这是否发生在其他任何人上？

Angular Material Date Picker不允许我填写日期

0 个答案: