DMXzone Timepicker Manual

The Basics: Basic Usage of DMXzone Timepicker

In this tutorial we will show you how use the DMXzone Timepicker extension.

*You can also check out the video.

How to do it

1. We've already created our website layout and now we're going to insert the DMXzone Timepicker. Click the DMXzone Timepicker icon and the dialog will appear.

2. You can add an ID for your timepicker. For our tutorial we choose  time format (1), in our case – hh:mm and intitial time (2).
    

3. For our timepicker we will use the Flick design (1), which is one of the 24 supplied in the extension. Also we set the default language to be English (2) and choose the show on focus and button (3) option.
   
   

4. From the various appearance options you can choose to display the calendar inline and many more.  We select the display hours (1) and display minutes (2).
   
   

5. In the animation options we leave all by default except for the speed that we set on normal.

6. In the advanced tab we will adjust the slider step settings for hours, minutes and seconds so that the selectable time range is in 15 minutes.
   
   

7. We also set the steps on which the label for hours, minutes and seconds will be shown.

8. You can use to create new button in order to add a hidden field that will store the time into a hidden field.

9. The DMXzone Timepicker can be changed at any time also from the Property Inspector. Now you can save your work and preview the result in the browser.