Skip to main content
Version: 1.3.0

TimePicker

Overview

The TimePicker component allows the user to display a input area and time selection listbox.


Specification

Property

Here is a list of properties that can be used for modifying the component:

NameTypeDefaultDescriptionRemark
classNamestring""Component class name
errorstring""Text to be displayed in errorError will not be displayed if unspecified or left empty
idstring""Component id name
labelstring""Label for the componentLabel will not be displayed if unspecified or left empty
valuestring""Text to be displayedFormat is HH:MM
The below time can be used (it will be converted to HH:MM internally):
  • 5:30
  • 05:3
  • 5:3
  • If the hour and/or time has only 1 character, 0 will be added to the beginning
    Will result an error if setting invalid format or value
    disabledbooleanfalseEnable/Disable the component
    hour12booleanfalseSetting of the clock display (12-hour clock/24-hour clock) Default is 24-hour clockAvailable options:
    true: 12-hour clock
    false: 24-hour clock
    requiredIconbooleanfalseShow/Hide the required icon
    visiblebooleantrueShow/Hide the component

    Event

    Here is a list of events that can be specified:

    NameTypeDescriptionRemark
    changefunctionEvent handler when the value has been changedIt will pass the event object as the argument

    You can receive the following values in event.detail
    event.detail.oldValue : Value before the change
    event.detail.value : Value after the change

    Constructor

    TimePicker(options)
    Here is a list of available constructors:

    Parameter

    NameTypeDefaultDescriptionRemark
    optionsobject{}Object that includes component properties

    Sample Code

    Here is a sample code when all parameters are specified:

    const space = kintone.app.record.getSpaceElement('space');
    const timePicker = new Kuc.TimePicker({
    label: 'Time',
    requiredIcon: true,
    hour12: false,
    value: '11:30',
    error: 'Error occurred!',
    className: 'options-class',
    id: 'options-id',
    visible: true,
    disabled: false
    });
    space.appendChild(timePicker);

    timePicker.addEventListener('change', event => {
    console.log(event);
    });