Selector de fechas Angular Material agregar fechas automáticamente.

Answer

1. 

   davy.ai

   August 6, 2023 at 5:40 am

   Para actualizar el valor del segundo selector de fecha añadiendo 7 días al valor del primer selector de fecha, podemos añadir una función al archivo TypeScript del componente que calculará la nueva fecha y actualizará el control de formulario para el segundo selector de fecha.

   Primero, necesitamos importar los módulos necesarios en la parte superior del archivo TypeScript:

   import { Component } from '@angular/core';
   import { FormBuilder, FormGroup, Validators } from '@angular/forms';
   import { MatDatepickerInputEvent } from '@angular/material/datepicker';
   

   Luego, podemos añadir una función para calcular la nueva fecha y actualizar el control de formulario:

   @Component({
     selector: 'app-date-picker',
     templateUrl: './date-picker.component.html',
     styleUrls: ['./date-picker.component.scss']
   })
   export class MyDatePickerComponent {
     form: FormGroup;
   
     constructor(private fb: FormBuilder) {
       this.form = fb.group({
         dateOne: ['', Validators.required],
         dateTwo: ['', Validators.required],
       });
     }
   
     // función para actualizar el valor del segundo selector de fecha
     addDaysToDateOne() {
       const dateOneValue = this.form.controls['dateOne'].value;
       if (dateOneValue) {
         const newDate = new Date(dateOneValue);
         newDate.setDate(newDate.getDate() + 7);
         this.form.controls['dateTwo'].setValue(newDate);
       }
     }
   
     // función para manejar los cambios en el valor del primer selector de fecha
     dateOneChanged(event: MatDatepickerInputEvent<date>) {
       this.form.patchValue({
         dateOne: event.value
       });
       this.addDaysToDateOne();
     }
   
     // función para manejar los cambios en el valor del segundo selector de fecha
     dateTwoChanged(event: MatDatepickerInputEvent<date>) {
       this.form.patchValue({
         dateTwo: event.value
       });
     }
   }
   

   En la función addDaysToDateOne(), obtenemos el valor del control de formulario del primer selector de fecha y creamos un nuevo objeto de fecha. Luego, añadimos 7 días al nuevo objeto de fecha usando el método setDate(). Finalmente, actualizamos el valor del control de formulario del segundo selector de fecha usando el método setValue().

   También necesitamos actualizar el archivo de plantilla para llamar a las funciones dateOneChanged() y dateTwoChanged() cuando cambie el valor de la fecha:

   <form [formgroup]="form">
     <input matinput="" [matdatepicker]="picker2" formcontrolname="dateOne" (datechange)="dateOneChanged($event)">
     <mat-datepicker-toggle matsuffix="" [for]="picker2"></mat-datepicker-toggle>
     <mat-datepicker #picker2=""></mat-datepicker>
   
     <input matinput="" [matdatepicker]="picker3" formcontrolname="dateTwo" (datechange)="dateTwoChanged($event)" class="mainfield">
     <mat-datepicker-toggle matsuffix="" [for]="picker3"></mat-datepicker-toggle>
   </form>
   

   Ahora, cuando el usuario selecciona una fecha del primer selector de fecha, se llama a la función dateOneChanged() que actualiza el valor del control de formulario y llama a la función addDaysToDateOne() para actualizar el valor del segundo selector de fecha. Cuando el usuario selecciona una fecha del segundo selector de fecha, se llama a la función dateTwoChanged() que actualiza el valor del control de formulario.

Comments are closed.