Actions buttons

The default TimePicker doesn't have any buttons. However, you can add two buttons that will allow you to close the timepicker after selecting necessary time or save the values selected for hour and minutes. These controls are helpful if you attach TimePicker to an input or a calendar, for example.

Actions buttons

There's the controls property in the timepicker configuration that while set to true enables rendering of the Save button and the Close icon button in the top right corner of the component.

var timepicker = new dhx.Timepicker("timepicker_container",{
    controls:true });

Related sample:  Timepicker. Timepicker With Controls

Time format

By default TimePicker displays time in the 24-hour clock format. You can switch to the 12-hour format by setting the timeFormat option to 12 in the configuration object of the component. In this mode the clock inside the timepicker will be shown together with the AM/DM identifier depending on the selected time of the day.

  • 24-hour clock:

24-hour clock

var timepicker = new dhx.Timepicker("timepicker_container1");
  • 12-hour clock:

12-hour clock

var timepicker2 = new dhx.Timepicker("timepicker_container2",{
    timeFormat:12 });

Related sample:  Timepicker. 12 Hour Format In Timepicker

Back to top