找不到 kendo-ui-angular2 的 "DateTimePicker"？

Question

似乎对于其他一些 JavaScript 库 kendo-ui 有一个日期时间选择器来处理日期选择和时间选择。

我似乎找不到 angular 2+ 库或他们的文档。有谁知道有没有日期时间选择器？

如果没有，使用 Angular2 formcontrols 处理 JavaScript 日期对象的一些策略是什么，您需要在其中管理日期和时间？

编辑： 我知道 kendo 有一个日期选择器。我正在寻找日期时间选择器。（我还可以管理时间组件的日期选择器）。

我要完成的就是这个。在 Angular 4/5 中，我有一个从 formbuilder 创建的反应式表单。在我的对象中，我有一个日期时间字段。我一直在寻找一个组件来管理这个日期时间对象的日期和时间部分。我认为我可以将日期选择器和时间选择器结合起来，但我不确定如何使用 formcontrols 来做到这一点。我希望 kendo 可能有一个日期时间选择器。由于他们不这样做，我将研究如何使用日期选择器和时间选择器组件来做到这一点。

Answer 1

Kendo for angular 分别提供日期选择器和时间选择器，因此您可以将两者结合使用来实现您的功能。

<kendo-datepicker> </kendo-datepicker> <kendo-timepicker> </kendo-timepicker>

如果您不想使用两个选择器，请仅保留日期选择器并为 [format] 属性提供包括日期和时间在内的正确格式。

<kendo-datepicker [format]="'dd-MMM-yyyy HH:mm:ss'"> </kendo-datepicker>

现在，您可以 select 从选择器中获取日期并使用键盘箭头键或手动输入时间。这是目前唯一的方法，因为 kendo 还没有提供 DateTimePicker。

Answer 2

这是一个不太理想的解决方案，但我有一个客户非常喜欢 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;
        }
    }
}

找不到 kendo-ui-angular2 的 "DateTimePicker"？

cant find a "DateTimePicker" for kendo-ui-angular2?

datepicker

datetimepicker

timepicker

kendo-ui-angular2

angular