Customize and Edit Dates and Times with Wijmo Calendar, InputDate and InputTime

Wijmo has three controls you can use for editing dates and times: Calendar, InputDate, and InputTime controls.

Customize the Appearance and Range of Dates in Calendar

The Calendar control shows a month calendar and allows users to select a single day. On the top left corner of the calendar, the control shows the current month and year. Users may click a drop-down icon to switch between day and month modes. On the top-right corner of the calendar, there are buttons to select the previous month (or year), today's date, or the next month (or year). The images below show the calendar in day and month modes: Wijmo Calendar Day and Month Views You can use the itemFormatter property or the formatItem event to customize the appearance of certain days in the calendar. In addition to that, you can use the min and max properties to specify a range of valid dates, and the itemValidator property to disable certain dates so they cannot be selected by users. The itemValidator specifies a function that takes a date as input and returns true or false to indicate whether the date should be selectable. If the validator function returns false, the item becomes disabled, so it cannot be selected, and it gets a ‘wj-state-invalid’ class so it can be styled in CSS. The currently selected date can be retrieved or modified using the value property.

Modify the Time Intervals in the InputTime ComboBox

The InputDate control is a drop-down. Users may enter or edit dates by typing in their values or by using the drop-down, which shows a Calendar control. The image below shows an InputDate control with the drop-down open: Wijmo Calendar Date Drop Down List The InputTime control complements the InputDate and Calendar controls and allows users to select times. The InputTime control is a ComboBox that allows users to type in or select time values from a drop-down list. By default, the list is populated with time values ranging from 12:00 am (midnight) to 11:30 pm, in 30 minute intervals. You can change this by modifying the value of the min, max, and step properties. The image below shows the InputTime control with the drop-down open: Wijmo Calendar Time Drop Down List Notice that the InputDate and InputTime controls only modify the date and time portions of the Javascript Date object bound to their value property. Because of this, you can bind both controls to a single instance of a Date object to edit the date and time represented by the object. Also notice that the InputDate and InputTime controls are touch-friendly. Mobile users can typically select a date or a time with two taps (one to open the drop-down and one to select the desired value). Contrast this with the native date and time input controls on many popular devices. They often use three separate elements to select the month, day, and year (or hour, minute, and AM/PM). Some implementations allow editing these controls with swiping gestures, and some require tapping to increment or decrement the values: Other date/time controls These controls look nice, but they aren't easy to use. Imagine having to scroll a list from the 2nd to the 28th of a month, even if the scrolling is a beautiful fluid inertial action… The situation is even worse for time editors, where the minute selector typically has 60 possible values to scroll. In most cases, this is simply overkill. When was the last time you had to set your alarm clock to 9:27am? Or schedule a meeting for 3:44pm? Most time values are specified in 15- or 30-minute increments. Of course, if you do have to be able to select any time at all, then you can set the InputTime control’s step property to one. You'll get a pretty long list to choose from, but at least you can type if you're not a fan of scrolling.


GrapeCity Developer Tools
comments powered by Disqus