Ten en cuenta que en la informática un problema casi siempere suele tener varias resoluciones, de igual modo aquí te mostraremos lo más óptimo y eficiente.
Solución:
Encuadernación con [min] funciona perfecto para cualquier fecha
archivo .ts
//today's date
todayDate:Date = new Date();
//any date
someDate: Date = new Date(anydate);
archivo .html
Dado que está utilizando un formulario reactivo, utilice los controles de formulario. No se recomienda tener dos enlaces (ngModel y formControl). Así que suelta el ngModel como sugerí en una pregunta anterior tuya: https://stackoverflow.com/a/47426879/6294072
Así que complete sus controles de formulario con los valores de su objeto unavailability.
constructor(private formBuilder: FormBuilder)
this.unavailabilityForm = this.formBuilder.group(
startDate: [this.unavailability.startDate],
endDate: [this.unavailability.endDate]
);
si está recibiendo los valores en un momento posterior, puede usar patchValues:
this.unavailabilityForm.setValue(
startDate: this.unavailability.startDate;
endDate: this.unavailability.endDate;
)
de lo contrario, puede establecer los valores cuando crea el formulario.
Entonces, lo único que necesita agregar a su segundo selector de fechas es [min] como la otra respuesta mencionada. Utiliza el valor de control de formulario:
MANIFESTACIÓN
A menos que me esté perdiendo algo, puedes usar el [min]="" propiedad de fecha:
Lo que sea startDate Esto limitará las fechas del Calendario disponibles para endDate. Si lo necesitas configurado antes startDate es elegido, use otra variable y configúrela en consturctor() o ngOnInit() de su componente.
Consulte: https://material.angular.io/components/datepicker/overview#date-validation
Comentarios y puntuaciones del post
Recuerda algo, que puedes optar por la opción de decir si te fue preciso.