web-dev-qa-db-ja.com

Angular日付マスク付きmat-datepicker

Mat-datepickerを使用して、Angular5でControlValueAccessorを実装するカスタムdatepicker入力コンポーネントを記述します。

date-picker.component.html：

<mat-form-field>
    <input matInput [matDatepicker]="picker" [(ngModel)]="value" (blur)="onBlur()">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker (selectedChanged)="onChange($event)" #picker></mat-datepicker>
</mat-form-field>

date-picker.component.ts：

import { Component, OnInit, Input, Output, forwardRef, EventEmitter } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

const noop = () => {
};

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => DatePickerComponent),
  multi: true
};

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.css'],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'he-IL' },
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
    CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR
  ],
})
export class DatePickerComponent implements OnInit, ControlValueAccessor {

  @Input()
  required: boolean;

  @Output()
  change: EventEmitter<Date> = new EventEmitter<Date>();

  innerValue: Date = new Date();

  //Placeholders for the callbacks which are later provided
  //by the Control Value Accessor
  private onTouchedCallback: () => void = noop;
  private onChangeCallback: (_: any) => void = noop;


  //get accessor
  get value(): Date {
    return this.innerValue;
  };

  //set accessor including call the onchange callback
  set value(v: Date) {
    if (v !== this.innerValue) {
      this.innerValue = v;
    }
  }

  constructor(private adapter: DateAdapter<any>) { }

  ngOnInit() {
    this.adapter.setLocale('he');
  }

  //Occured value changed from module
  writeValue(value: any): void {
    if (value !== this.innerValue) {
      this.innerValue = value;

      //invoke value change event
      this.change.emit(this.innerValue);
    }
  }
  registerOnChange(fn: any): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouchedCallback = fn;
  }

  onChange(event) {
    this.value = event;
    this.onBlur();
  }

  onBlur() {
    this.onChangeCallback(this.innerValue);
    //invoke value change event
    this.change.emit(new Date(this.innerValue));
    //this.onTouchedCallback();
  }
}

'dd/MM/yyyy'のような日付マスクを強制する機能を追加したい

一致する例を見つけましたが、angularJSとmd datepickerで記述されています。

Angular Material DatepickerおよびngMask

Angularで実装するためのアイデアはありますか？

編集：

添付のライブデモ、Vivek Doshi Nice回答に基づく、このデモは[textMask]属性のため機能しません。

ライブデモ

angulardatepickerangular-material
6
Stack Overflow

あなたはangular2-text-maskの助けを借りてそれを達成することができます

コンポーネント側：

public mask = {
    guide: true,
    showMask : true,
    mask: [/\d/, /\d/, '/', /\d/, /\d/, '/',/\d/, /\d/,/\d/, /\d/]
  };

テンプレート側：

<mat-form-field>
  <input matInput [textMask]="mask" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

WORKING DEMO

あとは、ロジックと検証をバインドするだけです。

ControlValueAccessorの解法でのWORKING DEMOです。

コードを使用した3番目のデモ

WORKING DEMO

8
Vivek Doshi

問題を理解したら、pipeで試してみませんか？このような：

"{{yourDateModel | date: 'dd/MM/yyyy'}}"

あなたのhtml date-pickerコンポーネント

1
Luca Taccagni