[]
        
(Showing Draft Content)

Wijmo_Input.Inputdate

InputDate クラス

{@link InputDateコントロールでは}、ユーザーが {@link Globalizeクラスでサポートされている書式を使用して日付を入力するか}、 {@link Calendarコントロールに含まれるドロップダウンから日付を選択できます}。

ユーザーが入力できる日付の範囲を制限するには、 min プロパティと max プロパティを使用します。

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

現在選択されている日付を取得または設定するには、 value プロパティを使用します。

次の例では、InputDate コントロール コントロールを使用して Date 値(日付と時刻の情報を含む)を表示します。

Example

階層

コンストラクタ

constructor

  • new InputDate(element: any, options?: any): InputDate
  • InputDate クラスの新しいインスタンスを初期化します。

    引数

    • element: any

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

    • オプション options: any

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

    戻り値 InputDate

プロパティ

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入力要素を取得します。

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

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

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

value

value: Date

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

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

静的 controlTemplate

controlTemplate: string

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

メソッド

onIsDroppedDownChanging

onTextChanged

onValueChanged

selectAll

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

    戻り値 void

イベント

isDroppedDownChanged

isDroppedDownChanged: Event

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

isDroppedDownChanging

isDroppedDownChanging: Event

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

textChanged

textChanged: Event

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

valueChanged

valueChanged: Event

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