[]
        
(Showing Draft Content)

Wijmo_Input.Inputdatetime

InputDateTime クラス

InputDateTime コントロールは、InputDate コントロールを拡張して、 Globalize クラスでサポートされている任意の書式で完全な日付/時刻の値を キー入力するか、あるいはドロップダウンカレンダーから日付を、ドロップダウンリストから 時刻を選択することで、日付と時刻を入力できるようにします。

InputDateTime.min プロパティと InputDateTime.max プロパティを使用すると、 ユーザーが入力できる時刻の範囲を制限できます。

InputDateTime.timeMin プロパティと InputDateTime.timeMax プロパティを使用すると、 ユーザーが入力できる時刻の範囲を制限できます。

InputDateTime.value プロパティを使用すると、現在選択されている日時を取得または設定できます。

次の例は、 InputDateTime コントロールにより、単一のコントロールを使用して日付と時刻を編集する方法を示しています。

Example

階層

コンストラクタ

constructor

  • InputDateTime クラスの新しいインスタンスを初期化します。

    引数

    • element: any

      コントロールをホストするDOM要素、またはホスト要素のCSS セレクター(例: '#theCtrl')。

    • オプション options: any

      コントロールの初期化データを含むJavaScriptオブジェクト。

    戻り値 InputDateTime

プロパティ

autoExpandSelection

autoExpandSelection: boolean

コントロールがクリックされたときに、選択範囲を自動的に 単語/数字全体に拡張するかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はtrueです。

calendar

calendar: Calendar

ドロップダウンボックスに表示されるCalendar コントロールへの参照を取得します。

dropDown

dropDown: HTMLElement

isDroppedDown プロパティがtrueに設定されているときに表示されるドロップダウン要素を取得します。

dropDownCssClass

dropDownCssClass: string

コントロールのドロップダウン要素に追加するCSSクラス名を取得または設定します。

このプロパティは、ドロップダウン要素をスタイル設定する場合に便利です。 ドロップダウン要素は、 コントロール自体の子としてではなく、ドキュメントボディの子として表示され、 親コントロールに基づいてCSSセレクタを使用することができないためです。

format

format: string

選択された日付の表示に使用される書式を取得または設定します。

書式文字列は、.NET形式の 日付書式文字列として表されます。 このプロパティのデフォルト値は <bd</bで、カルチャに依存する短い日付形式 (例:米国では6/15/2020、フランスでは15/6/2020、 日本では2020/6/15)を表します。

inputElement

inputElement: HTMLInputElement

コントロールによってホストされているHTML入力要素を取得します。

このプロパティは、入力要素の属性をカスタマイズする場合に使用します。

inputTime

inputTime: InputTime

内部のInputTime コントロールへの参照を取得します。これにより、 コントロールの完全なオブジェクトモデルにアクセスできます。

inputType

inputType: string

コントロールによってホストされているHTML入力要素の"type"属性を取得または設定します。

デフォルトでは、このプロパティは"tel"に設定されており、マイナス記号と小数点記号を含む数値キーパッドが表示されます。

デフォルトのままでは現在のカルチャ、デバイス、またはアプリケーションに関してうまく機能しない場合は、このプロパティを使用してデフォルト設定を変更します。その場合、値を"number"または"text"に変更してみてください。

"number"タイプのような入力要素はChromeで選択を防ぐため、推奨されません。詳細については、http://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome を参照してください。

isAnimated

isAnimated: boolean

ドロップダウンを表示するときにコントロールがフェードインアニメーションを使用するかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はfalse です。

isDroppedDown

isDroppedDown: boolean

ドロップダウンが現在表示されているかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はfalse です。

isReadOnly

isReadOnly: boolean

ユーザーがマウスとキーボードを使用してコントロール値を変更できるかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はfalse です。

isRequired

isRequired: boolean

コントロール値をnull以外の値に設定する必要があるか、 それとも(コントロールのコンテンツを削除することで)nullに設定できるかを 決定する値を取得または設定します。

このプロパティは、{@ link ComboBox}、{@ link InputDate}、{@ link InputTime}、{@ link InputDateTime}、 およびInputColor などのほとんどのコントロールに対してデフォルトでtrueに設定されます。 AutoComplete コントロールに対してデフォルトでfalseに設定されます。

itemFormatter

itemFormatter: Function

ドロップダウンカレンダーの日付をカスタマイズするフォーマッター関数を取得または設定します。

このフォーマッター関数は、任意の日付に任意の内容を追加できます。そのため、カレンダーの外観と動作を全面的にカスタマイズすることが可能です。

この関数は以下の2つのパラメーターをとります。

  • 書式設定する日付
  • 日付を表すHTML要素

