Estoy usando la última Angular Material 5.0.0-rc0 en mi Angulares 5 app. Estoy tratando de seleccionar un rango de fechas con el datepicker siempre con Angulares material, pero no pude encontrar ninguna documentación acerca de eso.

Todo lo que yo podía trabajar con él es seleccionar un startDate o establecer el minDate y maxDate. Aquí está el código HTML para que

<mat-form-field>
  <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>

y TS código

import {Component} from '@angular/core';

@Component({
  selector: 'datepicker-start-view-example',
  templateUrl: 'datepicker-start-view-example.html',
  styleUrls: ['datepicker-start-view-example.css'],
})
export class DatepickerStartViewExample {
  minDate = new Date(2000, 0, 1);
  maxDate = new Date(2020, 0, 1);
}

Este código me ayuda a seleccionar una fecha en el rango de los min y max fechas, pero no me permite seleccionar un rango de ellos. Aunque el uso de una librería de terceros puede solucionar este problema, pero va a tener un diferente interfaz de usuario, que va a ser diferente de la de mi actual de la aplicación de interfaz de usuario. Por favor, que me ayude a resolver este problema.

InformationsquelleAutor starlight | 2017-11-08

6 Comentarios

  1. 7

    Recomendar a retirar Saturno gama de Material Datepicker. Eche un vistazo también a su página de demostración. Se trata de un Material UX con soporte incorporado para su Material existente sobre el tema.

    Puede instalar con npm install saturn-datepicker. Ver su página de Github para la plena integración de las instrucciones.

    Marcado se parece a esto:

      <mat-form-field>
        <input matInput
            placeholder="Choose a date"
            [satDatepicker]="picker"
            [value]="date">
        <sat-datepicker #picker [rangeMode]="true"></sat-datepicker>
        <sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>
      </mat-form-field>
    

    Y aquí es lo que termina pareciéndose en la página:

    Cómo escoger el rango de fechas a angular material 5.0.0 con datepicker?

  2. 3

    Hay un tema abierto en la página de github.

    https://github.com/angular/material2/issues/4763

    Angular-Blog, hay una nota para que esta demasiado (ver al final).

    https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3

  3. 3

    Por el momento sólo podía tener dos selectores de fecha. Uno para la fecha de inicio y otro para el final de la fecha. Algo como esto:

    <mat-form-field> //start date datepicker
      <input matInput [min]="minDate" [max]="maxDate" [formControl]="startDate" [matDatepicker]="picker" placeholder="Choose a start date">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker startView="year" [startAt]="minDate"></mat-datepicker>
    </mat-form-field>
    
    <mat-form-field> //end date datepicker
      <input matInput [min]="startDate" [max]="maxDate" [formControl]="endDate" [matDatepicker]="picker" placeholder="Choose a date">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
    </mat-form-field>
    

    Luego, puede haber algunos que si cambian el endDate a algo antes de que el startDate les muestra un error o se restablece la startDate

Dejar respuesta

Please enter your comment!
Please enter your name here