constructor(element: any, options?: any): InputDateTime
Initializes a new instance of the InputDateTime class.
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
The JavaScript object containing initialization data for the control.
Gets or sets a value that determines whether the calendar should remain visible in the dropdown even when there are selected predefined ranges.
The default value for this property is **false**, which causes the control to hide the calendar if one of the predefined ranges is selected.
コントロールがクリックされたときに、選択範囲を自動的に 単語/数字全体に拡張するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は**true**です。
ユーザーがコントロールの入力要素をクリックしたときに実行する操作を決定する値を取得または設定します。
ほとんどのドロップダウンコントロールに対して、このプロパティはデフォルトで Select に設定されます。これにより、ユーザーはマウスでテキストの一部を選択できます。
編集不可のテキストを表示するドロップダウンコントロール（MultiSelectなど）の場合、このプロパティはデフォルトでToggleに設定されます。
Gets or sets a value that determines whether the control should automatically close the drop-down when the user makes a selection.
このプロパティのデフォルト値は**true**です。
コントロールのドロップダウン要素に追加するCSSクラス名を取得または設定します。
このプロパティは、ドロップダウン要素をスタイル設定する場合に便利です。ドロップダウン要素は、コントロール自体の子としてではなく、ドキュメントボディの子として表示され、親コントロールに基づいてCSSセレクタを使用することができないためです。
Gets or sets the format used to display the selected date.
この書式文字列は、.NETスタイルのDate format string列として表されます。
The default value for this property is **'d'**, the culture-dependent short date pattern (e.g. 6/15/2020 in the US, 15/6/2020 in France, or 2020/6/15 in Japan).
ユーザーがマウスホイールで現在の値を編集できるかどうかを決定するゲージ値を取得または設定します。
このプロパティのデフォルト値は**true**です。
Setting this property to **false** also disables the custom wheel handling for the control's drop-down calendar.
コントロールによってホストされているHTML入力要素を取得します。
このプロパティは、入力要素の属性をカスタマイズする場合に使用します。
たとえば、以下のコードはinputElementプロパティを使用して、コントロールの入力要素にaria-label属性を追加することでアクセシビリティを向上させます。 ```typescript // create an InputDate control and add an aria-label for improved accessibility let inputDate = new InputDate('#theInputDate'); inputDate.inputElement.setAttribute('aria-label', 'enter trip start date in the format month/day/year') ```
Gets a reference to the inner InputTime control so you can access its full object model.
コントロールによってホストされているHTML入力要素の"type"属性を取得または設定します。
デフォルトのままでは現在のカルチャ、デバイス、またはアプリケーションに関してうまく機能しない場合は、 このプロパティを使用してデフォルト設定を変更します。 その場合、値を"number"または"text"に変更してみてください。
"number"タイプのような入力要素はChromeで選択を防ぐため、推奨されません。詳細については、 ttps://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome を参照してください。
ドロップダウンを表示するときにコントロールがフェードインアニメーションを使用するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は **false**です。
コントロールが無効かどうかを判定する値を取得または設定します。
無効化されたコントロールは、マウスイベントやキーボードイベントを取得できません。
ドロップダウンが現在表示されているかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は **false**です。
ユーザーがマウスとキーボードを使用してコントロール値を変更できるかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は **false**です。
コントロール値をnull以外の値に設定する必要があるか、 それとも（コントロールのコンテンツを削除することで）nullに設定できるかを 決定する値を取得または設定します。
このプロパティは、ComboBox、InputDate、InputTime、InputDateTime、 およInputColor などのほとんどのコントロールに対してデフォルトでtrueに設定されます。 AutoCompleteコントロールに対してデフォルトでfalseに設定されます。
ドロップダウンカレンダーの日付をカスタマイズするフォーマッター関数を取得または設定します。
このフォーマッター関数は、任意の日付に任意の内容を追加できます。そのため、カレンダーの外観と動作を全面的にカスタマイズすることが可能です。
指定された場合、関数は次の2つのパラメータをとります。
以下のサンプルコードは週末を黄色の背景で示しています。
```typescript inputDate.itemFormatter = (date, element) => { const day = date.getDay(); element.style.backgroundColor = day == 0 || day == 6 ? 'yellow' : ''; } ```
日付が選択可能かどうかを決定するバリデーター関数を取得または設定します。
If specified, the validator function should take one parameter representing the date to be tested, and should return false if the date is invalid and should not be selectable.
以下のサンプルコードは、週末の日付を選択できないようにします。
```typescript inputDate.itemValidator = date => { const weekday = date.getDay(); return weekday != 0 && weekday != 6; } ```
Gets or sets a mask to use while editing.
マスクの書式は、InputMask コントロールで使用される書式と同じです。
If specified, the mask must be compatible with the value of the format and separator properties.
For example, the mask '99/99/9999 - 99/99/9999' can be used for entering date ranges formatted as 'MM/dd/yyyy' with a ' - ' separator.
ユーザーが入力できる最も遅い日付を取得または設定します。
このプロパティのデフォルト値は **null**です。これは、最も早い日付が定義されていないことを意味します。
min およびmaxプロパティの使用方法については、「minおよびmaxプロパティの使用」トピックを参照してください。
ユーザーが入力できる最も早い日付を取得または設定します。
このプロパティのデフォルト値は **null**です。これは、最も早い日付が定義されていないことを意味します。
min およびmaxプロパティの使用方法については、「minおよびmaxプロパティの使用」トピックを参照してください。
ドロップダウンカレンダーに表示する月数を取得または設定します。
このプロパティのデフォルト値は**1**です。
詳細については、monthCount プロパティを参照してください。
同じカレンダーに複数の月を表示する場合、月は折り返し可能なflex-boxコンテナを使用して表示されます。 CSSを使用して、ドロップダウンの行ごとに表示される月数を制限できます。
たとえば、次のサンプルコードドは、行ごとに3か月を表示するドロップダウンを使用してInputDateコントロールを作成します。 ```typescript import { InputDate } from '@grapecity/wijmo.input'; let idt = new InputDate(document.createElement('#theInputDate'), { monthCount: 6, dropDownCssClass: 'three-months-per-row' }); ``` ``` .three-months-per-row .wj-calendar-multimonth { width: calc(3 * 21em); } ```
事前定義された範囲を定義するオブジェクトを取得または設定します。
このプロパティは、selectionModeプロパティがRangeに設定されている場合にのみ使用されます。
オブジェクト内の各プロパティは、事前定義された範囲を表し、プロパティ名で識別され、2つの日付（範囲の開始と終了）を持つ配列で定義されます。
null値のプロパティは、カレンダーをクリックして定義するカスタム範囲を表します。
以下に例を示します。 ```typescript import { DateTime } from '@grapecity/wijmo'; import { InputDate } from '@grapecity/wijmo.input';
new InputDate(host, { selectionMode: 'Range', predefinedRanges: getRanges() });
function getRanges() { let dt = DateTime, now = new Date(); return { 'This Week': [dt.weekFirst(now), dt.weekLast(now)], 'Last Week': [dt.weekFirst(dt.addDays(now, -7)), dt.weekLast(dt.addDays(now, -7))], 'Next Week': [dt.weekFirst(dt.addDays(now, +7)), dt.weekLast(dt.addDays(now, +7))],
'This Month': [dt.monthFirst(now), dt.monthLast(now)], 'Last Month': [dt.monthFirst(dt.addMonths(now, -1)), dt.monthLast(dt.addMonths(now, -1))], 'Next Month': [dt.monthFirst(dt.addMonths(now, +1)), dt.monthLast(dt.addMonths(now, +1))], 'Custom Range': null }; } ```
範囲選択で最後に選択された日付を取得または設定します。
日付範囲の選択を有効にするには、selectionModeプロパティを**DateSelectionMode.Range**に設定します。
これにより、選択範囲はvalueプロパティとrangeEndプロパティによって定義されます。
日付範囲の編集時に許可される最大長を取得または設定します。
このプロパティは、selectionModeプロパティがRangeに設定されている場合にのみ使用されます。
このプロパティのデフォルト値は**0**です。これは、範囲の長さの最大値がないことを意味します。
日付範囲の編集時に許可される最小日数を取得または設定します。
このプロパティは、selectionModeプロパティがRangeに設定されている場合にのみ使用されます。
このプロパティのデフォルト値は**0**です。これは、範囲の長さの最小値がないことを意味します。
カレンダーボタンがリピートボタン(押された状態で繰り返し実行するボタン)として動作するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は**true**です。
ユーザーが日や月を選択できるか、またはどの値も選択できないかを示す値を取得または設定します。
このプロパティは、ドロップダウンカレンダーの動作に影響しますが、 日付の表示に使用する書式には影響しません。 selectionMode を'Month'に設定した場合は、通常、 format プロパティを'MMM yyyy'などの日を含まない書式に 設定する必要があります。次に例を示します。
```typescript import { InputDate } from '@grapecity/wijmo.input'; var inputDate = new InputDate('#el, { selectionMode: 'Month', format: 'MMM yyyy' }); ```
このプロパティのデフォルト値は **DateSelectionMode.Day**.
コントロールによって表示されるvalue値とrangeEnd 値の間の区切り文字として使用される文字列を取得または設定します。
このプロパティは、selectionModeプロパティがRangeに設定されている場合にのみ使用されます。
このプロパティのデフォルト値は**' - '**です。
コントロールにドロップダウンボタンを表示するかどうかを示す値を取得または設定します。
このプロパティのデフォルト値は**true**です。
Gets or sets a value that determines whether the calendar should display an area with the current month and navigation buttons.
このプロパティのデフォルト値は**true**です。
Gets or sets a value that determines whether the calendar should display a list of months when the user clicks the header element on the month calendar.
このプロパティのデフォルト値は **ShowMonthPicker.First**.
ユーザーが年カレンダーのヘッダー要素をクリックすると、カレンダーに 年のリストを表示するかどうかを決定する値を取得または設定します。
このプロパティのデフォルト値は**true**です。
Gets or sets a value of the **tabindex** attribute associated with the control.
**tabindex** attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.
Because of this, to read or change control's **tabindex** dynamically, you should do it using this property.
ドロップダウンリスト内の時刻の表示に使用される書式を取得または設定します。
This property does not affect the value shown in the control's input element. That value is formatted using the format property.
The format string is expressed as a .NET-style time format string.
The default value for this property is **'t'** (short time pattern).
ユーザーが入力できる最遅時間を取得または設定します。
The default value for this property is **null**, which means there is no latest time limit.
ユーザーが入力できる最早時間を取得または設定します。
The default value for this property is **null**, which means there is no earliest time limit.
Gets or sets the number of minutes between entries in the drop-down list of times.
The default value for this property is **15** minutes.
Setting this property to **null**, zero, or any negative value disables the time-picker and hides the time drop-down button.
Only the integer part of the step value is used. Setting **timeStep** to **30.5** for example will create **30** minute intervals.
addEventListener(target: EventTarget, type: string, fn: any, capture?: boolean, passive?: boolean): void
このControl が所有する要素にイベントリスナーを追加します。
コントロールは、アタッチされているリスナーとそのハンドラのリストを保持し、コントロールが破棄されているときにそれらを簡単に削除すること ができます（dispose と removeEventListener メソッドを参照してください）。
イベントリスナーを削除しないと、メモリリークが発生する可能があります。
デフォルトでは passive パラメータはfalseに設定されています。これはイベントハンドラが event.preventDefault() を呼び出すことを意味します。タッチイベントまたはマウスホイールイベントにpassiveハンドラを追加する場合は、このパラメータをtrueに設定するとアプリケーションのパフォーマンスが向上します。
passive イベントリスナーの詳細については、「<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Improving_scrolling_performance_with_passive_listeners">Improving scrolling performance with passive listeners</a>」を参考してください。
Target element for the event.
String that specifies the event.
Function to execute when the event occurs.
Whether the listener should be handled by the control before it is handled by the target element.
Indicates that the handler will never call preventDefault().
applyTemplate(classNames: string, template: string, parts: Object, namePart?: string): HTMLElement
コントロールの新しいインスタンスにテンプレートを適用し、ルート要素を返します。
このメソッドはテンプレート化されたコントロールのコンストラクターによって呼び出される必要があります。テンプレートのパーツを対応するコントロールメンバにバインドする役割を持ちます。
以下のサンプルコードは、InputNumber コントロールのインスタンスにテンプレートを適用します。 このテンプレートには、'wj-part'属性が'input'、'btn-inc'、および'btn-dec'に設定された要素を含める必要があります。 コントロールのメンバである'_tbx'、'_btnUp'、'_btnDn'には、これらの要素への参照が割り当てられます。
```typescript this.applyTemplate('wj-control wj-inputnumber', templateString, { _tbx: 'input', _btnUp: 'btn-inc', _btnDn: 'btn-dec' }, 'input'); ``````
Names of classes to add to the control's host element.
An HTML string that defines the control template.
A dictionary of part variables and their names.
Name of the part to be named after the host element. This determines how the control submits data when used in forms.
deferUpdate(fn: Function): void
beginUpdate/endUpdateブロック内で関数を実行します。
この関数の実行が完了するまでコントロールは更新されません。 このメソッドは、関数が例外を生成した場合でもendUpdate が呼び出されるようにします。
Function to be executed.
dispose(): void
ホスト要素との関連付けを解除することによってコントロールを破棄します。
dispose メソッドは、addEventListener メソッドによって追加されたイベントリスナーを自動的に削除します。
コントロールを動的に作成および削除するアプリケーションでは、dispose メソッドを呼び出すことが重要です。コントロールを破棄しないと、メモリリークが発生する可能があります。
disposeAll(e?: HTMLElement): void
HTML要素に含まれるすべてのWijmoコントロールを破棄します。
Container element.
getControl(element: any): Control
指定したDOM要素でホストされているコントロールを取得します。
The DOM element that hosts the control, or a CSS selector for the host element (e.g. '#theCtrl').
getTemplate(): string
initialize(options: any): void
指定したオブジェクトからプロパティをコピーしてコントロールを初期化します。
このメソッドを使用すると、各プロパティの値をコードで設定する代わりにプレーンなデータオブジェクトを使用してコントロールを初期化できます。
例:
```typescript grid.initialize({ itemsSource: myList, autoGenerateColumns: false, columns: [ { binding: 'id', header: 'Code', width: 130 }, { binding: 'name', header: 'Name', width: 60 } ] });
// 以下と同等です。 grid.itemsSource = myList; grid.autoGenerateColumns = false; // など ```
初期化データは適用時に型チェックされます。初期化オブジェクトに不明なプロパティ名または無効なデータ型が含まれている場合、このメソッドは例外をスローします。
Object that contains the initialization data.
invalidate(fullUpdate?: boolean): void
非同期更新を発生させるため、コントロールを無効にします。
Whether to update the control layout as well as the content.
invalidateAll(e?: HTMLElement): void
指定したHTML要素に含まれるすべてのWijmoコントロールを無効化します。
このメソッドは、コントロールの表示状態やサイズを変更する動的なパネルをアプリケーションで使用している場合に使用します。たとえば、スプリッタ、アコーディオン、およびタブコントロールは通常、その中の要素の表示状態を変更します。この場合、その要素に含まれるコントロールに通知しないと、それらのコントロールが適切に機能しなくなる可能性があります。
これが起こる場合は、動的コンテナーで適切なイベントを処理し、invalidateAllメソッドを呼び出してコンテナー内のWijmoコントロールのレイアウト情報が適切に更新されるようにする必要があります。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
onGotFocus(e?: EventArgs): void
gotFocus イベントを発生させます。
onInvalidInput(e: CancelEventArgs): void
invalidInput イベントを発生させます。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効な入力とフォーカスを保持します。
onIsDroppedDownChanged(e?: EventArgs): void
isDroppedDownChangedイベントを発生させます。
onIsDroppedDownChanging(e: CancelEventArgs): boolean
isDroppedDownChangingイベントを発生させます。
onLostFocus(e?: EventArgs): void
lostFocus イベントを発生させます。
onRangeChanged(e?: EventArgs): void
rangeChanged イベントを発生させます。
onRangeEndChanged(e?: EventArgs): void
rangeEndChangedイベントを発生させます。
onRefreshed(e?: EventArgs): void
refreshedイベントを発生させます。
onRefreshing(e?: EventArgs): void
refreshingイベントを発生させます。
onTextChanged(e?: EventArgs): void
textChangedイベントを発生させます。
onValueChanged(e?: EventArgs): void
valueChangedイベントを発生させます。
refresh(fullUpdate?: boolean): void
コントロールを更新します。
Whether to update the control layout as well as the content.
refreshAll(e?: HTMLElement): void
HTML要素で存在するすべてのWijmoコントロールを更新する。
コントロールが時間おいて更新される代わりに直ちに更新されること以外はinvalidateAll メソッドと同様です。
Container element. If set to null, all Wijmo controls on the page will be invalidated.
removeEventListener(target?: EventTarget, type?: string, fn?: any, capture?: boolean): number
このControl が所有する要素にアタッチされている1つまたは複数のイベントリスナーを解除します。
Target element for the event. If null, removes listeners attached to all targets.
String that specifies the event. If null, removes listeners attached to all events.
Handler to remove. If null, removes all handlers.
Whether the listener is capturing. If null, removes capturing and non-capturing listeners.
無効な入力値が検出された場合に発生します。
ユーザーが適切な型に変換できない値、または有効な範囲外の値を入力または貼り付けると、無効な入力が発生する可能性があります。
イベントハンドラがイベントをキャンセルした場合、コントロールは無効なコンテンツとフォーカスを保持するため、ユーザーはエラーを修正できます。
イベントがキャンセルされない場合、コントロールは無効な入力を無視し、元のコンテンツを保持します。
rangeEnd プロパティの値がnull以外の値に変更されたときに発生します。 本動作は、データ範囲が選択されたことを示します。
The InputDateTime control extends the InputDate control to allows users to input dates and times, either by typing complete date/time values in any format supported by the Globalize class, or by picking dates from a drop-down calendar and times from a drop-down list.
Use the min and max properties to restrict the range of dates that the user can enter.
Use the timeMin and timeMax properties to restrict the range of times that the user can enter.
Use the value property to gets or set the currently selected date/time.
The example below shows how you can use an InputDateTime control to edit dates and times using a single control:
{@sample Input/InputDateTime/Overview Example}