日時ピッカー
Android または iOS オペレーティング・システムを実行するモバイル・デバイスの場合のみ、日時ピッカー・ビューにはオペレーティング・システム (OS) に組み込まれているネイティブ日時ピッカーが表示されます。 この動作は、さまざまな日時ピッカーがユーザーに表示されることを意味します。 例えば、ユーザーが Android OS で Google Chrome を使用してタスクを処理する場合は、ネイティブの日時ピッカーが表示されます。 その後、このユーザーが Apple iPhone に切り替えると、今度は iOS のネイティブの日時ピッカーが表示されます。
日付は UTC 時間で保管されますが、表示される日時はユーザーのシステムの時間帯に合わせて調整されます。
制約事項と制限事項
ユーザーの入力した内容が日付として不完全であるか、または有効な形式でない場合、ユーザーが境界イベント (ボタン・クリックなど) をトリガーすると、バインド済みデータ項目は Null になります。 フローがページに戻ると、ビューは空になります。 同じデータ項目にバインドされた他のビューもすべて空になります。
ネイティブ日時ピッカーを使用する場合は、以下のような一部の構成プロパティーが適用されません。
- 無効な曜日
- 作業不可日
- 作業不可日の開始
- 作業不可日の終了
- 週の開始
- カレンダー・タイプ ( 「ヘブライ語」 または 「イスラム」 が選択されている場合)
- 日付ピッカー・タイプ ( 「インライン」 が選択されている場合)
データ・バインディング
「一般」プロパティー・タブでビューのデータ・バインディングの設定や変更を行います。 データ・バインディングには最初に表示する日時が含まれており、この値に対する更新が保管されます。 データ・タイプは Dateです。
構成プロパティー
「構成」で、ビューの外観および動作プロパティーを設定または変更します。
- 画面サイズ
- プロパティー名の横に画面サイズ・アイコン
がある構成プロパティーは、画面サイズごとに異なる値を持つことができます。 値を設定しない場合、画面サイズはそのデフォルト値として次に大きい画面サイズの値を継承します。
- テーマ定義
- テーマ定義は、ビューの色およびスタイルを指定し、その外観を決定します。 ビューのルック・アンド・フィールをテーマ・エディターでプレビューできます。 テーマを参照してください。
| 外観構成プロパティー | 説明 | データ・タイプ |
|---|---|---|
| 日付ピッカー・タイプ |
日時ピッカーのカレンダー表示のタイプ。
デフォルト値は 「テキスト入力」です。 |
DatePickerType |
| 幅 | 「日付ピッカー・タイプ」プロパティーで「テキスト入力」タイプが選択されている場合の、日時ピッカーの幅。 幅の単位は px (ピクセル)、% (パーセント)、または em で指定できます。 例えば、200pxなどです。 数値とともに単位タイプが指定されていない場合は、px を使用するものとみなされます。 デフォルトでは、幅は指定されていません。 | String |
| サイズ |
ビュー内のテキストのサイズ、ラベル・テキストのサイズ、およびテキストの周囲の埋め込みの量。 例えば、スマートフォンでテキストとラベルをより読みやすくするには、この構成オプションを Large に設定して、小さい画面サイズを補正することができます。 | TextSizeStyle |
| ラベルの配置 |
日時ピッカーのラベルの配置場所。 | LabelPlacement |
| ラベルの幅 |
ラベルの幅です。 幅の単位は px (ピクセル)、% (パーセント)、または em で指定できます。 例えば、50px、20%、または 0.4em のようにします。 単位タイプが指定されていない場合は、px と見なされます。 | String |
| 形式 | テキスト・フィールドに入力されたテキストを表示および解析するために使用されるフォーマット。 これには、自然言語に近い形式、区切り文字の有無、日と月のみ、日のみなど (MM/dd/yyyy、 dd/MM/yyyy、 yyyy-MM-dd、 yyyy MM dd、 yyyyMMdd、 DD MM、 DD) を含む、さまざまな日付入力が受け入れられます。 以下に例を示します。
この構成オプションは、Java SimpleDateフォーマットと同じフォーマットをサポートし、ブラウザーにネイティブ日時ピッカーがない場合にのみ適用されます。 |
String |
| 週の開始 | 各週の最初の曜日。 デフォルト値は 「日曜日」です。 | DatePickerWeekStart |
| 無効な曜日 | カレンダーで選択できないようにする 1 つ以上の曜日。 デフォルトでは、無効にされる曜日はありません。 | DatePickerDisabledWeekDays |
| 今日ボタンを表示 | 日付を今日の日付に設定する「本日」ボタンを表示または非表示にします。 デフォルトでは、ボタンは表示されません。 | Boolean |
| クリア・ボタンを表示 | 日付の値をクリアする「クリア」ボタンを表示または非表示にします。 デフォルトでは、ボタンは表示されません。 | Boolean |
| 向き | カレンダーがクリックされたときの、カレンダーの方向。 | DatePickerOrientation |
| 色のスタイル | 日時ピッカーの色のスタイル。 色は、指定したテーマの変数に対応します。 デフォルト値はデフォルト (濃い青) です。 | DatePickerColorStyle |
| 週番号の表示 |
グレゴリオ暦を使用する場合に、年間の週番号を表示します。 例えば、グレゴリオ年の最後の週が週番号であるとします。52. デフォルトでは、週番号は表示されません。 | Boolean |
| 今日を強調表示 | カレンダーで今日の日付を強調表示するかどうかを指定します。 デフォルトでは、今日の日付が強調表示されません。 | Boolean |
| ヘッダーの非表示 | カスタム日時ピッカーの上部のヘッダーを非表示にします。 デフォルトでは、ヘッダーは非表示になりません。 | Boolean |
| カレンダー・アイコンを表示 | テキスト入力ボックスにカレンダー・アイコンを表示します。 | Boolean |
| 年セレクターのスタイル | 年セレクターのスタイル ( Default または Modern)。 | tableHFStyle |
| 動作構成プロパティー | 説明 | データ・タイプ |
|---|---|---|
| カスタム・ピッカーのみ | モバイル・デバイスで、ネイティブの日時ピッカーではなくカスタムの日時ピッカーを常に表示します。 モバイル・デバイスでは、必ずネイティブ日時ピッカーの表示が最初に試行されます。 しかし、以下のいずれかのサポートされていない構成プロパティーが指定されている場合は、必ずカスタムの日時ピッカーが表示されます。
デフォルトでは、カスタムの日時ピッカーとネイティブ日時ピッカーの両方が必要に応じて使用されます。 |
Boolean |
| 時刻ピッカーを含める | 日時ピッカー・ビューとともに時刻ピッカーを表示します。 デフォルトでは、時刻ピッカーは表示されません。 | Boolean |
| カレンダー・タイプ | カレンダーのタイプ:
デフォルト値は Gregorianです。 |
CalendarType |
| タブ・インデックス | タブ・シーケンスのインデックス。 タブのインデックスは 1 から始まり、スパースに設定することができます。 例えば、1、5、10 などと指定できます。 タブ・インデックス・プロパティーは、タブ・キーを押して UI エリア間を移動する場合に、タブ・シーケンスをコントロールします。 | String |
| プレースホルダーのテキスト | データが入力されていないときに使用するプレースホルダー・テキスト。 通常、テキストはユーザーが必要とする入力の簡単な説明または例です。 バインド済みデータ項目に値が含まれていない場合、ユーザーがフィールドに入力するまでヒントが表示されます。 デフォルトでは、プレースホルダー・テキストは指定されていません。 | String |
| 使用可能な開始日 | 選択可能な最初の日時を指定します。 指定した選択可能な最初の日付より前の日付は、すべてブロックされます。 選択可能な最初の日付の形式は、外観プロパティーの「フォーマット」プロパティーで指定されます。 デフォルトでは、使用可能な開始日は指定されていません。 | Date |
| 使用可能な終了日 | 選択可能な最後の日時。 指定した選択可能な最後の日付より後の日付は、すべてブロックされます。 選択可能な最後の日付の形式は、外観プロパティーの「フォーマット」プロパティーで指定されます。 デフォルトでは、使用可能な終了日は指定されていません。 | Date |
| 作業不可日 | ブロックする単一の日付、または複数の連続しない 日付のリスト。 ブロックする日付のリストを指定すると、ビューでは、ネイティブ日時ピッカーではなくカスタム日時ピッカーが使用されます。 デフォルトでは、ブロックする日付は指定されません。 | Date (List) |
| 作業不可日の開始 | ブロックの対象となる連続する 日付の範囲の開始日。 デフォルトでは、ブロックする最初の日付は指定されません。 | Date |
| 作業不可日の終了 | ブロックの対象となる連続する 日付の範囲の終了日。 デフォルトでは、ブロックする最後の日付は指定されません。 | Date |
| 開始ビュー | カレンダー開始時の細分度。
デフォルト値は Monthです。 |
DatePickerStartView |
| 最小表示モード | カレンダーで使用する日付の最小細分度。
デフォルト値は 「日」です。 |
DatePickerMinViewMode |
| 自動的に閉じない | 日付が選択されたときにカレンダーを閉じないように指定します。 この場合、カレンダーは日時ピッカーがフォーカスを失ったときに閉じられます。 デフォルトでは、日付が選択されたときにカレンダーが自動的に閉じられます。 | Boolean |
| 世紀の範囲 | 現在の年より前の間隔で、2 桁の年を入力すると、100 年の範囲の開始を示します。 デフォルトでは、この値は 50 年に設定されています。これは、日付ピッカーが 50 年前から始まる 100 年の範囲にマップすることを意味します。 例えば、2023 年の 50 の世紀範囲の場合、世紀範囲の開始は 2023-50 = 1973 となり、これにより 2072 が世紀範囲の終了となります。 | Integer |
| スマート解析を無効にする | ユーザーが入力したテキストのスマート解析を無効にします。 スマート解析はデフォルトで有効になっています。 スマート解析が無効になっている場合、指定された日付/時刻形式を使用する値のみが受け入れられます。 指定された形式以外の形式は無効と宣言され、代わりに受け入れられた形式を使用するように求めるプロンプトがユーザーに出されます。 | Boolean |
例
クリック可能なカレンダー・ボタンを使用したい場合は、入力グループ・ビュー内に日時ピッカー・ビューを配置します。 入力グループ・ビューのプロパティーで、「ボタン・タイプ (Button type)」プロパティーを「アイコン」、「ボタン情報」プロパティーを「カレンダー」に設定します。 「入力グループ」ビューの On button click イベントで、以下のストリングを入力します。
${Control_ID}._instance.pickerControl.show();イベント
「イベント」プロパティーでビューのイベント・ハンドラーの設定や変更を行います。 イベントをプログラムでトリガーするかユーザーがビューと対話したときにトリガーするように設定できます。 イベントを定義およびコーディングする方法については、 ユーザー定義イベントを参照してください。 日時ピッカーには、以下のタイプのイベント・ハンドラーがあります。
- On load: ページのロード時にアクティブ化されます。 例：
var workerStart = ${StartDate}.getDate(); me.setStart(workerStart); - On change: 変更が検出されたときにアクティブ化されます。 例：
return confirm("Are you sure you want to change date?") - On day cell render: 日単位のセル・レンダリングがある場合にアクティブ化されます。 日付が日時ピッカー上に表示される前にトリガーされます。 例：
me.setDate("01/01/2015")
特定のイベントによっては、JavaScript ロジックを使用してビューの効果を変更できます。 ビューを使用したイベントの使用について詳しくは、トピック「 ユーザー定義イベント」を参照してください。
方法
日時ピッカーに使用できるメソッドの詳細情報については、 日時ピッカー JavaScript API を参照してください。
その他のリソース
Coach またはページの作成方法については、 Coach の作成を参照してください。
標準プロパティー (「一般」、 「構成」、 「位置決め」、 「可視性」、および 「HTML 属性」) について詳しくは、 「プロパティーの表示」を参照してください。