While using separate controls for editing dates and times is a good idea in most cases, sometimes you'll want to provide your user with a single entry option for date and time. Wijmo's InputDateTime control allows users to type a full date and time into a single input box, or use a picker for date and time. Wijmo has always had great support for date and time editing with the InputDate and InputTime controls. These controls are used to display and edit the date and time portion of JavaScript Date objects. We feel that using separate controls for editing dates and times is a good idea in most cases because:
- Sometimes only the date or time parts of the Date object is relevant, and the other can be ignored;
- If both date and time parts are relevant, you can bind an InputDate and an InputTime control to the same Date object and edit both parts independently. This usually makes editing easier and clearer. (This is the approach used by the Outlook calendar for example)
Here is a screenshot showing the InputDate and InputTime controls side by side: 
InputDate and InputTime controls But there are exceptions. You may want to allow users to edit both date and time and you may not have enough real estate on your layout to accommodate two controls. In these cases it would be convenient to consolidate the date and time editing into a single control. To handle this scenario, we added a new InputDateTime control. It provides an editing element where users may type the date and time, and two separate drop-downs that can be used to quickly pick a date or a time. The InputDateTme extends the InputDate control, so its object model is familiar and consistent. Here's a screenshot showing the InputDateTime control: 
Edit date and time in one control Of course all the controls are localizable, themable, and have full keyboard and mouse support. Added in version 5.20153.110
CSS icons in InputDateTime
The new InputDateTime control has drop-down buttons for editing the data and time parts of JavaScript Date objects. The buttons show icons that represent a calendar and a clock. Like all icons used in Wijmo controls, these are built using CSS which is included in the wijmo.css file. Defining icons in CSS has several advantages over using images:
- The icons scale automatically when the font size changes
- Their color adapts automatically to match the current theme
- They do not require separate files or downloads
- They can be easily customized using CSS (you can use images if you choose to).
Because the icons are included with wijmo.css, you can use them in your applications if you want. See a complete list of the icons included in the wijmo.css file. Expanded in version 5.20153.108
MESCIUS inc.