0
490
ViewsQuiero hacer un selector de rango de fechas con solo un selector de año y mes
Necesito un selector de rango de fechas con solo un selector de año y mes con material angular, pero solo hay un selector de rango de datos con formato MM/DD/YYYY – MM/DD/YYYY. Quiero un selector de intervalo de fechas con formato MM/AAAA – MM/AAAA.
su archivo ts:
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'; import * as _moment from 'moment'; import {default as _rollupMoment, Moment} from 'moment'; const moment = _rollupMoment || _moment; 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: [ { 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()); setMonthAndYear(normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) { const ctrlValue = this.date.value!; ctrlValue.month(normalizedMonthAndYear.month()); ctrlValue.year(normalizedMonthAndYear.year()); this.date.setValue(ctrlValue); datepicker.close(); } }HTML:
<mat-form-field appearance="fill"> <mat-label>Month and Year</mat-label> <input matInput [matDatepicker]="dp" [formControl]="date"> <mat-hint>MM/YYYY</mat-hint> <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle> <mat-datepicker #dp startView="multi-year" (monthSelected)="setMonthAndYear($event, dp)" panelClass="example-month-picker"> </mat-datepicker> </mat-form-field>No me importa cómo hacerlo selector de rango
2 answers
Answer question0
Encontrará un ejemplo de selector de mes/año aquí https://material.angular.io/components/datepicker/examples#datepicker-views-selection
puedes combinarlo con un selector de rango
0
Con un poco de trabajo y algo de formateo es posible. Necesitamos implementar MY_FORMATS para formatear la fecha seleccionada en MM/YYYY . Y en (monthSelected)="chosenMonthHandler($event, dp)" datepicker datepicker.close(); para ocultar la vista del selector de días.
export const MY_FORMATS = { parse: { dateInput: 'MM/YYYY', }, display: { dateInput: 'MM/YYYY', monthYearLabel: 'MMM YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM YYYY', }, }; @Component({ selector: 'datepicker-views-selection-example', templateUrl: 'datepicker-views-selection-example.html', styleUrls: ['datepicker-views-selection-example.css'], providers: [ {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}, {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(); } }Ejemplo de trabajo: https://stackblitz.com/edit/angular-un1hfx?file=app%2Fdatepicker-views-selection-example.ts
Inspirado en: https://material.angular.io/components/datepicker/examples#datepicker-views-selection