角材料日期时间采集器组件? ？

不幸的是，对于是否有官方的材料支持来选择时间的问题，答案是“没有”，但是目前在官方的材料2 GitHub 回购协议 https://github.com/angular/material2/issues/5648上还有一个未解决的问题

但愿这种情况很快就会改变，与此同时，你将不得不与你已经发现的第三方战斗。在这个 GitHub 问题中，有一些人提供了他们自己制作的解决方案，您可以尝试一下。

在使用 matInput和 datetime-local类型时，您可以使用一个日期时间选择器，如下所示:

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

您可以单击占位符的每个部分来设置日、月、年、小时、分钟以及是上午还是下午。

只要没有正式的日期 还有时间选择器从角本身，我会建议使一个组合的 默认角度日期选择器和这个 角度材质计时器。我之所以选择这个版本，是因为我此时发现的所有其他版本都缺乏对问题的支持，或者已经过时，或者在最新的有棱角的版本中运行得不好。这家伙似乎反应很灵敏。

我将它们都包装在一个组件中，这样看起来就像是一个单元。你只需要确保做几件事:

如果尚未收到任何投入，我建议:

• 单击组件时，应该总是先触发数据采集器。
• 在数据采集器关闭后，让时间采集器自动弹出。
• 在数据采集器上使用 touchUi = true，这样数据采集器和计时器就可以作为一个对话框彼此排在后面。
• 确保在点击表单时也会显示数据收集器(而不是只显示默认的图标)。
• 使用 这个解决方案的时间选择器也在一个物质的形式，当把他们彼此之后，它看起来像是一个形式。

在给出一个值之后，很明显，其中一部分包含时间，另一部分包含日期。这时很明显，用户必须点击时间来改变时间，点击日期来改变日期。但是在此之前，当这两个字段都是空的(并且作为一个字段“附加”在一起) ，您应该确保用户不会因为执行上述建议而感到困惑。

我的组件还没有完成，我会尽量记住自己以后共享的代码。如果这个问题已经超过一个月了，可以发表评论。

编辑: 结果

<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);
}
}

一个重要的来源: https://github.com/Agranom/ngx-material-timepicker/issues/126

我认为它仍然值得一些调整，因为我认为它可以工作得更好一点，当我有更多的时间创建这一点。最重要的是，我还试图解决 UTC 问题，所以所有日期都应该以本地时间显示，但是应该以 UTC 格式发送到服务器(或者至少保存并添加正确的时区)。

我建议你检查一下 https://vlio20.github.io/angular-datepicker/

我建议你检查一下 @ 角度材料元件/日期时间选择器。 这是一个 DatetimePicker，类似于@angle/Materials Datepicker，它添加了对选择时间的支持。

实现 Date & Time 控件的最佳方法是使用输入类型“ datetime-local”。 请参考 < a href = “ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local”rel = “ nofollow norefrer”> https://developer.mozilla.org/en-us/docs/web/html/element/input/datetime-local

示例代码是

<mat-grid-list [cols]="5" gutterSize="20px" rowHeight="70px">
<form *ngIf="dateForm && dateForm !== null" [formGroup]="dateForm">
<mat-grid-tile>
<mat-form-field appearance="outline" floatLabel="auto">
<mat-label>From Date</mat-label>
<input type="datetime-local" matInput name="fromTime" formControlName="fromDate">
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field appearance="outline" floatLabel="auto">
<mat-label>To Date</mat-label>
<input type="datetime-local" matInput name="toTime" formControlName="toDate">
</mat-form-field>
</mat-grid-tile>
</form>
</mat-grid-list>

目前有一个针对 Angular Team 的官方公开问题，从4年前就开始要求支持 Time 和 dateTime 选择器: ref = “ https://github.com/angle/Component/questions/5648”rel = “ nofollow norefrer”> https://github.com/Angular/components/issues/5648

正如你在这篇文章中看到的，有很多库，问题是它们中的大多数都已经过时了(旧的 Angular 版本)。

所以，我实际上使用的是@matheo 上的这个，这是我发现的最新的维护版本:

这个 https://www.npmjs.com/package/@coachcare 最近被移到了一个 https://www.npmjs.com/package/@matheo/datepicker

演示: http://matheo.co/demos/datepicker

注意 : 如果它不适用于角度版本 > = 12，请检查是否正在使用新的角度约定主题，例如:

@use "~@matheo/datepicker/theming" as datepicker;
// ...
@include datepicker.mat-datepicker-theme($main_theme);

我认为最好使用有角的材料延伸。这似乎是非常有用的 Https://ng-matero.github.io/extensions/components/datetimepicker/overview