Configuration

Action buttons

The default Timepicker has no buttons. However, you can add two buttons that let you close the timepicker after you select the time or save the selected hours and minutes. These controls help when you attach Timepicker to an input or a calendar, for example.

Set the controls property to true to display the Close icon button in the top-right corner of the component and the Save button at the bottom:

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

Related sample: Timepicker. Initialization with button

Time format

The default time format of Timepicker is 24-hour. To switch to the 12-hour format, set the timeFormat property to 12 in the Timepicker configuration. In this mode, the timepicker shows the clock together with the AM/PM identifier that matches the selected time of day.

• 24-hour clock:

const timepicker = new dhx.Timepicker("timepicker_container");

• 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 the timepicker shows on initialization. To do that, specify the value property in the Timepicker configuration. The property accepts a value of the following types: Date, string, number, array, or 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