Skip to main content
Version: 1.5.0

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:

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
language *1string"auto"Language settingAvailable 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")
maxstring""Setting of the time listbox ending pointFormat 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
    minstring""Setting of the time listbox starting pointFormat 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
    valuestring""Text to be displayedFormat 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
    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
    timeStepnumber30Setting of time interval in the time listboxUnit 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:

    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
    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

    NameTypeDefaultDescriptionRemark
    optionsobject{}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);
    });