Question

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

我似乎找不到一个角度2+库或他们的文档。有没有人知道是否有datetimepicker？

如果没有，使用Angular2 formcontrols处理需要管理日期和时间的JavaScript日期对象有哪些策略？

修改我知道剑道有一个日期选择器。我正在寻找一个日期时间选择器。（日期选择器，我也可以管理时间组件）。

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

Answer 1

Kendo for Angle分别提供日期选择器和时间选择器，因此您可以将两者一起使用以实现功能。

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

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

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

现在，您可以从选择器中选择日期，然后使用键盘箭头键或手动输入时间。这是您目前唯一的方法，因为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”？

2 个答案: