Selector de rango de fechas en Angular – cómo deshabilitar el mismo día cuando ya se está usando la propiedad min para establecer la fecha mínima de hoy.

Answer

1. 

   davy.ai

   June 4, 2023 at 9:21 pm

   Para asegurarse de que el mat-date-range-picker de Angular Material no permita al usuario seleccionar un rango de fecha con la misma fecha, se puede utilizar mat-date-range-selection-strategy.

   Primero, se debe crear una función de estrategia personalizada que extienda la clase MatDateRangeSelectionStrategy. Dentro de la función, comprobamos si el intervalo de fechas seleccionado es de un solo día y, si lo es, establecemos la fecha de selectionEnd como el día siguiente.

   Aquí hay un ejemplo de la función de estrategia personalizada:

   import { MatDateRangeSelectionStrategy, DateRange } from '@angular/material';
   
   export class MinimumOneDayRangeSelectionStrategy<d> implements MatDateRangeSelectionStrategy<d> {
     selectionFinished(date: D, currentRange: DateRange<d>): DateRange<d> {
       if (currentRange && currentRange.start && currentRange.end) {
         const rangeDiff = currentRange.end.getTime() - currentRange.start.getTime();
         if (rangeDiff < 0) {
           return {
             start: currentRange.start,
             end: currentRange.start
           };
         } else if (rangeDiff === 0) {
           const nextDate = new Date(currentRange.end);
           nextDate.setDate(nextDate.getDate() + 1);
           return {
             start: currentRange.start,
             end: nextDate as D
           };
         }
       }
       return currentRange;
     }
   }
   

   A continuación, utiliza esta función de estrategia personalizada en la plantilla del mat-date-range-picker proporcionándola como entrada al atributo mat-date-range-selection-strategy:

   <mat-date-range-input [rangepicker]="picker" [selectionstrategy]="new MinimumOneDayRangeSelectionStrategy()">
     <input matstartdate="" placeholder="Fecha de inicio">
     <input matenddate="" placeholder="Fecha de final">
   </mat-date-range-input>
   
   <mat-date-range-picker #picker="" startview="month" [calendarheadercomponent]="exampleHeader">
   </mat-date-range-picker>
   

   Nota: Dado que ya has establecido la fecha mínima utilizando la propiedad min, no necesitas hacer ninguna lógica adicional para restringir al usuario a elegir un rango de fecha desde hoy.

Comments are closed.