以下のサンプルコードは週末を無効な状態で表示します。

calendar.itemFormatter = function(date, element) {
  var day = date.getDay();
  element.style.backgroundColor = day == 0 || day == 6 ? 'yellow' : '';
}

itemValidator

itemValidator: Function

日付が選択可能かどうかを決定するバリデーター関数を取得または設定します。

このバリデーター関数は、調べる日付を表す1つのパラメーターを受け取り、その日付が無効で選択できない場合、falseを返す必要があります。

以下のサンプルコードは、週末の日付を選択できないようにします。

inputDate.itemValidator = function(date) {
  var weekday = date.getDay();
  return weekday != 0 && weekday != 6;
}

mask

mask: string

編集中に使用するマスクを取得または設定します。

マスクの書式は、wijmo.input.InputMask コントロールで使用される書式と同じです。

指定する場合、このマスクは format プロパティの値と互換性がある必要があります。 たとえば、'MM/dd/yyyy'と書式設定された 日付の入力にマスク'99/99/9999'を使用できます。

max

max: Date

ユーザーが入力できる最も遅い日付を取得または設定します。

ユーザーが入力できる最も早い日付を取得または設定します。

このプロパティのデフォルト値は nullです。これは、最も早い日付が定義されていないことを意味します。

min およびmax プロパティの使用方法については、 「minおよびmaxプロパティの使用<」トピックを参照してください。

min

min: Date

ユーザーが入力できる最も早い日付を取得または設定します。

ユーザーが入力できる最も早い日付を取得または設定します。

このプロパティのデフォルト値は nullです。これは、最も早い日付が定義されていないことを意味します。

min およびmax プロパティの使用方法については、 「minおよびmaxプロパティの使用<」トピックを参照してください。

placeholder

placeholder: string

コントロールが空のときにヒントとして表示される文字列を取得または設定します。

repeatButtons

repeatButtons: boolean

カレンダーボタンがリピートボタン(押された状態で繰り返し実行するボタン)として動作するかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

selectionMode

selectionMode: DateSelectionMode

ユーザーが日や月を選択できるか、またはどの値も選択できないかを示す値を取得または設定します。

このプロパティは、ドロップダウンカレンダーの動作に影響しますが、 日付の表示に使用する書式には影響しません。 selectionMode を'Month'に設定した場合は、通常、 format プロパティを'MMM yyyy'などの日を含まない書式に 設定する必要があります。次に例を示します。

import { InputDate } from '@grapecity/wijmo.input';
var inputDate = new InputDate('#el, {
  selectionMode: 'Month',
  format: 'MMM yyyy'
});

このプロパティのデフォルト値は DateSelectionMode.Day です。

showDropDownButton

showDropDownButton: boolean

コントロールにドロップダウンボタンを表示するかどうかを示す値を取得または設定します。

このプロパティのデフォルト値はtrueです。

showYearPicker

showYearPicker: boolean

ユーザーが年カレンダーのヘッダー要素をクリックすると、ドロップダウンカレンダーに 年のリストを表示するかどうかを決定する値を取得または設定します。

このプロパティのデフォルト値はtrueです。

text

text: string

コントロールに表示されるテキストを取得または設定します。

timeFormat

timeFormat: string

ドロップダウンリスト内の時刻の表示に使用される書式を取得または設定します。

このプロパティは、コントロールの入力要素に表示される値には影響しません。 入力要素の値は、format プロパティを使用して書式設定されます。

書式文字列は、.NET形式の時間書式文字列として表されます。

timeMax

timeMax: Date

ユーザーが入力できる最遅時間を取得または設定します。

timeMin

timeMin: Date

ユーザーが入力できる最早時間を取得または設定します。

timeStep

timeStep: number

時刻のドロップダウンリストのエントリ間の分数を取得または設定します。

value

value: Date

現在の日付を取得または設定します。

このプロパティのデフォルト値は現在の日付です。

静的 controlTemplate

controlTemplate: string

InputDateTime コントロールのインスタンス化に使用されるテンプレートを取得または設定します。

メソッド

onIsDroppedDownChanging

onTextChanged

onValueChanged

selectAll

  • selectAll(): void
  • コントロールにフォーカスを設定してそのすべての内容を選択します。

    戻り値 void

イベント

isDroppedDownChanged

isDroppedDownChanged: Event

ドロップダウンが表示または非表示になった後に発生します。

isDroppedDownChanging

isDroppedDownChanging: Event

ドロップダウンが表示または非表示になる前に発生します。

textChanged

textChanged: Event

text プロパティの値が変更されたときに発生します。

valueChanged

valueChanged: Event

ユーザーアクションの結果として、またはコードでの割り当てにより、value プロパティの値が変化すると発生します。