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

TimePicker

Overview

TimePicker は入力エリアと時間選択用のリストを表示します。


Specification

Property

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

NameTypeDefaultDescriptionRemark
classNamestring""コンポーネントの class 名
errorstring""エラーに表示するテキスト未指定、あるいは空文字の場合、error は表示されない
idstring""コンポーネントの id 名
labelstring""コンポーネントの説明ラベル未指定、あるいは空文字の場合、label は表示されない
valuestring""表示するテキストフォーマットは HH:MM
以下の時間も指定できる(内部的に HH:MM に変換される):
  • 5:30
  • 05:3
  • 5:3
  • 時間や分が 1文字の場合、0 が先頭に補完される
    不正なフォーマットや値を指定した場合、エラーを出力する
    disabledbooleanfalseコンポーネントの選択可/不可設定
    hour12booleanfalse時刻表記の設定 (12時間表記/24時間表記) デフォルトは 24時間表記指定できるオプション:
    true: 12時間表記
    false: 24時間表記
    requiredIconbooleanfalseコンポーネントの必須アイコン表示/非表示設定
    visiblebooleantrueコンポーネントの表示/非表示設定

    Event

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

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

    event.detail で以下の値を受け取ることができる
    event.detail.oldValue : 変更前の value の値
    event.detail.value : 変更後の value の値

    Constructor

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

    Parameter

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

    Sample Code

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

    const space = kintone.app.record.getSpaceElement('space');
    const timePicker = new Kuc.TimePicker({
    label: 'Time',
    requiredIcon: true,
    hour12: false,
    value: '11:30',
    error: 'Error occurred!',
    className: 'options-class',
    id: 'options-id',
    visible: true,
    disabled: false
    });
    space.appendChild(timePicker);

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