web-dev-qa-db-fra.com

Datepicker mat angulaire avec masque de date

J'écris des éléments de composant d'entrée Datepicker personnalisés ControlValueAccessor dans Angular5 à l'aide de mat-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();
  }
}

Je veux ajouter la possibilité d'appliquer un masque de date comme 'dd/MM/yyyy'

J'ai trouvé un exemple correspondant, mais il est écrit dans angularJS et md datepicker:

Matrice angulaire Datepicker et ngMask

Une idée d'implémentation dans Angular?

Modifier:

Démonstration en direct, basée sur la réponse de Vivek Doshi Nice, Cette démo ne fonctionne pas en raison de l'attribut [textMask].

Démo en direct 

angulardatepickerangular-material
6
Stack Overflow

Vous pouvez y parvenir à l'aide de angular2-text-mask

Côté composant:

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

Côté modèle:

<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>

DEMO DE TRAVAIL

Maintenant, il ne vous reste plus qu'à lier la logique et les validations, 

Voici le WORKING DEMO avec la solution de ControlValueAccessor.

3ème démo, avec votre code

DEMO DE TRAVAIL

6
Vivek Doshi

Si j'ai compris votre problème, pourquoi n'essayez-vous pas avec une pipe? comme ça:

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

dans votre composant html date-picker

1
Luca Taccagni