Skip to main content

Work with TimePicker

You can change the value of the TimePicker or get its current value via the related API methods.

Setting value​

There is the setValue() method that makes it easy to change the value of the timepicker on the fly. The method takes as a parameter the value which can be passed in several formats:

  • as a Date object
  • as a string
  • as an array with the following elements:
    • the hour value
    • the minutes value
    • the "AM/PM" identifier for 12-hour format as a string
  • as a number of milliseconds since January 1, 1970, 00:00:00 UTC returned by the getTime() method of the Date object

For example:

// set the value as a string
timepicker.setValue("00:39");

// set the value as a Date object
timepicker.setValue(new Date('January 10, 2019 17:54:00'));

// set the value as an array
timepicker.setValue([6,20,"AM"]);

// set the value as a number
timepicker.setValue(1559288966422);

Related sample: Timepicker. Set Timepicker value

Getting value​

You can get the value of TimePicker either as an object or as a string via the getValue() method. It takes one parameter:

  • asObject - (boolean) optional, specifies that the value will be returned as an object, false by default
// return value as a string in the 24-hour format
const val1 = timepicker.getValue(); // -> "00:39"

// return value as an object in the 24-hour format
const val2 = timepicker.getValue(true);// -> {hour: 0, minute: 39}

// return value as a string in the 12-hour format
const val3 = timepicker2.getValue(); // -> "06:00AM"

// return value as an object in the 12-hour format
const val4 = timepicker2.getValue(true); // -> {hour: 6, minute: 0, AM: true}

Related sample: Timepicker. Get Timepicker value

The returned value can be of several types, depending on the passed parameter and the applied time format:

  • for the 24-hour format a return string value will include just the hour and minutes: "00:39"
  • for the 12-hour format a return string value will include hour, minutes, and am/pm identifiers: "06:00AM"
  • for the 24-hour format a return object value will contain key:value pairs for hours, minutes and their values
  • for the 12-hour format a return object value will contain key:value pairs for hours, minutes, am/pm identifiers and their values