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:
Name | Type | Default | Description | Remark |
---|---|---|---|---|
className | string | "" | Component class name | |
error | string | "" | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
id | string | "" | Component id name | |
label | string | "" | Label for the component | Label will not be displayed if unspecified or left empty |
language | string | "auto" | Language setting | Available options: "auto", "en", "ja", "zh" If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"zh"/"ja", the language setting will be "en") |
max | string | "" | Setting of the time listbox ending point | Format is HH:MM In the time listbox, it is displayed up to the time set to max , and it is not displayed after thatThe below time can be used (it will be converted to HH:MM internally): Will result an error if setting invalid format or value, or min time is greater than max time |
min | string | "" | Setting of the time listbox starting point | Format is HH:MM In the time listbox, it is displayed from the time set to min , and it is not displayed before thatThe below time can be used (it will be converted to HH:MM internally): Will result an error if setting invalid format or value, or min time is greater than max time |
value | string | "" | Text to be displayed | Format is HH:MM The below time can be used (it will be converted to HH:MM internally): Will result an error if setting invalid format or value, or it is out of valid range set by min and max properties |
disabled | boolean | false | Enable/Disable the component | |
hour12 | boolean | false | Setting of the clock display (12-hour clock/24-hour clock) Default is 24-hour clock | Available options: true: 12-hour clock false: 24-hour clock |
requiredIcon | boolean | false | Show/Hide the required icon | |
visible | boolean | true | Show/Hide the component | |
timeStep | number | 30 | Setting of time interval in the time listbox | Unit is minute (positive integer) Round off to the nearest whole number when the decimal point is set Will result an error if it is not a number or greater than the difference between max and min |
Event
Here is a list of events that can be specified:
Name | Type | Description | Remark |
---|---|---|---|
change | function | Event handler when the value has been changed | It 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
Name | Type | Default | Description | Remark |
---|---|---|---|---|
options | object | {} | Object that includes component properties |
Sample Code
tip
Please check the package installation method first.
Here is a sample code when all parameters are specified:
const Kuc = Kucs['1.x.x'];
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,
language: 'en',
timeStep: 30,
max: '23:59',
min: '00:00'
});
space.appendChild(timePicker);
timePicker.addEventListener('change', event => {
console.log(event);
});