メインコンテンツまでスキップ
バージョン: 1.17.0

DateTimePicker

Overview​

DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。

Specification​

Property​

使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。

NameTypeDefaultDescriptionRemark
classNamestring""コンポーネントの class 名
errorstring""エラーに表示するテキスト未指定、あるいは空文字の場合、error は表示されない
idstring""コンポーネントの id 名
labelstring""コンポーネントの説明ラベル未指定、あるいは空文字の場合、label は表示されない
language *1string"auto"言語設定指定できるオプション: "auto", "en", "ja", "zh", "zh-TW"
"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"zh"/"zh-TW"/"ja" 以外の場合は、言語設定が "en" になる）
maxstring""時刻リストの終了時間設定フォーマットは HH:MM
時刻リストは、max に指定した時刻まで表示されて、それ以降は表示されない
以下の時間も指定できる（内部的に HH:MM に変換される）:
  • 5:30
  • 05:3
  • 5:3
    • 時間や分が 1文字の場合、0 が先頭に補完される
    不正なフォーマットや値や min 時刻が max 時刻よりも大きい値の場合、エラーを出力する
    minstring""時刻リストの開始時間設定フォーマットは HH:MM
    時刻リストは、min に指定した時刻から表示されて、それ以前は表示されない
    以下の時間も指定できる（内部的に HH:MM に変換される）:
  • 5:30
  • 05:3
  • 5:3
    • 時間や分が 1文字の場合、0 が先頭に補完される
    不正なフォーマットや値や min 時刻が max 時刻よりも大きい値の場合、エラーを出力する
    valuestring""表示するテキストフォーマットは YYYY-MM-DDTHH:MM:SS
    以下の日時も指定できる（内部的に YYYY-MM-DDTHH:MM:SS に変換される）:
  • 2021
  • 2021T01
  • 2021-06
  • 2021-12-12
  • 2021-12-12T01
  • 2021-12-12T01:01
    • 日や月の記載がない場合、01 で補完される
    時間や分や秒の記載がない場合、00 で補完される
    不正なフォーマットや値や min/max プロパティで指定した有効な時刻の範囲を超える値を指定した場合、エラーを出力する
    disabledbooleanfalseコンポーネントの選択可/不可設定
    hour12booleanfalse時刻表記の設定 (12時間表記/24時間表記) デフォルトは 24時間表記指定できるオプション:
    true: 12時間表記
    false: 24時間表記
    requiredIconbooleanfalseコンポーネントの必須アイコン表示/非表示設定
    visiblebooleantrueコンポーネントの表示/非表示設定
    timeStepnumber30時刻リスト内の時刻間隔の設定単位は分（正の整数）
    小数点以下を指定した場合は、最も近い整数に丸められる
    数値以外の値や max と min プロパティの時刻差異よりも大きな値を指定した場合、エラーを出力する
    備考

    *1: 表示される日付のフォーマットは、language プロパティの設定に応じて以下のように自動的に切り替わる。

    • "en" の場合: MM/DD/YYYY
    • "ja", "zh", "zh-TW" の場合: YYYY-MM-DD

    Event​

    指定できるイベントの一覧です。

    NameTypeDescriptionRemark
    changefunction値が変更された時のイベントハンドラ引数には Event の event オブジェクトをとる

    event.detail で以下の値を受け取ることができる
    event.detail.oldValue : 変更前の value の値
    event.detail.value : 変更後の value の値
    event.detail.changedPart : 変更されたパーツ "date" もしくは "time"

    Constructor​

    DateTimePicker(options)
    使用できるコンストラクタの一覧です。

    Parameter​

    NameTypeDefaultDescriptionRemark
    optionsobject{}コンポーネントのプロパティを含むオブジェクト

    Custom CSS​

    ヒント

    Custom CSS をご確認ください。

    コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。

    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​

    ヒント

    導入と実装方法 をご確認ください。

    全てのパラメータを指定した場合のサンプルコードです。

    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);
    });
    に最終更新