Mashup Builder > ウィジェット > 標準ウィジェット > 日時ピッカーウィジェット (テーマ指定可能)
日時ピッカーウィジェット (テーマ指定可能)
日時ピッカーを使用することで、ユーザーがマッシュアップで日時の値を選択できるようになります。ランタイムで、ユーザーは月、年、日を選択することで日付を指定できます。必要に応じて、時間、分、秒を含めるようにウィジェットを設定できます。このトピックは、以下のセクションで構成されています。
ウィジェットの構造
1. テキストフィールド
2. 開始日
3. 終了日
4. 月ドロップダウン
5. 年ドロップダウン
6. 日ラベル
7. 選択されている日付
範囲選択モード
範囲選択を有効にするには、DateRange コンフィギュレーションを true に設定します。範囲選択モードでは、ユーザーが日付または時刻を一定の範囲に制限できます。YearRange プロパティで数値を入力することで、選択範囲を制限することもできます。
時間選択
デフォルトでは、日時ピッカーを使用して日付を選択できます。時刻選択を有効にするには、ウィジェットのプロパティ DateOnly を false に設定します。このプロパティを無効にすると、ユーザーは日付と時刻の両方を選択できるようになります。秒を追加するには、DisplaySeconds プロパティを true に設定します。
間隔のプロパティ
Interval プロパティを使用して、カレンダーを開いたときの現在の日付または時刻を基準にして、デフォルトで選択される値をオフセットします。IntervalType プロパティを使用して、選択される値を前後にオフセットするときの単位を日、時、分、または秒に設定できます。たとえば、日付ピッカーウィジェットで選択される時間を 30 分進めるには、IntervalType を「分」に設定し、Interval を 30 に設定します。
日時のフォーマット
次のプロパティを使用して、日時のフォーマットを設定できます。
• DateOrder プロパティを使用して、日付の順序を設定できます。デフォルトでは、ランタイムでのユーザーのロケールに基づいて、日付の順序がランタイムで自動的に設定されます。
• FormatToken を使用して、日時のフォーマットをカスタマイズできます。FormatToken プロパティはプロパティ DisplaySeconds、DateOnly、DateDelimiter、MonthFormat、および DateOrder をオーバーライドします。
◦ DisplaySeconds: DisplaySeconds プロパティを使用すると、ユーザーは秒を 2 種類のフォーマットで表示できるようになります。
a. 0:59
b. 00 59
◦ DateOnly: DateOnly プロパティを使用して、日付を 3 種類のフォーマットで表示できます。
a. 日付を 1 から 31 の範囲の数字で表示します。
b. 日付を 1 から 31 の範囲の数字で序数標識を付けて表示します (1 日は 1st、31 日は 31th)。
c. 01 から 31 の日付の数字を表示します。
◦ DateDelimiter: DateDelimiter プロパティを使用して、各種日時単位間のセパレータとして、5 つのタイプの句読点文字のいずれかを使用できます。
a.
◦ MonthFormat: MonthFormat プロパティを使用して、月を 5 種類のフォーマットのいずれかで表示できます。
a. 月の数字を 1 から 12 の範囲で表示します (1 月は 1、12 月は 12)。
b. 月の数字を 1 から 12 の範囲で序数標識を付けて表示します (1 月は 1st、12 月は 12th)。
c. 月の数字を 01 から 12 の範囲で表示します (1 月は 01、12 月は 12)。
d. 月を省略文字列として表示します (1 月は Jan)。
e. 月のフルネームを文字列として表示します (January)。
◦ DateOrder: DateOrder: プロパティを使用して、日付の順序を 3 種類の順序のいずれかで設定できます。
a. 日-月-年。これがデフォルトのフォーマットです。
b. 月-日-年。
c. 年-月-日。
詳細については、ウィジェットの日付と時刻のフォーマットを参照してください。
プロパティ
説明
ベースタイプ
デフォルト値
バインド可能か(Y/N)
ローカライズ可能か
Label
日時ピッカーウィジェットのラベルに表示されるテキスト。
STRING
該当なし
Y
Y
Disabled
このプロパティを使用して、マッシュアップ内のウィジェットを無効にします。ウィジェットはマッシュアップ内に表示されますが、クリックできません。
BOOLEAN
FALSE
Y
N
HintText
このフィールドに何を入力すべきかを示すプレースホルダーテキストが表示されます。
STRING
日付と時刻を選択
Y
Y
DateOnly
日付のみを表示できます。
BOOLEAN
TRUE
N
N
DisplaySeconds
時刻を秒数付きで表示できます。
BOOLEAN
FALSE
N
N
DateDelimter
日、月、年の区切りに使用する文字を設定します。例: - (ハイフン)、05/10/2020 での / (スラッシュ)。
STRING
該当なし
N
Y
MonthFormat
完全なフォーマット、短いフォーマット、または数値のフォーマットで月を表示できます。
STRING
完全
N
N
PrimaryActionPosition
1 つ目の操作ボタンの位置を「左」または「右」に設定できます。
1 つ目の操作は
• 「完了」
ボタン (ボタングループ) です
STRING
左
N
N
DateOrder
日付表示のフォーマットを設定できます。「自動」、「日-月-年」、「月-日-年」、「年-月-日」のフォーマットがあります。
デフォルトの「自動」が選択されている場合、システムの日付がウィジェットに表示されます。さらに、プロパティ DateDelimiter と MonthFormat はウィジェットで無効になります。
STRING
自動
N
N
FormatToken
デフォルトの「自動」が選択されている場合、ユーザーロケールを使用して日付のフォーマットが設定されます。このプロパティはプロパティ DateDelimiter および MonthFormat をオーバーライドします。
* 
このプロパティでは Moment.JS ライブラリ構文が使用されます。
STRING
該当なし
N
Y
IntervalType
間隔タイプを「時間」、「分」、または「日」に設定できます。
* 
秒は ThingWorx 9.2 以降でのみ使用できます
STRING
時間
N
N
Interval
間隔を「時間」、「分」、または「日」に設定できます。
* 
秒の間隔は ThingWorx 9.2 以降でのみ設定できます
NUMBER
0
N
N
MaxRange
開始日と終了日の間でユーザーが選択できる最大日数を設定します。
* 
MaxRange は ThingWorx 9.4 以降でのみ使用できます。
NUMBER
該当なし
N
N
MaxRangeFailureMessage
開始日と終了日の間の選択した範囲が MaxRange 値を超えている場合に表示されるメッセージ。
* 
MaxRangeFailureMessage は ThingWorx 9.4 以降でのみ使用できます。
STRING
該当なし
Y
Y
CustomClass
ウィジェットの最上位の div に CSS を定義できます。スペースで区切って、複数のクラスを入力できます。
STRING
該当なし
Y
N
TabSequence
ユーザーが Tab キーを押したときにウィジェットがハイライトされる順序。
NUMBER
該当なし
N
N
WeeklyCalendarStart
日曜日または月曜日から始まる週間カレンダーを設定できます。
STRING
月曜日
N
N
InitializeWithCurrentDateTime
DateTime プロパティを現在の日時に設定できます。このプロパティが選択されていない場合、日時を入力する必要があります。
BOOLEAN
TRUE
N
N
LabelAlignment
ウィジェット上でラベルを左、右、または中央に整列できます。
STRING
左
N
N
DateTime
日時ピッカーの日時の値のソース。
DATETIME
該当なし
Y
N
Changed
このウィジェットのデータが修正されたときにトリガーされる、バインド可能なイベント。
該当なし
該当なし
Y
N
ResetToDefaultValue
このウィジェットの入力をそのデフォルト値にリセットします。
該当なし
該当なし
Y
N
DateRange
日付の範囲を年、月、日単位で設定できます。
このプロパティを選択すると、次のプロパティが追加されます。
• StartDate
• StartDateLabel
• EndDate
• EndDateLabel
• RangeHintText
• RangedChanged
* 
このイベントは ThingWorx 9.2 以降で使用できます。
BOOLEAN
False
N
N
Width
ウィジェットの幅。
NUMBER
該当なし
N
N
Height
ウィジェットの高さ。デフォルトでは、この高さはラベルの最大幅に設定されます。ウィジェットのラベルが複数行である場合、より高くなります。高さを固定にするには、プロパティパネルで値を入力するか、キャンバスでウィジェットのサイズを変更します。
NUMBER
該当なし
N
N
CurrentDateButton
現在の日付を選択できるボタンを追加します。
BOOLEAN
True
N
N
YearRange
マッシュアップの年の範囲を選択できます。
NUMBER
10
N
N
これは役に立ちましたか?