web-dev-qa-db-fra.com

Angular Material DatePicker: Mois et jour, exclure l'année

Comment créer un sélecteur de date de mois et de jour en angulaire, à l'exclusion de l'année de masquage?

Ce lien suivant fera un sélecteur de mois et d'année. J'essaie de le manipuler, de faire le mois et le jour. Le remplacement de YYYY par DD ne fonctionne pas.

Stackblitz:

https://stackblitz.com/angular/gxymgjpprdy?file=src%2Fapp%2Fdatepicker-views-selection-example.ts

Code réel de Stackblitz:

TypeScript: 

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import {MatDatepicker} from '@angular/material/datepicker';

// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
// the `default as` syntax.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import {default as _rollupMoment, Moment} from 'moment';

const moment = _rollupMoment || _moment;

// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
  parse: {
    dateInput: 'MM/YYYY',
  },
  display: {
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

/** @title Datepicker emulating a Year and month picker */
@Component({
  selector: 'datepicker-views-selection-example',
  templateUrl: 'datepicker-views-selection-example.html',
  styleUrls: ['datepicker-views-selection-example.css'],
  providers: [
    // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
    // application's root module. We provide it at the component level here, due to limitations of
    // our example generation script.
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class DatepickerViewsSelectionExample {
  date = new FormControl(moment());

  chosenYearHandler(normalizedYear: Moment) {
    const ctrlValue = this.date.value;
    ctrlValue.year(normalizedYear.year());
    this.date.setValue(ctrlValue);
  }

  chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
    const ctrlValue = this.date.value;
    ctrlValue.month(normalizedMonth.month());
    this.date.setValue(ctrlValue);
    datepicker.close();
  }
}

HTML: 

<mat-form-field>
  <input matInput [matDatepicker]="dp" placeholder="Month and Year" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp
                  startView="multi-year"
                  (yearSelected)="chosenYearHandler($event)"
                  (monthSelected)="chosenMonthHandler($event, dp)"
                  panelClass="example-month-picker">
  </mat-datepicker>
</mat-form-field>

Je ne veux pas l'option année ci-dessous en vert, je voudrais désactiver l'année

enter image description here

Autres ressources:

https://material.angular.io/components/datepicker/overview#watching-the-views-for-changes-on-selected-years-and-months

Le sélecteur de date de matériau angulaire désactive la sélection de l'année

javascripthtmlangularangular-materialangular8
3
user12250118

J'espère que vous attendez un format de date comme DD/MMM. Si c'est le cas, changez dateInput dans display et parse objet comme ci-dessous

dateInput: 'DD/MMM'

J'espère que cela t'aides.

Voici le code stackblitz.

https://stackblitz.com/edit/angular-hw54xf

2
Allabakash

image

Donc, d'abord dans le fichier html

 <mat-form-field class="mat-50-left" (click)="updateCalendarUI()">
    <input matInput [matDatepicker]="picker_start"
           placeholder="Date de début" required formControlName="dt_start" (click)="picker_start.open();">
    <mat-datepicker-toggle matSuffix (click)="picker_end.open(); updateCalendarUI()"></mat-datepicker-toggle>
    <mat-datepicker #picker_start startView="year"></mat-datepicker>
  </mat-form-field>

dans le fichier .ts

       import {DateAdapter, NativeDateAdapter} from "@angular/material/core";
       import * as moment from "moment";

    export class AppDateAdapter extends NativeDateAdapter {
       format(date: Date, displayFormat: Object): string {
        // use what format you need
        return moment(date).format('DD MMM');
      }
    }

ajouter des fournisseurs

  providers: [{provide: DateAdapter, useClass: AppDateAdapter}]

Pour mettre à jour l'interface utilisateur du calendrier

  updateCalendarUI(): void {

     setTimeout(() => {
       let calendar = document.getElementsByClassName('mat- 
      calendar').item(0);
      if (calendar) {
         calendar['style'].height = '275px';
         calendar['style']['padding-top'] = '15px';
        }
     let header = document.getElementsByClassName('mat-calendar- 
      header').item(0);
      if (header) {
         header['style'].display = 'none';
      }
      let yearLabel = document.getElementsByClassName('mat-calendar-body- 
       label').item(0);
      if (yearLabel) {
          yearLabel['style'].display = 'none';
      }
    }, 1);
   }
0
nesdi