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

2
votes

It appears that for some other JavaScript libraries kendo-ui had a datetimepicker to handle date selection and time selection.

I can't seem to find one for the angular 2+ library or in their documentation. Does anyone know if there is a datetimepicker?

If not, what are some strategies for handling a JavaScript date object where you need to manage both the date and time, using Angular2 formcontrols?

Edit: I am aware that kendo has a datepicker. I am looking for a datetimepicker. (a date picker that I can also manage the time component).

What I am trying to accomplish is this. In Angular 4/5, I have a reactive form created from formbuilder. In my object I have a datetime field. I was looking for a component that would handle managing both the date and time portion of this datetime object. I figured that I could combine the datepicker and timepicker but I am unsure how to do this with formcontrols. I was hoping that kendo may have had a datetimepicker. Since they do not I will research how to do this using the datepicker and timepicker components.

2
angulardatepickerdatetimepickertimepickerkendo-ui-angular2
Kendo datepicker is not released yet check this out --> github.com/telerik/kendo-angular/issues/194. – Paka
You can use this npm module ng2-datepicker --> npmjs.com/package/ng2-datepicker – Paka
Kendo DatePicker component is officially released and available more then 1/2 an year now. You can combine DatePicker and TimePicker components to achieve DateTimePicker behavior - plnkr.co/edit/cChdL9E2VZm8ug3LskE5?p=preview – George K
@GeorgeK do you by any chance have a plunker or example where the datepicker and timepicker are inside a formcontrol and both affect the same object within the form? I edited my question to provide more info. – Jay Culpepper
@GeorgeK It appears that I was able to get it working with this... [(value)]="fg.controls.test.value". I was trying to use formControls though. Here is my plunker plnkr.co/edit/wGXhnTS03Fh8ZsgC4bG4?p=preview?p=preview – Jay Culpepper

2 Answers

3
votes

Kendo for angular provides datepicker and timepicker separately, so you can use both together to achieve your functionality.

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

If you don't want to use two picker, keep only datepicker and give [format] attribute a proper format including date and time.

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

Now, you can select date from picker and enter time using keyboard arrow keys or manually. This is the only way you can do it for now, because kendo haven't provided DateTimePicker yet.

1
votes

This is a less than ideal solution but I've had a client who really got attached to the kendoJS dateTimePicker and I've had to find an Angular fix that also works with our form validation.

Basically it's just using style hacks to weld a time picker and date picker together visually and have them share the ngModel. It validates and allows for the use of both picker UI's:

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