バージョン

新しい igDatePicker への移行

Ignite UI for jQuery™ の 15.2 リリースから、新しいエディター コントロールのセットが導入されました。これには、作り直された igDatePicker も含まれています。簡便性と優れたユーザー エクスペリエンスを中心とした新しい設計では、いくつかのすぐに使える機能や新しいAPIが追加され、APIも修正または削除されています。このトピックでは、開発者が現在のアプリケーションから新しいエディターに移行する際に役立つ、新旧の機能の違いを説明します。

トピックの概要

このトピックは、古い日付ピッカーから新しい日付ピッカーへの移行のサポートを目的としています。さまざまなシナリオを使用した実行方法を通して新旧を比較します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

  1. 変更されたオプション
  2. 新しいオプション
  3. API メソッドの変更点
  4. 新しい API メソッド
  5. イベントの変更点
  6. 新しいイベント
  7. 要件

変更されたオプション

オプション 旧 新
animationHideDuration animationShowDuration ドロップダウン リストの表示 / 非表示時のアニメーション時間の設定に使用されます。
$(".selector").igDatePicker({
animationShowDuration: 500,
animationHideDuration: 500
});		 これらのオプションは、ドロップダウン リストのアニメーション時間を制御する新しいオプションの dropDownAnimationDuration に置き換えられました。
$(".selector").igDatePicker({
dropDownAnimationDuration: 500
});
button このオプションは、スピン ボタンとドロップダウン ボタンの表示 / 非表示の設定に使用されます。
$(".selector").igDatePicker({
button : "dropdown"
});		 このオプションは、機能を明確に表すために、buttonType という名前に変更されました。
$(".selector").igDatePicker({
buttonType : "dropdown"
});
display 外部の HTML 要素の style.display を取得または設定します。 このオプションは削除されました。
dropDownTriggers ドロップダウン リストまたはカレンダーの表示をトリガーするアクションのリストを設定または取得します。 このオプションは削除されました。新しいエディターでは、Alt + 下矢印 キーでドロップダウンが表示されます。
focusOnSpin このオプションが無効で、エディターがフォーカスされていない場合、スピン ボタンをマウスでリックすると、エディター内のテキストがフォーカスされていない形式で維持され、スピン アクションが実行されました。 このオプションは削除されました。新しいエディターでは、エディターがフォーカスされていない状態でスピン ボタンをマウスでクリックしても、エディターがフォーカスされません。
focusOnDropDownOpen カレンダーが開いたとき、自動的に入力をフォーカスする機能を取得または設定します。 このオプションは、igDatePicker では使用できなくなりました。
height、width 以前にサポートされていた型: number。
$(".selector").igDatePicker({
width : 200
});		 現在サポートされている型: number、string、null。string 型を使用した場合、高さをピクセル (px) と パーセンテージ (%) で設定できます。
$(".selector").igDatePicker({
width : "200px"
});
hideEnterKey ブラウザーで Enter キーを非表示にする機能を設定または取得できます。
$(".selector").igDatePicker({
hideEnterKey : false
});		 このオプションは削除されました。Enter キーを押しても送信されないようにするには、preventSubmitOnEnter オプションを使用できます。
$(".selector").igDatePicker({
preventSubmitOnEnter : true
});
listAutoComplete オートコンプリートを設定または取得します。 このオプションは削除されました。
listColumns ドロップダウン リストの列の数値を設定または取得します。 このオプションは削除されました。
listDropDownAsChild 値 true は、HTML 要素のリストにメインの HTML 要素の子として作成します。値 false は、リストに本文の子として作成します。
$(".selector").igDatePicker({
listDropDownAsChild : true
});		 名前が dropDownAttachedToBody に変更されました。値 true は、リストに本文の子として作成します。値 false は、HTML 要素のリストにメインの HTML 要素の子として作成します。
$(".selector").igDatePicker({
dropDownAttachedToBody : true
});
listMatchContains リスト一致に含まれる項目を設定または取得します。 このオプションは削除されました。
listMatchIgnoreCase 大文字と小文字の区別の検証を設定または取得します。 このオプションは削除されました。
listMaxHeight ドロップダウン リストの最大の高さをピクセル単位で設定する場合に使用されます。
$(".selector").igDatePicker({
listMaxHeight : 400
});		 このオプションは削除されました。表示されるリスト項目の数を設定する場合は、新しいオプションの visibleItemsCount を使用できます。
$(".selector").igDatePicker({
visibleItemsCount : 5
});
nullText エディターにフォーカスがなく、エディターの「value」が null または空の文字列の場合に、エディターに表示されるテキストの設定に使用されます。
$(".selector").igDatePicker({
nullText : "Enter Value"
});		 このオプションは、機能を明確に表すために、placeHolder という名前に変更されました。
$(".selector").igDatePicker({
placeHolder : "Enter Value"
`});
renderInContainer 入力フィールドを SPAN にラップするオプションを設定または取得します。 このオプションは削除されました。
required エディター内の空の値の検証を設定または取得します。
$(".selector").igDatePicker({
required : true
});		 このオプションは削除されました。必要に応じて、バリデーター オプションを使用して、フィールドを設定できます。
$(".selector").igDatePicker({
validatorOptions : {
required: true
}
});
selectionOnFocus 以前サポートされていたメンバー: select、-1、start、0、end、1、default、2。
$(".selector").igDatePicker({
selectionOnFocus: 0
});		 現在サポートされているメンバー: selectAll、atStart、atEnd、browserDefault。デフォルト値は selectAll です。
$(".selector").igDatePicker({
selectionOnFocus: "atStart"
});
spin1Field スピン イベントで日付の 1 フィールドを編集する機能を取得または設定します。
$(".selector").igDatePicker({
spin1Field : true
});		 このオプションは、名前が limitSpinToCurrentField に変更されました。
$(".selector").igDatePicker({
limitSpinToCurrentField : true
});
spinOnReadOnly 「readOnly」オプションのオーバーライドや、エディターまたはスピン イベントの「value」の変更を許可する場合に使用されます。
$(".selector").igDatePicker({
spinOnReadOnly : true
});		 このオプションは削除されました。readOnly を true に設定すると、スピン ボタンが無効になります。
$(".selector").igDatePicker({
readOnly : true
});
textAlign 以前のデフォルトは null でした。 現在のデフォルトは left です。
theme エディターが使用する CSS クラスのセレクターを設定または取得します。 このオプションは削除されました。
type エディターのタイプを設定します。 このオプションは削除されました。対応するコントロールを使用できます。

新しいオプション

オプション 説明
limitSpinToCurrentField スピン イベントの日付フィールドを 1 つのみ編集できる機能を設定または取得します。
allowNullValue このオプションが false で、エディターの値がない場合、「value」は空の文字列に設定されます。
disabled 無効な属性の設定に使用されます。編集はできません。すべてのボタンが無効になり、インタラクションが適用されます。送信時に、現在の値が要求として送信されません。$('#datePicker').igDatePicker({ disabled: true })。
buttonType スピン ボタン、クリア ボタン、およびドロップダウン ボタンの表示を設定または取得します。
dropDownAttachedToBody ドロップダウン リストの位置を取得または設定します。
dropDownAnimationDuration ドロップダウン リストのアニメーション時間の表示 / 非表示をミリ秒で取得または設定します。
placeHolder エディターにフォーカスがなく、エディターの「value」が null または空の文字列の場合に、エディターに表示されるテキストを取得または設定します。
revertIfNotValid ぼかし、または Enter キー使用時の値が無効な場合、エディターの値を前の値に戻すように設定します。false に設定されている場合は、clear が呼び出されます。
preventSubmitOnEnter Enter キーが押されたときに送信しないように、エディターの機能を設定します。$('#datePicker').igDatePicker({ preventSubmitOnEnter: true })。
dropDownOrientation 開くボタンをクリックしたときのドロップダウン リストが開く方向を設定します。
suppressNotifications 要求されたリストの選択、値のラッピング、またはスピンの制限など、エディターに組み込まれた基本の検証シナリオのデフォルト通知を無効にします。

すべてのオプションを参照

API メソッドの変更点

メソッド 旧 新
addListItem インデックスによって示された位置の項目内にオブジェクトを追加します。 このメソッドは削除されました。
addListItems インデックスによって示された位置にある配列の項目内にオブジェクトを追加します。 このメソッドは削除されました。
clearListItems リストからすべての項目を削除します。 このメソッドは削除されました。
dropDownElement ドロップダウンのコンテナーとして使用されている jquery オブジェクトへの参照を取得します。 このメソッドは削除されました。
findListItemIndex 検索パラメーターと一致するテキストで、リスト項目のインデックスを検索します。 このメソッドは削除されました。
getRegionalOption 数値エディターと日付エディターで使用されている地域オプションの計算された値を取得します。 このメソッドは廃止されました。
getSelection 選択肢の左端または右端を取得します。 このメソッドは、getSelectionStart と getSelectionEnd という 2 つのメソッドに置き換えられました。
getValueByMode dataMode によってエディター内の値を取得します。 このメソッドはサポートされていません。
hasInvalidMessage 表示された無効なメッセージの確認に使用されます。 igNotifier には`同様に機能するAPIがあるため、このメソッドは削除されました。
mainElement igDatePicker のトップ / 外部要素として使用されている jquery オブジェクトへの参照を取得します。 このメソッドは、機能を明確に表すために、editorContainter という名前に変更されました。
paste カレットの位置にテキストを貼り付けます。 このメソッドは insert に名前が変更され、txt パラメーターは文字列であるため、string に名前が変更されました。
remove エディターを親要素から削除しますが、残りの機能は維持されます。 このメソッドはサポートされていません。
removeListItem リストから項目を削除します。 このメソッドは削除されました。
removeListItemAt インデックスのリストから項目を削除します。 このメソッドは削除されました。
select エディター内のテキストを選択します。有効なパラメーター: sel0、sel1、val 2 つのパラメーターは間違えられる可能性があるため、sel0 は start、sel1 は end にそれぞれ名前が変更されました。
setFocus 遅延によるエディターのフォーカスを設定します。パラメーターが -1 の場合、遅延なしでフォーカスが設定されます。 正の値のみを遅延の値としてサポートしました。デフォルト値は 0 で、遅延なしでフォーカスを移動します。
spin パラメーターに従って、エディター内の値を増分 (正の差分) または減分 (負の差分) します。 このメソッドは、spinUp と spinDown という新しい 2 つのメソッドに置き換えられました。
text 選択されたテキストをエディターから取得、またはエディターに設定します。 これは getter メソッド displayValue に置き換えられました。パラメーターを取らず、入力に表示されたすべての文字で文字列を返します。
validate エディターの検証をトリガーし、エラー メッセージを表示します。単一のパラメーター noLabel があります。 このパラメーターは、名前が skipErrorMessage に変更されました。
value エディターから値を取得、またはエディターに値を設定します。 このオプションは、機能を明確に表すために、newValue という名前に変更されました。

新しい API メソッド

メソッド 説明
getSelectedDate 選択された日付を取得します。
selectDate 選択された日付を設定します。
getCalendar ピッカー セレクターとして使用される jQuery カレンダーへの参照を返します。
inputName エディターの要素に適用された name 属性を取得または設定します。
displayValue 入力で表示されたすべての文字による文字列を返します。
editorContainer igEditor のトップ / 外部要素として使用されている jquery オブジェクトへの参照を取得します。
showDropDown ドロップダウン リストを表示します。
hideDropDown ドロップダウン リストを非表示にします。
dropDownVisible 項目がリストされたドロップダウンの表示状態を返します。
dropDownButton エディターのドロップダウン ボタンへの参照を返します。
clearButton エディターのクリア ボタンへの参照を返します。
getSelectionStart エディター内の選択されたテキストの開始インデックスを取得します。
getSelectionEnd エディター内の選択されたテキストの終了インデックスを取得します。
insert カレットの位置にテキストを貼り付けます。
spinUp カーソルの位置に従って、日付と時間の期間を増分します。
spinDown カーソルの位置に従って、日付と時間の期間を減分します。
spinUpButton エディターのスピン アップ ボタンへの参照を返します。
spinDownButton エディターのスピン ダウン ボタンへの参照を返します。

すべての API メソッドを参照

イベントの変更点

イベント 変更内容
hideDropDown このイベントのサポートは廃止されました。ドロップダウン リストの非表示を制御するために 2 つの新しいイベントが追加されました。dropDownListClosed が追加され、jQuery UI datepicker onClose 関数が datepickerOptions により使用できます。
showDropDown このイベントのサポートは廃止されました。ドロップダウン リストの表示をより詳細に制御できる、dropDownListOpening と dropDownListOpened の 2 つのイベントが新しく導入されました。
listSelected このイベントは、機能を明確に表すために、itemSelected という名前に変更されました。ui.owner を使用して igEditor への参照を取得します。ui.editorInput は、編集可能な入力への参照を取得します。ui.calendar を使用して igDatePicker のカレンダーとして使用される jQuery UI 日付ピッカーへの参照を取得します。ui.dateFromPicker または ui.item を使用して、選択された項目への参照を取得します。jQuery UI datepicker onSelect 関数が datepickerOptions により使用できます。
listSelecting このイベントのサポートは廃止されました。
mouseleave このイベントは、機能を明確に表すために、mouseout という名前に変更されました。

新しいイベント

イベント 説明
rendering エディターの描画が完了する前に起動されるイベントです。
rendered エディターの描画が完了した後に起動されるイベントです。
dropDownListOpening ドロップダウンを開く操作中に起動されるイベントです。
dropDownListOpened ドロップダウンを開いた後に起動されるイベントです。
dropDownListClosed ドロップダウンを閉じた後に起動されるイベントです。
mouseout ドロップダウン リストを含めたエディターの任意の部分で、マウス ポインタが離れたときに起動されるイベントです。

すべてのイベントを参照

jQuery の要件

Lib 以前に必要とされたバージョン 新しく必要なバージョン
jQuery コア 1.4.4 1.9.1
jQuery UI 1.7 1.9.0

オンラインで表示: GitHub