Skip to main content

Configuration

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.

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

Related sample: Timepicker. Initialization with button

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

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

12-hour clock

const timepicker = new dhx.Timepicker("timepicker_container",{
    timeFormat:12
});

Related sample: Timepicker. 12 hour format in Timepicker

Initial value​

Starting with v7.0, you can set the time value that will appear on initialization of the timepicker. To do that, specify the value property in the configuration object of the timepicker. The property can accept a value in the following formats: Date, string, number, array, object. For instance:

// the value as a Date 
const timepicker = new dhx.Timepicker("timepicker_container", {
    value: new Date()
});
 
// the value as a number
const timepicker = new dhx.Timepicker("timepicker_container", {
    value: 1232151545
});
 
// the value as a string
const timepicker = new dhx.Timepicker("timepicker_container", {
    value: "22:30"
});
 
// the value as an array
const timepicker = new dhx.Timepicker("timepicker_container", {
    value: [6,20,"AM"]
});
 
// the value as an object
const timepicker = new dhx.Timepicker("timepicker_container", {
    value: {hour: 10, minute: 50, AM: true}
});

Related sample: Timepicker. Initialization with button