ui.igDateEditor
igDateEditor コントロールには多数の構成オプションが含まれており、入力フォームからの日付データを書式設定および制約することができます。この API のクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。
以下のコード スニペットは、igDateEditor コントロールを初期化する方法を示します。
この API を使用して作業を開始するための情報はここをクリックしてください。igDateEditor コントロールに必要なスクリプトとテーマを参照する方法については、Ignite UI の JavaScript リソースの使用および Ignite UI のスタイリングとテーマをご覧ください。コード サンプル
<!doctype html>
<html>
<head>
<title>Ignite UI igDateEditor</title>
<!-- Infragistics Combined CSS -->
<link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
<!-- jQuery Core -->
<script src="js/jquery.js" type="text/javascript"></script>
<!-- jQuery UI -->
<script src="js/jquery-ui.js" type="text/javascript"></script>
<!-- Infragistics Combined Scripts -->
<script src="js/infragistics.core.js" type="text/javascript"></script>
<script src="js/infragistics.lob.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#dateEditor").igDateEditor({
width: 280,
dateInputFormat: "dateTime",
regional: "en-US"
});
});
</script>
</head>
<body>
<input id="dateEditor" value="8/26/2015 12:00" />
</body>
</html>
関連サンプル
関連トピック
依存関係
-
allowNullValue
継承- タイプ:
- bool
- デフォルト:
- false
null 値を回避する機能を取得または設定します。
このオプションが false で、エディターに値がない場合、値は空の文字列になります。コード サンプル
//Initialize $(".selector").igDateEditor({ allowNullValue : false }); //Get var allowNullValue = $(".selector").igDateEditor("option", "allowNullValue"); //Set $(".selector").igDateEditor("option", "allowNullValue", false); -
buttonType
- タイプ:
- enumeration
- デフォルト:
- none
スピンおよびクリア ボタンの可視性を取得します。このオプションは、初期化時にのみ設定できます。「spin,clear」などの組み合わせもサポートされています。
メンバー
- clear
- タイプ:string
- 値をクリアするボタンはエディターの右側に配置されます。
- spin
- タイプ:string
- スピン ボタンはエディターの右側に配置されます。
コード サンプル
//Initialize $(".selector").igDateEditor({ buttonType : "clear" }); //Get var buttonType = $(".selector").igDateEditor("option", "buttonType"); -
centuryThreshold
- タイプ:
- number
- デフォルト:
- 29
20 世紀および 21 世紀の自動検出の年を取得または設定します。
このオプションは、ユーザーが 1 桁または 2 桁を年フィールドに入力した場合、または日付パターンが 1 年または ２年位置のみ ("yy" または "y" など) を含む場合に自動的に塗りつぶすために使用されます。
ユーザーがこのオプションの値よりも大きな値を入力した場合、20 世紀を使用します。それ以外の場合は、21 世紀を使用します。コード サンプル
//Initialize $(".selector").igDateEditor({ centuryThreshold: 35 }); //Get var centuryThreshold = $(".selector").igDateEditor("option", "centuryThreshold"); //Set $(".selector").igDateEditor("option", "centuryThreshold", 35); -
dataMode
- タイプ:
- enumeration
- デフォルト:
- date
value() メソッドおよびオプションの取得で返される値の型を取得します。フォームの送信のために値が保存される方法に影響します。 enableUTCDates オプションを使用すると、その代わりに UTC ISO 文字列を出力します。
たとえば、GMT から 5 時間遅れのローカル オフセットを持つクライアントからの「午前10:00」値は以下のようにシリアル化します。
"2016-11-11T10:00:00+05:00"。メンバー
- date
- タイプ:string
- value メソッドは Date オブジェクトを返します。このモードが設定される場合、サーバーに送信される値がデフォルトでローカル時間およびゾーン値を持つ ISO 8061 文字列としてシリアル化されます。
- displayModeText
- タイプ:string
- 表示モード (フォーカスなし) 形式 (パターン) の「テキスト」はサーバーに送信され、value() メソッドから文字列オブジェクトとして返されます。
- editModeText
- タイプ:string
- 編集モード (フォーカス) 形式 (パターン) の「テキスト」はサーバーに送信され、value() メソッドから文字列オブジェクトとして返されます。
コード サンプル
//Initialize $(".selector").igDateEditor({ dataMode: "editModeText" }); //Get var dataMode = $(".selector").igDateEditor("option", "dataMode"); -
dateDisplayFormat
- タイプ:
- string
- デフォルト:
- null
エディターがフォーカスを持っていないときの日付書式を取得または設定します。
このオプションの値は、指定した日パターンまたは地域設定で定義されたフラグに設定できます。
値が設定されていない場合は、dateInputFormat が自動的に使用されます。
値が明示的な日パターンに設定されていて、日フラグ以外のパターンに、日フラグまたはマスクフラグに一致する明示的な文字が含まれている場合は、それらの文字の前に "エスケープ" 文字を使用する必要があります。
定義済みの地域フラグのリスト。
"date": 地域オプションの datePattern メンバーを使用します。
"dateLong": 地域オプションの dateLongPattern メンバーを使用します。
"time": 地域オプションの timePattern メンバーを使用します。
"timeLong": 地域オプションの timeLongPattern メンバーを使用します。
"dateTime": 地域オプションの dateTimePattern メンバーを使用します。
明示的な文字のリスト。これらの前にエスケープ \\ 文字が必要です。
C、&、a、A、?、L、9、0、#、>、<、y、M、d、h、H、m、s、t、f。
明示的な日パターンを使用するときの日フラグのリスト。
"y": 世紀部分も先行するゼロもない年フィールド。
"yy": 世紀部分がなく先行するゼロがある年フィールド。
"yyyy": 先行するゼロがある年フィールド。
"M": 先行するゼロがない数字で表す月フィールド。
"MM": 先行するゼロがある数字で表す月フィールド。
"MMM": 短い月名前で表す月フィールド。
"MMMM": 長い月名前で表す月フィールド。
"d": 先行するゼロがない月の中の日。
"dd": 先行するゼロがある月の中の日。
"ddd": 短い名前の曜日。
"dddd": 長い名前の曜日。
"t": AM/PM フィールドを表す文字列の最初の文字。
"tt": AM/PM フィールドを表す 2 文字の文字列。
"h": 先行するゼロがない 12 時間形式の時フィールド。
"hh": 先行するゼロがある 12 時間形式の時フィールド。
"H": 先行するゼロがない 24 時間形式の時フィールド。
"HH": 先行するゼロがある 24 時間形式の時フィールド。
"m": 先行するゼロがない分フィールド。
"mm": 先行するゼロがある分フィールド。
"s": 先行するゼロがない秒フィールド。
"ss": 先行するゼロがある秒フィールド。
"f": 100 分の 1 単位のミリ秒フィールド。
"ff": 10 分の 1 単位のミリ秒フィールド。
"fff": ミリ秒フィールド。コード サンプル
//Initialize $(".selector").igDateEditor({ dateDisplayFormat: "dateLong" }); //Get var dateDisplayFormat = $(".selector").igDateEditor("option", "dateDisplayFormat"); //Set $(".selector").igDateEditor("option", "dateDisplayFormat", "dateLong"); -
dateInputFormat
- タイプ:
- string
- デフォルト:
- null
エディターがフォーカスを持っているときの日付書式を取得します。
このオプションの値は、明示的な日パターンまたは地域設定で定義されたフラグに設定できます。
値が明示的な日パターンに設定されていて、日フラグ以外のパターンに、日フラグまたはマスクフラグに一致する明示的な文字が含まれている場合は、それらの文字の前に "エスケープ" 文字を使用する必要があります。
値が設定されていない場合は、"date" が自動的に使用されます。
定義済みの地域フラグのリスト。
"date": 地域オプションの datePattern メンバーを使用します。
"dateLong": 地域オプションの dateLongPattern メンバーを使用します。
"time": 地域オプションの timePattern メンバーを使用します。
"timeLong": 地域オプションの timeLongPattern メンバーを使用します。
"dateTime": 地域オプションの dateTimePattern メンバーを使用します。
明示的な文字のリスト。これらの前にエスケープ \\ 文字が必要です: C、&、a、A、?、L、9、0、#、>、<、y、M、d、h、H、m、s、t、f。
明示的な日パターンを使用するときの日フラグのリスト。
"yy": 世紀部分がなく先行するゼロがある年フィールド。
"yyyy": 先行するゼロがある年フィールド。
"MM": 先行するゼロがある数字で表す月フィールド。
"dd": 先行するゼロがある月の中の日。
"t": AM/PM フィールドを表す文字列の最初の文字。
"tt": AM/PM フィールドを表す 2 文字の文字列。
"hh": 先行するゼロがある 12 時間形式の時フィールド。
"HH": 先行するゼロがある 24 時間形式の時フィールド。
"mm": 先行するゼロがある分フィールド。
"ss": 先行するゼロがある秒フィールド。
"f": 100 分の 1 単位のミリ秒フィールド。
"ff": 10 分の 1 単位のミリ秒フィールド。
"fff": ミリ秒フィールド。コード サンプル
//Initialize $(".selector").igDateEditor({ dateInputFormat : "dateLong" }); //Get var dateInputFormat = $(".selector").igDateEditor("option", "dateInputFormat"); -
disabled
継承- タイプ:
- bool
- デフォルト:
- false
入力の disabled 属性を取得または設定します。True に設定される場合、入力が無効で、すべてのボタンおよび操作が無効です。エディターのフォームの送信で値が送信されません。
コード サンプル
//Initialize $(".selector").igDateEditor({ disabled : false }); //Get var disabled = $(".selector").igDateEditor("option", "disabled"); //Set $(".selector").igDateEditor("option", "disabled", true); -
displayTimeOffset
- タイプ:
- object
- デフォルト:
- null
UTC からのタイム ゾーン オフセットを分単位で取得または設定します。クライアント側の日付値は、ローカル オフセットの代わりにこのオフセットで表示されます。
注: 結果を統一するため、このオプションを UTC 値 (例: "2016-11-03T14:08:08.504Z") と使用することを推薦します。
あいまいタイム ゾーンの値がユーザー エージェントのローカル ゾーンに基づいて別の時間にマップする可能性があります。コード サンプル
//Initialize $(".selector").igDateEditor({ displayTimeOffset: 180 }); //Get var displayTimeOffset = $(".selector").igDateEditor("option", "displayTimeOffset"); -
enableUTCDates
- タイプ:
- bool
- デフォルト:
- false
ローカル時間およびゾーン値の代わりにクライアント側の日付を UTC ISO 8061 文字列としてのシリアル化を有効/無効にします。
このオプションは "date" dataMode のみで適用されます。コード サンプル
//Initialize $(".selector").igDateEditor({ enableUTCDates : true }); //Get var enableUTCDates = $(".selector").igDateEditor("option", "enableUTCDates"); //Set $(".selector").igDateEditor("option", "enableUTCDates", true); -
excludeKeys
継承- タイプ:
- string
- デフォルト:
- null
キーボードの入力および貼り付けにより特定の文字の入力を回避する機能を取得または設定します。
注:
文字が includeKeys オプションに指定した場合、excludeKeys は優先があります。
文字は大文字で設定する必要があります。
大文字と小文字を区別することはサポートされていません。
オプションがランタイムに設定される場合、現在の値に適用されません。コード サンプル
//Initialize $(".selector").igDateEditor({ excludeKeys: "ABC" }); //Get var excludedKeys= $(".selector").igDateEditor("option", "excludeKeys"); -
height
継承- タイプ:
- enumeration
- デフォルト:
- null
コントロールの高さを取得または設定します。
メンバー
- null
- タイプ:object
- 他の高さが定義されていない場合、エディターは親コンテナーに収まります。
- string
- 高さをピクセル (px) またはパーセンテージ (%) に設定できます。
- number
- 高さをピクセル単位の数値で設定できます。
コード サンプル
//Initialize $(".selector").igDateEditor({ height : 25 }); //Get var height = $(".selector").igDateEditor("option", "height"); //Set $(".selector").igDateEditor("option", "height", 25); -
includeKeys
継承- タイプ:
- string
- デフォルト:
- null
キーボードの入力および貼り付けにより入力フィールドで特定の文字のみを許可する機能を取得または設定します。
注:
"excludeKeys" オプションがこのオプションと同じ文字を含んでいる場合、"excludeKeys" が優先されます。
文字は大文字で設定する必要があります。
オプションがランタイムに設定される場合、現在の値に適用されません。コード サンプル
//Initialize $(".selector").igDateEditor({ includeKeys: "ABC" }); //Get var includedKeys= $(".selector").igDateEditor("option", "includeKeys"); -
inputName
継承- タイプ:
- string
- デフォルト:
- null
値入力の名前属性を取得または設定します。入力はサーバーへ値を送信するために使用されます。ターゲット要素が入力で名前要素があり、開発者が inputName オプションに設定した場合、このオプションは値入力を上書きし要素の属性を削除します。
コード サンプル
//Initialize $(".selector").igDateEditor({ inputName : "textField" }); //Get var inputName = $(".selector").igDateEditor("option", "inputName"); //Set $(".selector").igDateEditor("option", "inputName", "textField"); -
language
継承- タイプ:
- string
- デフォルト:
- "en"
ウィジェットのロケール言語設定を取得または設定します。
コード サンプル
//Initialize $(".selector").igDateEditor({ language: "ja" }); // Get var language = $(".selector").igDateEditor("option", "language"); // Set $(".selector").igDateEditor("option", "language", "ja"); -
limitSpinToCurrentField
- タイプ:
- bool
- デフォルト:
- false
スピン イベントで日付の 1 フィールドを編集する機能を取得または設定します。
値が False の場合、増加または減少させた日付フィールドが限界に達するとほかの日付フィールドが変化します。
値が True の場合、1 つのフィールドの値のみを変更できます。コード サンプル
//Initialize $(".selector").igDateEditor({ limitSpinToCurrentField : true }); //Get var limitSpinToCurrentField = $(".selector").igDateEditor("option", "limitSpinToCurrentField"); //Set $(".selector").igDateEditor("option", "limitSpinToCurrentField", true); -
locale
継承- タイプ:
- object
- デフォルト:
- null
ウィジェットのロケール設定を取得または設定します。
コード サンプル
//Initialize $(".selector").igDateEditor({ locale: {} }); // Get var locale = $(".selector").igDateEditor("option", "locale"); // Set $(".selector").igDateEditor("option", "locale", {}); -
maxValue
- タイプ:
- date
- デフォルト:
- null
ユーザーがエディターに入力できる最大値を取得または設定します。Date オブジェクトは値として設定できます。文字列値を渡すと、エディターは日付オブジェクトを作成するために javascript Date オブジェクトのコンストラクターを使用し、結果のオブジェクトを比較で使用します。MVC 日付書式も使用できます。
注: このプロパティは、日付を抽出するために dateInputFormat 設定を使用しません。コード サンプル
//Initialize $(".selector").igDateEditor({ maxValue: new Date(2020, 11, 21) }); //Get var maxValue = $(".selector").igDateEditor("option", "maxValue"); //Set $(".selector").igDateEditor("option", "maxValue", new Date(2020, 11, 21)); -
minValue
- タイプ:
- date
- デフォルト:
- null
ユーザーがエディターに入力できる最小値を取得または設定します。Date オブジェクトは値として設定できます。文字列値を渡すと、エディターは日付オブジェクトを作成するために javascript Date オブジェクトのコンストラクターを使用し、結果のオブジェクトを比較で使用します。MVC 日付書式も使用できます。
注: このプロパティは、日付を抽出するために dateInputFormat 設定を使用しません。コード サンプル
//Initialize $(".selector").igDateEditor({ minValue: new Date(1980, 6, 1) }); //Get var minValue = $(".selector").igDateEditor("option", "minValue"); //Set $(".selector").igDateEditor("option", "minValue", new Date(1980, 6, 1)); -
nullValue
- タイプ:
- enumeration
- デフォルト:
- null
エディター値が null 値になることが可能かどうかを取得または設定します。デフォルトの場合、入力の値は null に設定され、入力が空文字列を保持します。
コード サンプル
//Initialize $(".selector").igDateEditor({ nullValue : new Date(2015, 09, 08) }); //Get var nullText = $(".selector").igDateEditor("option", "nullValue"); //Set $(".selector").igDateEditor("option", "nullValue", new Date(2015, 09, 08)); -
placeHolder
継承- タイプ:
- string
- デフォルト:
- null
エディターがフォーカスを持たず、エディター内の "value" が null または空の文字列ときのエディターに表示されるテキストを取得または設定します。
コード サンプル
//Initialize $(".selector").igDateEditor({ placeHolder : "Enter Value" }); //Get var placeHolder = $(".selector").igDateEditor("option", "placeHolder"); //Set $(".selector").igDateEditor("option", "placeHolder", "Enter Value"); -
preventSubmitOnEnter
継承- タイプ:
- bool
- デフォルト:
- false
Enter キーの押下でフォーム送信を回避する機能を取得または設定します。
コード サンプル
//Initialize $(".selector").igDateEditor({ preventSubmitOnEnter: true }); //Get var preventSubmitOnEnter = $(".selector").igDateEditor("option", "preventSubmitOnEnter"); //Set $(".selector").igDateEditor("option", "preventSubmitOnEnter", true); -
readOnly
継承- タイプ:
- bool
- デフォルト:
- false
入力の readonly 属性を取得または設定します。True に設定される場合、入力が読み取り専用で、すべてのボタンおよび操作が無効です。エディターのフォームの送信で値が送信されます。
コード サンプル
//Initialize $(".selector").igDateEditor({ readOnly : true }); //Get var readOnly = $(".selector").igDateEditor("option", "readOnly"); //Set $(".selector").igDateEditor("option", "readOnly", true); -
regional
継承- タイプ:
- enumeration
- デフォルト:
- en-US
ウィジェットの領域設定を取得または設定します。
コード サンプル
//Initialize $(".selector").igDateEditor({ regional: "ja" }); // Get var regional = $(".selector").igDateEditor("option", "regional"); // Set $(".selector").igDateEditor("option", "regional", "ja"); -
revertIfNotValid
継承- タイプ:
- bool
- デフォルト:
- true
ぼかしまたは Enter キーの押しで値が無効な場合、エディターが値を以前の有効な値を元に戻す機能を取得または設定します。オプションが false に設定される場合、エディターはクリア機能を呼び出します。
コード サンプル
//Initialize $(".selector").igDateEditor({ revertIfNotValid : false }); //Get var revertIfNotValid = $(".selector").igDateEditor("option", "revertIfNotValid"); //Set $(".selector").igDateEditor("option", "revertIfNotValid", false); -
selectionOnFocus
継承- タイプ:
- enumeration
- デフォルト:
- selectAll
エディターがフォーカスを取得したときの動作を取得または設定します。デフォルト値は selectAll です。
メンバー
- selectAll
- タイプ:string
- このオプションを設定すると、編集モードに入ったときにエディターのすべてのテキストを選択します。
- atStart
- タイプ:string
- このオプションを設定すると、編集モードに入ったときにエディターのテキストの初めにカーソルを移動します。
- atEnd
- タイプ:string
- このオプションを設定すると、編集モードに入ったときにエディターのテキストの最後にカーソルを移動します。
- browserDefault
- タイプ:string
- このオプションの設定に追加のロジックはありませんが、ブラウザーのデフォルトの動作で処理されます。
コード サンプル
//Initialize $(".selector").igDateEditor({ selectionOnFocus: "atStart" }); //Get var selectionOnFocus= $(".selector").igDateEditor("option", "selectionOnFocus"); //Set $(".selector").igDateEditor("option", "selectionOnFocus", "selectAll"); -
spinDelta
- タイプ:
- enumeration
- デフォルト:
- 1
スピン アクションでエディター日付を増減するために使用されるデルタ値を取得または設定します。
編集モードでないが、フォーカスを持つ場合、入力マスクで利用可能な場合に日にデルタが適用されます。利用可能でない場合、一番短い期間に適用されます。
編集モードで、カーソルが配置される時間期間が定義されたデルタ値によって増加または減少されます。
デルタに有効な値は正の整数で、浮動小数点数の分数が無視されます。
spinDelta: {
year: 4,
month: 3,
day: 10,
hours: 12,
minutes: 15,
seconds: 10,
milliseconds: 100
}
値がない時間間隔はデフォルトで 1 を使用します。メンバー
- number
- タイプ:number
- この値はすべての時間間隔 (年、日、分など) に適用されます。
- object
- タイプ:object
- 各時間間隔のために特定の値を定義する構成オブジェクト。このオプションは以下の形式が有効です。
コード サンプル
//Initialize with number $(".selector").igDateEditor({ spinDelta: 10 }); //Initialize with object $(".selector").igDateEditor({ spinDelta: { year: 4, month: 3, day: 10, hours: 12, minutes: 15, seconds: 10, milliseconds: 100 } }); //Get var spinDelta= $(".selector").igDateEditor("option", "spinDelta"); //Set with number $(".selector").igDateEditor("option", "spinDelta", 10); //Set with object $(".selector").igDateEditor("option", "spinDelta", { minutes: 15 }); -
suppressNotifications
継承- タイプ:
- bool
- デフォルト:
- false
エディターのビルトイン基本検証シナリオで、必須リスト選択、値ラッピング、スピン制限などのデフォルトの通知を有効/無効にします。
コード サンプル
//Initialize $(".selector").igDateEditor({ suppressNotifications : true }); //Get var suppressNotifications = $(".selector").igDateEditor("option", "suppressNotifications"); //Set $(".selector").igDateEditor("option", "suppressNotifications", true); -
tabIndex
継承- タイプ:
- number
- デフォルト:
- null
エディター入力の tabIndex 属性を取得または設定します。
コード サンプル
//Initialize $('.selector').igDateEditor({ tabIndex: 1 }); //Get var tabIndex = $(".selector").igDateEditor("option", "tabIndex"); //Set $(".selector").igDateEditor("option", "tabIndex", 1); -
textAlign
継承- タイプ:
- enumeration
- デフォルト:
- left
エディター内のテキストの水平配置を取得または設定します。
メンバー
- left
- タイプ:string
- 入力したテキストは左揃えになります。
- right
- タイプ:string
- 入力したテキストは右揃えになります。
- center
- タイプ:string
- 入力したテキストは中央揃えになります。
コード サンプル
//Initialize $(".selector").igDateEditor({ textAlign : "center" }); //Get var align = $(".selector").igDateEditor("option", "textAlign"); //Set $(".selector").igDateEditor("option", "textAlign", "center"); -
validatorOptions
継承- タイプ:
- object
- デフォルト:
- null
igValidator ウィジェットによってサポートされるオプションを取得または設定します。
注: エラーをトリガーした際に igValidator の検証ルールは最小値/長さおよび最大値/長さを別々に適用します。エディターの対応するオプションは、定義された入力規則に反する値の入力を防止します。コード サンプル
//Initialize $(".selector").igDateEditor({ validatorOptions : { successMessage: "Success", required: true, onchange: true, notificationOptions: { mode: "popover" } } }); //Get var validateOptions = $(".selector").igDateEditor("option", "validatorOptions"); //Set $(".selector").igDateEditor("option", "validatorOptions", {onblur: true, onchange: true}); -
value
- タイプ:
- date
- デフォルト:
- null
エディター内の値を取得または設定します。Date オブジェクトは値として設定できます。文字列を設定すると、エディターがその値を Date オブジェクトのコンストラクターに渡し、相対する Date オブジェクトを値として使用します。MVC 日付書式も使用できます。
注: このプロパティは、日付を抽出するために dateInputFormat 設定を使用しません。コード サンプル
//Initialize $(".selector").igDateEditor({ value : new Date (2015, 11, 11) }); //Get var value = $(".selector").igDateEditor("option", "value"); //Set $(".selector").igDateEditor("option", "value", new Date (2015, 11, 11)); -
width
継承- タイプ:
- enumeration
- デフォルト:
- null
コントロールの幅を取得または設定します。
メンバー
- null
- タイプ:object
- 他の幅が定義されていない場合、データに合わせて引き伸ばされます。
- string
- ウィジェットの幅をピクセル (px) またはパーセンテージ (%) に設定できます。
- number
- ウィジェットの幅は数値としてピクセルで設定できます。
コード サンプル
//Initialize $(".selector").igDateEditor({ width : 200 }); //Get var width = $(".selector").igDateEditor("option", "width"); //Set $(".selector").igDateEditor("option", "width", 200); -
yearShift
- タイプ:
- number
- デフォルト:
- 0
グレゴリオ暦および表示される年の間の違いを設定するため、日付の年部分を増加/減少する値を取得または設定します。
コード サンプル
//Initialize $(".selector").igDateEditor({ yearShift : 4500 }); //Get var yearShift = $(".selector").igDateEditor("option", "yearShift"); //Set $(".selector").igDateEditor("option", "yearShift", 4500);
Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。
-
blur
継承- キャンセル可能:
- false
エディターの入力フィールドがフォーカスを失うときに発生します。
コード サンプル
//Bind after initialization $(".selector").on("igdateeditorblur", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ blur: function (evt, ui) { ... } }); -
focus
継承- キャンセル可能:
- false
エディターの入力フィールドがフォーカスを受けるときに発生します。
コード サンプル
//Bind after initialization $(".selector").on("igdateeditorfocus", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ focus: function (evt, ui) { ... } }); -
keydown
継承- キャンセル可能:
- true
keydown イベントで発生されます。
キー操作をキャンセルするには、False を返します。コード サンプル
//Bind after initialization $(".selector").on("igdateeditorkeydown", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ keydown: function (evt, ui) { ... } }); -
keypress
継承- キャンセル可能:
- true
keypress イベントで発生されます。
キー操作をキャンセルするには、False を返します。コード サンプル
//Bind after initialization $(".selector").on("igdateeditorkeypress", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ keypress: function (evt, ui) { ... } }); -
keyup
継承- キャンセル可能:
- false
keyup イベントで発生されます。
コード サンプル
//Bind after initialization $(".selector").on("igdateeditorkeyup", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ keyup: function (evt, ui) { ... } }); -
mousedown
継承- キャンセル可能:
- true
mousedown イベントで発生されます。
コード サンプル
//Bind after initialization $(".selector").on("igdateeditormousedown", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ mousedown: function (evt, ui) { ... } }); -
mousemove
継承- キャンセル可能:
- false
ドロップダウン リストを含むエディターの任意の部分での mousemove に対して発生されます。
コード サンプル
//Bind after initialization $(".selector").on("igdateeditormousemove", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ mousemove: function (evt, ui) { ... } }); -
mouseout
継承- キャンセル可能:
- false
ドロップダウン リストを含むエディターの任意の部分での mouseleave に対して発生されます。
コード サンプル
//Bind after initialization $(".selector").on("igdateeditormouseout", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ mouseout: function (evt, ui) { ... } }); -
mouseover
継承- キャンセル可能:
- false
ドロップダウン リストを含むエディターの任意の部分での mouseover に対して発生されます。
コード サンプル
//Bind after initialization $(".selector").on("igdateeditormouseover", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ mouseover: function (evt, ui) { ... } }); -
mouseup
継承- キャンセル可能:
- false
mouseup イベントで発生されます。
コード サンプル
//Bind after initialization $(".selector").on("igdateeditormouseup", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ mouseup: function (evt, ui) { ... } }); -
rendered
継承- キャンセル可能:
- false
エディターのレンダリングが完了した後に発生します。
コード サンプル
//Bind after initialization $(".selector").on("igdateeditorrendered", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ rendered: function (evt, ui) { ... } }); -
rendering
継承- キャンセル可能:
- true
エディターのレンダリングが完了する前に発生します。
コード サンプル
//Bind after initialization $(".selector").on("igdateeditorrendering", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ rendering: function (evt, ui) { ... } }); -
textChanged
継承- キャンセル可能:
- false
エディターのテキストが変更された後に発生します。keyUp イベントが発生するときに発生できます。
または、クリアボタンがクリックされたときまたはリストの項目がせんたくされたときに発生できます。コード サンプル
//Bind after initialization $(".selector").on("igdateeditortextchanged", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ textChanged: function (evt, ui) { ... } }); -
valueChanged
継承- キャンセル可能:
- false
エディター値が変更された後に発生します。フォーカスの消失またはスピン イベントに対して発生します。
コード サンプル
//Bind after initialization $(".selector").on("igdateeditorvaluechanged", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ valueChanged: function (evt, ui) { ... } }); -
valueChanging
継承- キャンセル可能:
- true
エディターの値を変更する前に発生します。
変更をキャンセルするには、False を返します。
フォーカスの消失またはスピン イベントに対して発生します。コード サンプル
//Bind after initialization $(".selector").on("igdateeditorvaluechanging", function (evt, ui) { ... }); //Initialize $(".selector").igDateEditor({ valueChanging: function (evt, ui) { ... } });
-
changeGlobalLanguage
継承- .igDateEditor( "changeGlobalLanguage" );
ウィジェットの言語をグローバルの言語に変更します。グローバルの言語は $.ig.util.language の値です。
コード サンプル
$(".selector").igDateEditor("changeGlobalLanguage"); -
changeGlobalRegional
継承- .igDateEditor( "changeGlobalRegional" );
ウィジェットの地域設定をグローバルの地域設定に変更します。グローバルの地域設定は $.ig.util.regional にあります。
コード サンプル
$(".selector").igDateEditor("changeGlobalRegional"); -
changeLocale
継承- .igDateEditor( "changeLocale" );
ウィジェット要素のすべてのロケールを options.language に指定される言語に変更します。
注: このメソッドは珍しいシナリオのみで使用されます。language または locale オプションのセッターを参照してください。コード サンプル
$(".selector").igDateEditor("changeLocale"); -
changeRegional
- .igDateEditor( "changeRegional" );
ウィジェット要素の地域設定を options.regional に指定される言語に変更します。
注: このメソッドは珍しいシナリオのみで使用されます。regional オプションのセッターを使用してください。コード サンプル
$(".selector").igDateEditor("changeRegional"); -
clearButton
継承- .igDateEditor( "clearButton" );
- 返却型:
- jquery
- 返却型の説明:
- jQuery オブジェクトへの参照を返します。
エディターのクリア ボタン UI 要素への参照を返します。
returnType="$"。jquery オブジェクトへの参照を返します。コード サンプル
var button = $(".selector").igDateEditor("clearButton"); -
destroy
継承- .igDateEditor( "destroy" );
ウィジェットを破棄します。
コード サンプル
$(".selector").igDateEditor("destroy"); -
displayValue
継承- .igDateEditor( "displayValue" );
- 返却型:
- string
- 返却型の説明:
- エディターの表示テキスト。
エディターに表示するテキストを取得します。
コード サンプル
$(".selector").igDateEditor("displayValue"); -
editorContainer
継承- .igDateEditor( "editorContainer" );
- 返却型:
- jquery
- 返却型の説明:
- コンテナー エディター要素。
エディターをラップする jQuery 要素への参照を取得します。
コード サンプル
$(".selector").igDateEditor("editorContainer"); -
field
継承- .igDateEditor( "field" );
- 返却型:
- jquery
- 返却型の説明:
- 視覚エディター要素。
エディターの入力要素を取得します。
returnType="$" 視覚エディター要素。コード サンプル
$(".selector").igDateEditor("field"); -
getSelectedDate
- .igDateEditor( "getSelectedDate" );
- 返却型:
- date
選択した日付を date オブジェクトとして取得します。このメソッドは、dataMode が displayModeText または editModeText に設定される場合のみに利用可能です。
この場合、value() メソッドは日付オブジェクトを返さずに、機能の置き換えとして getSelectedDate() を使用できます。コード サンプル
$(".selector").igDateEditor("getSelectedDate"); -
getSelectedText
継承- .igDateEditor( "getSelectedText" );
- 返却型:
- string
- 返却型の説明:
- エディターで選択されたテキスト。
編集モードでエディターから選択されたテキストを取得します。keydown または keyup などのキー イベント ハンドラーで可能です。このメソッドはエディターにフォーカスがある場合のみ使用できます。エディターにフォーカスがない状態でこのメソッドを呼び出した場合、空文字列になる場合があります。
コード サンプル
var text = (".selector").igDateEditor("getSelectedText"); -
getSelectionEnd
継承- .igDateEditor( "getSelectionEnd" );
- 返却型:
- number
- 返却型の説明:
- エディターで選択されたテキストの終了インデックス。
エディターで選択されたテキストの終了インデックスを取得します。
コード サンプル
var intex = $(".selector").igDateEditor("getSelectionEnd"); -
getSelectionStart
継承- .igDateEditor( "getSelectionStart" );
- 返却型:
- number
- 返却型の説明:
- エディターで選択されたテキストの開始インデックス。
エディターで選択されたテキストの開始インデックスを取得します。
コード サンプル
var intex = $(".selector").igDateEditor("getSelectionStart"); -
hasFocus
継承- .igDateEditor( "hasFocus" );
- 返却型:
- bool
- 返却型の説明:
- エディターがフォーカスされるかどうかを返します。
エディターがフォーカスを持つかどうかを取得します。
コード サンプル
$(".selector").igDateEditor("hasFocus"); -
hide
継承- .igDateEditor( "hide" );
エディターを非表示にします。
コード サンプル
$(".selector").igDateEditor("hide"); -
inputName
継承- .igDateEditor( "inputName", [newValue:string] );
- 返却型:
- string
- 返却型の説明:
- 現在の入力名。
エディター要素に適用される名前属性を取得または設定します。
- newValue
- タイプ:string
- オプション
- 新しい入力名。
コード サンプル
$(".selector").igDateEditor("inputName", "checkbox"); -
insert
継承- .igDateEditor( "insert", string:string );
カレットの位置、または現在選択を上書きしてテキストを挿入します。エディターがフォーカスを持つ場合、このメソッドは現在選択を上書きしてテキストを挿入します。エディターがフォーカスを持たない場合、このメソッドはエディターの値をテキストに設定します。注: メソッドは textChanged イベントを発生させます。
- string
- タイプ:string
- 挿入する文字列。
コード サンプル
$('.selector').igDateEditor({ blur: function (evt, ui) { // insert 0 as the user leaves the field ui.owner.insert("0"); } }); $(".selector").igDateEditor("insert", "20"); -
isValid
- .igDateEditor( "isValid" );
- 返却型:
- bool
- 返却型の説明:
- 編集値が有効化どうか。
エディター内の値が値かどうかチェックします。注: この機能は自動通知をトリガーしません。
コード サンプル
var isValid = $(".selector").igDateEditor("isValid"); -
select
継承- .igDateEditor( "select", start:number, end:number );
エディターで開始インデックスおよび終了インデックスの間のテキストを選択します。パラメーターが等しい場合、このメソッドはカレットの場所を設定します。このメソッドはエディターにフォーカスがある場合のみ効果があります。
- start
- タイプ:number
- 選択の開始。
- end
- タイプ:number
- 選択の終了。
コード サンプル
$(".selector").igDateEditor("select", 2, 4); -
selectDate
- .igDateEditor( "selectDate", date:date );
選択された日付を設定します。このメソッドは、dataMode が displayModeText または editModeText に設定される場合のみに利用可能です。
この場合、value() メソッドは日付オブジェクトを新しい値として受け取らず、機能の置き換えとして getSelectedDate() を使用できます。- date
- タイプ:date
- .
コード サンプル
$(".selector").igDateEditor("selectDate", new Date (2016, 2, 3)); -
setFocus
継承- .igDateEditor( "setFocus", [delay:number] );
指定した遅延時間の後にフォーカスをエディターに設定します。
- delay
- タイプ:number
- オプション
- エディターにフォーカスする前の遅延。
コード サンプル
$(".selector").igDateEditor("setFocus", 200); -
show
継承- .igDateEditor( "show" );
エディターを表示します。
コード サンプル
$(".selector").igDateEditor(("show"); -
spinDown
- .igDateEditor( "spinDown", [delta:number] );
カーソル位置に基づいて日時期間を減らします。
- delta
- タイプ:number
- オプション
- 減少デルタ。
コード サンプル
$(".selector").igDateEditor("spinDown", 3); -
spinDownButton
- .igDateEditor( "spinDownButton" );
- 返却型:
- jquery
- 返却型の説明:
- エディターのスピン ダウン UI 要素を表す jQuery オブジェクト。
エディターのスピン ダウン UI 要素への参照を返します。
コード サンプル
$(".selector").igDateEditor("spinDownButton"); -
spinUp
- .igDateEditor( "spinUp", [delta:number] );
カーソル位置に基づいて日時期間を増加します。
- delta
- タイプ:number
- オプション
- 増加デルタ。
コード サンプル
$(".selector").igDateEditor("spinUp", 2); -
spinUpButton
- .igDateEditor( "spinUpButton" );
- 返却型:
- jquery
- 返却型の説明:
- エディターのスピン アップ UI 要素を表す jQuery オブジェクト。
エディターのスピン アップ UI 要素への参照を返します。
コード サンプル
$(".selector").igDateEditor("spinUpButton"); -
validate
継承- .igDateEditor( "validate" );
- 返却型:
- bool
- 返却型の説明:
- 編集値が有効化どうか。
エディターの検証をトリガーします。 validatorOptions を設定すると igValidator で検証も呼び出されます。
コード サンプル
var valid = $(".selector").igDateEditor("validate"); -
validator
継承- .igDateEditor( "validator" );
- 返却型:
- object
- 返却型の説明:
- igValidator への参照または null を返します。
エディターで使用される igValidator への参照を取得します。
コード サンプル
var validator = $(".selector").igDateEditor("validator"); -
value
- .igDateEditor( "value", [newValue:date] );
- 返却型:
- date
- 返却型の説明:
- 現在のエディター値。
エディター値を取得または設定します。
注: このプロパティは、日付を抽出するために dateInputFormat 設定を使用しません。- newValue
- タイプ:date
- オプション
- 新しいエディターの値。Date オブジェクトは値として設定できます。文字列値を渡すと、エディターは日付オブジェクトを作成するために javascript Date オブジェクトのコンストラクターを使用し、結果のオブジェクトを比較で使用します。MVC 日付書式も使用できます。たとえば、Date(/"thicks"/) です。
コード サンプル
$(".selector").igDateEditor("value", new Date (2016, 2, 3);
-
ui-state-active
- エディターがアクティブなときに最上位の要素に適用されるクラス。デフォルト値は 'ui-state-active' です。
-
ui-igedit-button-common ui-unselectable
- すべてのボタン コンテナーに適用されるクラス。デフォルト値は 'ui-igedit-button-common ui-unselectable ui-igedit-button-ltr ui-state-default' です。
-
ui-igedit-buttonhover ui-state-hover
- マウス オーバー状態のボタンの SPAN 要素に適用されるクラス。デフォルト値は 'ui-igedit-buttonhover ui-state-hover' です。
-
ui-igedit-buttonpressed ui-state-highlight
- 押下状態のボタンの SPAN 要素に適用されるクラス。デフォルト値は 'ui-igedit-buttonpressed ui-state-highlight' です。
-
ui-igedit-cleararea ui-state-default
- クリア ボタンを保持する DIV 要素に適用されるクラス。デフォルト値は 'ui-igedit-cleararea ui-state-default' です。
-
ui-igedit-buttonimage ui-icon-circle-close
- クリア ボタン画像を保持する DIV 要素に適用されるクラス。デフォルト値は 'ui-igedit-buttonimage ui-icon-circle-close ui-icon ui-igedit-buttondefault' です。
-
ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default
- エディターがコンテナーに描画される場合に最上位の要素に適用されるクラス。デフォルト値は、'ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default' です。
-
ui-state-disabled
- 無効な状態の編集要素に適用されるクラス。デフォルト値は 'ui-igedit-disabled ui-state-disabled' です。
-
ui-igedit-dropdown-button
- ドロップ ダウン ボタンを保持する DIV 要素に適用されるクラス。デフォルト値は 'ui-igedit-dropdown-button' です。
-
ui-icon ui-icon-triangle-1-s ui-igedit-buttonimage
- ドロップ ダウン ボタン画像を保持する DIV 要素に適用されるクラス。デフォルト値は、'ui-icon ui-icon-carat-1-s ui-igedit-buttonimage' です。
-
ui-igedit-dropdown ui-widget
- listitems を保持するコンテナーに適用されるクラス。デフォルト値は 'ui-igedit-dropdown' です。
-
ui-igedit-input
- メイン/最上位の要素に適用されるクラス。デフォルト値は 'ui-igedit-input' です。
-
ui-igeditor-input-container ui-corner-all
- 編集可能な入力をラップする div に適用されたクラス (multiline textarea の場合)。デフォルト値は、"ui-igeditor-input-container ui-corner-all"。
-
ui-state-focus
- エディターがフォーカスされるときに最上位の要素に適用されるクラス。デフォルト値は 'ui-state-focus' です。
-
ui-state-hover
- エディターがホバーされるときに最上位の要素に適用されるクラス。デフォルト値は 'ui-state-hover' です。
-
ui-igedit-listitem ui-state-default
- ドロップダウン リスト内の項目を表す SPAN 要素に適用されるクラス。デフォルト値は 'ui-igedit-listitem ui-state-default' です。
-
ui-state-active ui-igedit-listitemactive
- ドロップダウン リスト内のアクティブ項目を表す SPAN 要素に適用されるクラスに適用されるクラス。デフォルト値は 'ui-igedit-listitemselected ui-state-highlight' です。
-
ui-igedit-listitemhover ui-state-hover
- マウス オーバー状態のドロップダウン リスト内の項目を表す SPAN 要素に適用されるクラスに適用されるクラス。デフォルト値は 'ui-igedit-listitemhover ui-state-hover' です。
-
ui-igedit-listitemselected ui-state-highlight
- ドロップダウン リスト内の選択項目を表す SPAN 要素に適用されるクラスに適用されるクラス。デフォルト値は 'ui-igedit-listitemselected ui-state-highlight' です。
-
ui-igedit-placeholder
- plaseHolder オプションを設定した場合に表示可能な入力に適用されるクラス。このクラスは、スタイリングのみに関連します。デフォルト値は 'ui-igedit-placeholder' です。
-
ui-igedit-spinlowerimage ui-icon-carat-1-s ui-icon
- スピン ダウン画像を保持する DIV 要素に適用されるクラス。デフォルト値は、'ui-igedit-spinlowerimage ui-icon-carat-1-s ui-icon ui-igedit-buttondefault ui-igedit-spinbutton ui-igedit-buttonimage' です。
-
ui-igedit-spinupperimage ui-icon-carat-1-n ui-icon
- スピン アップ画像を保持する DIV 要素に適用されるクラス。デフォルト値は、'ui-igedit-spinupperimage ui-icon-carat-1-n ui-icon ui-igedit-buttondefault ui-igedit-spinbutton ui-igedit-buttonimage' です。
-
ui-igedit-textarea
- textMode が 'multiline' に設定される場合、可視 textarea 要素に適用されるクラス。