[]
        
(Showing Draft Content)

Wijmo_Input.Calendar

Calendar クラス

Calendar コントロールには月間カレンダーが表示され、ユーザーはここから 日付を選択することができます。

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

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

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

selectionMode プロパティを使用すると、ユーザーが日や月を選択できるか、 またはどの値も選択できないかを決定できます。

Calendar コントロールは、次のキーボードコマンドをサポートしています。

キーの組み合わせアクション
Left前の日
Right次の日
Up前の週
Down次の週
PgUp前の月
PgDn次の月
Alt + PgUp前の年
Alt + PgDn次の年
Home月の最初の有効な日
End月の最後の有効な日
Alt + End今日

次の例は、ユーザーが一回のクリックで日付を選択できるCalendarコントロールを示しています。

Example

階層

  • any
    • Calendar

コンストラクタ

constructor

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

    引数

    • element: any

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

    • オプション options: any

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

    戻り値 Calendar

プロパティ

displayMonth

displayMonth: Date

カレンダーに表示されている月を取得または設定します。

firstDayOfWeek

firstDayOfWeek: number

週の最初の曜日(カレンダーの最初の列に表示される曜日)を表す値を取得または設定します。

このプロパティをnullに設定すると、現在のカルチャのデフォルトが使用されます。 週の最初の曜日は、英語カルチャでは日曜日(0)であり、 ほとんどのヨーロッパカルチャでは月曜日(1)です。

formatDayHeaders

formatDayHeaders: string

月表示で、曜日の上に表示されるヘッダーの書式を取得または設定します。

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

formatDays

formatDays: string

月表示で、日の表示書式を取得または設定します。

このプロパティのデフォルト値は 'd 'です('d'の後のスペースは、 短い日付パターンを表す標準な書式'd'と解釈されないようにします)。

formatMonths

formatMonths: string

年表示で、月の表示書式を取得または設定します。

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

formatYear

formatYear: string

年表示で、月の上に表示される年の書式を取得または設定します。

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

formatYearMonth

formatYearMonth: string

月表示で、カレンダーの上に表示される月と年の書式を取得または設定します。

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

isReadOnly

isReadOnly: boolean

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

このプロパティのデフォルト値は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を返す必要があります。

以下のサンプルコードは、週末を無効な状態で表示し、ユーザーがそれらの日付を選択できないようにします。

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

max

max: Date

ユーザーがカレンダーで選択できる最も遅い日付を取得または設定します。

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

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

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

min

min: Date

ユーザーがカレンダーで選択できる最も早い日付を取得または設定します。

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

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

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

monthView

monthView: boolean

カレンダーに1か月と1年のどちらを表示するかを示す値を取得または設定します。

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

repeatButtons

repeatButtons: boolean

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

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

selectionMode

selectionMode: DateSelectionMode

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

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

showHeader

showHeader: boolean

現在の月とナビゲーションボタンを含むヘッダ領域をコントロールに表示するかどうかを示す値を取得または設定します。

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

showYearPicker

showYearPicker: boolean

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

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

value

value: Date

現在選択されている日付を取得または設定します。

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

静的 controlTemplate

controlTemplate: string

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

メソッド

onDisplayMonthChanged

onFormatItem

onValueChanged

イベント

displayMonthChanged

displayMonthChanged: Event

displayMonth プロパティが変更された後に発生します。

formatItem

formatItem: Event

カレンダーの日を表す要素が作成されたときに発生します。

このイベントを使用してカレンダーの項目を表示用に書式設定できます。このイベントは、目的はitemFormatter プロパティと同じですが、複数の独立したハンドラを使用できる利点があります。

以下のサンプルコードは、formatItem イベントを使用して週末を無効な状態にし、 カレンダーにグレーで表示されるようにします。

// 日曜日と土曜日を無効にします
calendar.formatItem.addHandler(function (s, e) {
  var day = e.data.getDay();
  if (day == 0 || day == 6) {
    wijmo.addClass(e.item, 'wj-state-disabled');
  }
});

valueChanged

valueChanged: Event

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