看来,对于其他一些JavaScript库,kendo-ui有一个datetimepicker来处理日期选择和时间选择。
我似乎找不到一个角2+库或他们的文档。有谁知道是否有datetimepicker?
如果没有,使用Angular2 formcontrols处理JavaScript日期对象的哪些策略需要管理日期和时间?
编辑:我知道剑道有一个日期选择器。我正在寻找一个datetimepicker。 (我也可以管理时间组件的日期选择器)。
我想要完成的是这个。在Angular 4/5中,我有一个从formbuilder创建的反应形式。在我的对象中,我有一个日期时间字段。我一直在寻找一个可以处理这个日期时间对象的日期和时间部分的组件。我想我可以结合使用datepicker和timepicker,但我不确定如何使用formcontrols。我希望剑道可能有一个datetimepicker。由于他们不这样做,我将使用datepicker和timepicker组件研究如何做到这一点。
Kendo for angular分别提供了datepicker和timepicker,因此您可以同时使用它们来实现您的功能。
<kendo-datepicker> </kendo-datepicker> <kendo-timepicker> </kendo-timepicker>
如果您不想使用两个选择器,请仅保留datepicker并为[format]
属性指定正确的格式,包括日期和时间。
<kendo-datepicker [format]="'dd-MMM-yyyy HH:mm:ss'"> </kendo-datepicker>
现在,您可以从选择器中选择日期并使用键盘箭头键或手动输入时间。这是你现在唯一能做到的方法,因为剑道尚未提供DateTimePicker
。
这是一个不太理想的解决方案,但我有一个真正附加到kendoJS dateTimePicker的客户端,我必须找到一个Angular修复程序,它也适用于我们的表单验证。
基本上它只是使用样式黑客将时间选择器和日期选择器可视地焊接在一起并让它们共享ngModel。它验证并允许使用两个选择器UI:
HTML:
<label [for]="eta"> ETA </label>
<kendo-datepicker class="paired-date-picker" name="eta" #eta [(ngModel)]="dateObject" formatPlaceholder="formatPattern" [format]="'dd MMM yyyy HH:mm'" #etaVar="ngModel" required>
</kendo-datepicker>
<kendo-timepicker class="paired-time-picker" name="eta-pair" [(ngModel)]="dateObject">
</kendo-timepicker>
<span class="help-block orange" *ngIf="(etaVar.touched || etaVar.dirty) && etaVar.errors" [@growUp]>
<span *ngIf="etaVar.errors.required">
ETA is required.
</span>
</span>
SCSS:
.paired-date-picker {
width: calc(100% - 30px) !important;
}
.paired-time-picker {
width:30px !important;
.k-picker-wrap {
border-left:none !important;
box-shadow: none !important;
width:30px !important;
.k-dateinput {
display: none !important;
}
}
}