Above page can be accessed here: http://demo.guru99.com/test/ If we see the DOM of the DateTime Picker control, there will be only one input box for both date and time.

If we need to fill 02:45 PM , we will pass it a ‘0245PM’ to the same input box. The code for datepicker looks like this –

Lets look at another Calendar example. We will use Telerik DateTimePicker control. Can be accessed here

Here if we need to change the month, we have to click on the middle of the calendar header.

Similarly if we need to change the year then we can do it by clicking next or previous links on the datepicker.

And finally for changing the time we can select correct time from the dropdown(Note: Here time is selected in a gap of 30 min. i.e., 12:00, 12:30 , 1:00, 1:30 etc.).

A complete example looks like- Output will be like