DateTimePicker
Overview
The DateTimePicker component allows the user to display a input area of time & date and each selection part.
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 *1 | 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 YYYY-MM-DDTHH:MM:SS The below date and time can be used (it will be converted to YYYY-MM-DDTHH:MM:SS internally): If the hour, minute, and/or second is ignored, it will be supplemented with 00 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 event.detail.changedPart : "date" or "time" which has been changed |
info
*1: The displayed date format is automatically switched depending on the language
property setting as follows:
- "en": MM/DD/YYYY
- "ja", "zh": YYYY-MM-DD
Constructor
DateTimePicker(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 dateTimePicker = new Kuc.DateTimePicker({
label: 'DateTime',
requiredIcon: true,
language: 'auto',
hour12: false,
value: '2021-11-11T11:30:00',
error: 'Error occurred!',
className: 'options-class',
id: 'options-id',
visible: true,
disabled: false,
timeStep: 30,
max: '23:59',
min: '00:00'
});
space.appendChild(dateTimePicker);
dateTimePicker.addEventListener('change', event => {
console.log(event);
});