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

DatePicker

Overview

DatePicker は入力エリアと日付選択用のカレンダーを表示します。


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" になる)
valuestring""表示するテキストフォーマットは YYYY-MM-DD
以下の日付も指定できる(内部的に YYYY-MM-DD に変換される):
  • 2021
  • 2021-1
  • 2021-01
  • 2021-1-9
  • 21-01-01
  • 年が 4文字以下の場合、0 が先頭に補完される
    日や月の記載がない場合、01 で補完される
    日や月が 1文字の場合、0 が先頭に補完される
    不正なフォーマットや値を指定した場合、エラーを出力する
    disabledbooleanfalseコンポーネントの選択可/不可設定
    requiredIconbooleanfalseコンポーネントの必須アイコン表示/非表示設定
    visiblebooleantrueコンポーネントの表示/非表示設定
    備考

    *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 の値

    Constructor

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

    Parameter

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

    Sample Code

    ヒント

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

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

    const Kuc = Kucs['1.x.x'];

    const space = kintone.app.record.getSpaceElement('space');

    const datePicker = new Kuc.DatePicker({
    label: 'Date',
    requiredIcon: true,
    language: 'auto',
    value: '2021-11-11',
    error: 'Error occurred!',
    className: 'options-class',
    id: 'options-id',
    visible: true,
    disabled: false
    });
    space.appendChild(datePicker);

    datePicker.addEventListener('change', event => {
    console.log(event);
    });