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", "zh-TW", "es" If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", 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 that 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, 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 that 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, 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): 2021 2021T01 2021-06 2021-12-12 2021-12-12T01 2021-12-12T01:01 If the date and/or month is ignored, it will be supplemented with 01 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

info

*1: The displayed date format is automatically switched depending on the language property setting as follows:

• "en": MM/DD/YYYY
• "ja", "zh", "zh-TW", "es": YYYY-MM-DD

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

Constructor

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

Parameter

Name	Type	Default	Description	Remark
options	object	{}	Object that includes component properties

Custom CSS

tip

Please check Custom CSS feature guide at first.

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

Property

Name
--kuc-date-time-picker-date-input-width
--kuc-date-time-picker-time-input-width
--kuc-date-time-picker-input-height
--kuc-date-time-picker-input-font-size
--kuc-date-time-picker-input-color

---

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);
});