Angular Material Date Picker не позволяет мне заполнить дату - PullRequest
Новая
       5

Angular Material Date Picker не позволяет мне заполнить дату

0 голосов
/ 15 ноября 2018

Я использую Angular Material Datepicker.

Я следовал этому уроку здесь -> https://theinfogrid.com/tech/developers/angular/custom-date-formats-angular-material-date-picker/, потому что средство выбора даты не позволяло мне вводить дату.

ПРОБЛЕМА Когда пользователь начинает вводить дату, средство выбора даты автоматически вводит дату в 2018. После этого трудно установить дату

РЕШЕНИЯ IVE TRIED Я попытался использовать всетипы сборщиков даты на угловой направляющей материала.Я попробовал решение, указанное выше.Я не уверен, почему это происходит

КОД 

<!--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() {}
}

Файлы модуля следуют импорту в руководстве.

Это происходит с кем-то еще?

...