He importado un selector de fecha en un proyecto y se preguntaba si no había ningún oficial de los últimos componente de angular y material para incluir el tiempo en el calendario.

He visto un montón de tiempo de los recicladores en el material de documentación e investigado un montón de terceros, pero que parece muy complejo.

InformationsquelleAutor Kevin Curnow | 2018-02-06

4 Comentarios

  1. 14

    Por desgracia, la respuesta a tu pregunta de si hay Material oficial de apoyo para seleccionar el tiempo es «No», pero es en la actualidad un tema abierto en la página oficial de Material2 repo de GitHub: https://github.com/angular/material2/issues/5648

    Esperemos que esto cambie pronto, en el período de tiempo promedio, usted tendrá que luchar con la 3ra parte que ya ha descubierto. Hay un par de personas en GitHub problema que proporcionan sus auto-soluciones que puede probar.

    • Pensé, gracias por su ayuda.
    • Puede compartir la solución. Necesito un rango de fecha selector junto con selector de hora. Otra limitación que tengo es que necesito hacer es trabajar en Angular4. Soy consciente de que hay uno disponible para 6
  2. 8

    Usted puede tener un datetime selector cuando se utiliza matInput con el tipo datetime-local así:

      <mat-form-field>
        <input matInput type="datetime-local" placeholder="start date">
      </mat-form-field>
    

    Puede hacer clic en cada parte del marcador de posición para ajustar el día, mes, año, horas,minutos y si su AM o PM.

  3. 2

    Para siempre ya que no hay fecha oficial y selector de hora de angular sí, yo aconsejaría hacer una combinación de la por defecto angular selector de fecha y este Angular Material Timepicker. He elegido porque todos los que he encontrado en este tiempo de falta de apoyo para los problemas, son obsoletos o no están funcionando bien en la más reciente angular versiones. Este tipo parece ser muy sensible.

    He envuelto tanto en uno de los componentes, por lo que parece es una unidad. Usted sólo tiene que asegurarse de hacer un par de cosas:

    Cuando ninguna entrada ha sido dado todavía, yo aconsejaría:

    • En-haga clic en el componente, el datepicker siempre debe activarse primero.
    • Después de que el selector de fecha se cierra, tienen la timepicker automáticamente popup.
    • Uso touchUi = true en el selector de fecha, por lo que tanto el selector de fecha y el timepicker venir como un cuadro de diálogo después de la otra.
    • Asegúrese de que el selector de fecha también se muestra cuando se hace clic en el formulario (en lugar de sólo en el icono que es el valor predeterminado).
    • Uso esta solución el uso de la timepicker también en una forma material, cuando se coloca detrás de cada uno de los otros, parece que es una forma.

    Después de que un valor ha sido dado, es evidente que una parte que contiene el tiempo y la otra parte contiene la fecha. En ese momento, no está claro que el usuario tiene que hacer clic en el tiempo para cambiar la hora y la fecha para cambiar la fecha. Pero antes de eso, así que cuando ambos campos están vacíos (y ‘adjunto’ el uno al otro como un campo) debe asegurarse de que el usuario no puede ser confundido por hacer las recomendaciones anteriores.

    Mi componente no está completa todavía, voy a tratar de recordar a mí mismo para compartir el código más adelante. Disparar un comentario si esta pregunta es más de un mes de edad o menos.

    Edición: Resultado

    Angular-Material DateTime Selector De Componente?

    <div fxLayout="row">
      <div *ngIf="!dateOnly" [formGroup]="timeFormGroup">
        <mat-form-field>
          <input matInput [ngxTimepicker]="endTime" [format]="24"  placeholder="{{placeholderTime}}" formControlName="endTime" />
        </mat-form-field>
        <ngx-material-timepicker #endTime (timeSet)="timeChange($event)" [minutesGap]="10"></ngx-material-timepicker>
      </div>
      <div>
        <mat-form-field>
          <input id="pickerId" matInput [matDatepicker]="datepicker" placeholder="{{placeholderDate}}" [formControl]="dateForm"
                 [min]="config.minDate" [max]="config.maxDate" (dateChange)="dateChange($event)">
          <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
          <mat-datepicker #datepicker [disabled]="disabled" [touchUi]="config.touchUi" startView="{{config.startView}}"></mat-datepicker>
        </mat-form-field>
      </div>
    </div>
    import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
    import { FormControl, FormGroup } from '@angular/forms';
    import { DateAdapter, MatDatepickerInputEvent } from '@angular/material';
    import * as moment_ from 'moment';
    const moment = moment_;
    import { MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
    class DateConfig {
    startView: 'month' | 'year' | 'multi-year';
    touchUi: boolean;
    minDate: moment_.Moment;
    maxDate: moment_.Moment;
    }
    @Component({
    selector: 'cb-datetimepicker',
    templateUrl: './cb-datetimepicker.component.html',
    styleUrls: ['./cb-datetimepicker.component.scss'],
    })
    export class DatetimepickerComponent implements OnInit {
    @Input() disabled: boolean;
    @Input() placeholderDate: string;
    @Input() placeholderTime: string;
    @Input() model: Date;
    @Input() purpose: string;
    @Input() dateOnly: boolean;
    @Output() dateUpdate = new EventEmitter<Date>();
    public pickerId: string = "_" + Math.random().toString(36).substr(2, 9);
    public dateForm: FormControl;
    public timeFormGroup: FormGroup;
    public endTime: FormControl;
    public momentDate: moment_.Moment;
    public config: DateConfig;
    //myGroup: FormGroup;
    constructor(private adapter : DateAdapter<any>) { }
    ngOnInit() {
    this.adapter.setLocale("nl-NL");//todo: configurable
    this.config = new DateConfig();
    if (this.purpose === "birthday") {
    this.config.startView = 'multi-year';
    this.config.maxDate = moment().add('year', -15);
    this.config.minDate = moment().add('year', -90);
    this.dateOnly = true;
    } //add more configurations
    else {
    this.config.startView = 'month';
    this.config.maxDate = moment().add('year', 100);
    this.config.minDate = moment().add('year', -100);
    }
    if (window.screen.width < 767) {
    this.config.touchUi = true;
    }
    if (this.model) {
    var mom = moment(this.model);
    if (mom.isBefore(moment('1900-01-01'))) {
    this.momentDate = moment();
    } else {
    this.momentDate = mom;
    }
    } else {
    this.momentDate = moment();
    }
    this.dateForm = new FormControl(this.momentDate);
    if (this.disabled) {
    this.dateForm.disable();
    }
    this.endTime = new FormControl(this.momentDate.format("HH:mm"));
    this.timeFormGroup = new FormGroup({
    endTime: this.endTime
    });
    }
    public dateChange(date: MatDatepickerInputEvent<any>) {
    if (moment.isMoment(date.value)) {
    this.momentDate = moment(date.value);
    if (this.dateOnly) {
    this.momentDate = this.momentDate.utc(true);
    } 
    var newDate = this.momentDate.toDate();
    this.model = newDate;
    this.dateUpdate.emit(newDate);
    }
    console.log("datechange",date);
    }
    public timeChange(time: string) {
    var splitted = time.split(':');
    var hour = splitted[0];
    var minute = splitted[1];
    console.log("time change", time);
    this.momentDate = this.momentDate.set('hour', parseInt(hour));
    this.momentDate = this.momentDate.set('minute', parseInt(minute));
    var newDate = this.momentDate.toDate();
    this.model = newDate;
    this.dateUpdate.emit(newDate);
    }
    }

    Una importante fuente: https://github.com/Agranom/ngx-material-timepicker/issues/126

    Creo que aún así merece algunos ajustes, como creo que puede funcionar un poco mejor cuando yo iba a tener más tiempo en la creación de este. Lo más importante es que traté de resolver el UTC problema, así que todas las fechas se muestran en la hora local, pero debe ser enviado al servidor en formato UTC (o al menos guarda con la zona horaria correcta añadido).

    • Un mes o así… curioso de la solución :-).
    • No es 100% feliz con el resultado, necesita algunos ajustes, pero me tihnk es un buen comienzo, yo no resolver los requisitos que he mencionado, que todavía está en la lista de tareas. Así que siéntete libre para completar mis requisitos y actualización de la respuesta 🙂
  4. 1

    Yo sugeriría usted a la caja https://vlio20.github.io/angular-datepicker/

    Angular-Material DateTime Selector De Componente?

    • Alguna idea de cómo resolver este problema para este day-time-picker? ERROR TypeError: Cannot read property 'locale' of undefined at DayTimeCalendarService.push../node_modules/ng2-date-picker/fesm5/ng2-date-picker.js.DayTimeCalendarService.getConfig (ng2-date-picker.js:999) at DayTimeCalendarComponent.push../node_modules/ng2-date-picker/fesm5/ng2-date-picker.js.DayTimeCalendarComponent.init (ng2-date-picker.js:1691) at DayTimeCalendarComponent.push../node_modules/ng2-date-picker/fesm5/ng2-date-picker.js.DayTimeCalendarComponent.ngOnInit (ng2-date-picker.js:1687)
    • He instalado las dependencias (de momento & tslib)
    • Necesitas momento de la configuración regional supongo
    • Hice añadido moment-with-locales.min.js archivo en mi carpeta de recursos de
    • Les sugiero que abran un tema en el repo de github, stackblitz ayudará

Dejar respuesta

Please enter your comment!
Please enter your name here