Options

更新日: 2019-12-12

オプション

ここではflatpikrで指定可能なオプションを説明しています。最新のオプションについては、options.tsを参照してください。

Option	Type	初期値	概要
`altFormat`	`string`	`"F j, Y"`	`altInput`での表示形式を指定します。`dateFormat`と同様です。
`altInput`	`boolean`	`false`	代替表記用input要素を生成します。ユーザーに対しては読みやすい日付を表示し、送信データには別の表記を渡したい場合に指定します。
`altInputClass`	`string`	`""`	`altInput`で生成された`input`要素に付与されます。元となる`input`要素からクラスを継承していることに注意してください。
`allowInput`	`boolean`	`false`	日付を直接入力可能にします。初期値は直接入力不可です。
`appendTo`	`HTMLElement`	`null`	カレンダーを`body`以外の指定した要素に追加します。
`ariaDateFormat`	`string`	`"F j, Y"`	`dateFormat`と同じトークンを使用して、`aria-label`に指定する日付書式を設定します。これを変更する場合は、スクリーンリーダーが読み取れる値を設定する必要があります。
`clickOpens`	`boolean`	`true`	`input`要素をクリックしてカレンダーを開くかどうか。 `open()`を使って手動で開く場合は無効にすることができます。
`dateFormat`	`string`	`"Y-m-d"`	入力欄に表示する日付形式を指定します。サポートされている文字は以下の表で定義されています。定義リスト
`defaulDate`	`string`	`null`	初期日付を指定します。もし`mode: "multiple"`オプションを指定している場合や、 `mode: "range"`オプションを指定している場合は、 `Date`オブジェクトの配列か、日付文字列の配列を指定することができます。それ以外の場合は単一の`Date`オブジェクトか、日付文字列を指定することができます。
`defaultHour`	`number`	`12`	初期日時の「時間」を指定します。
`defaultMinute`	`number`	`0`	初期日時の「分」を指定します。
`disable`	`array`	`[]`	特定の日付を無効化を参照してください。
`disableMobile`	`boolean`	`false`	非ネイティブの日付ピッカーを利用する場合は`disableMobile`に`true`を指定します。デフォルトでは、特に指定が無い限りネイティブの日付ピッカーを利用します。
`enable`	`array`	`[]`	特定日付以外を無効化を参照してください。
`enableTime`	`boolean`	`false`	「時間」ピッカーを有効化します。
`enableSeconds`	`boolean`	`false`	「秒」ピッカーを有効化します。
`formatDate`	`function`	`null`	組み込みの日付書式処理の代わりに、 `dateFormat`や`altFormat`などを使った、カスタム日付書式関数を指定することができます。
`hourIncrement`	`integer`	`1`	カーソルキーやスクロールの入力時に「時間」の増加量を指定します。
`inline`	`boolean`	`false`	カレンダーをインライン表示します。
`maxDate`	`string`, `date`	`null`	選択可能な最大日付を指定します。選択可能な日付は指定日を含みます。
`minDate`	`string`, `date`	`null`	選択可能な最小日付を指定します。選択可能な日付は指定日を含みます。
`minuteIncrement`	`integer`	`5`	カーソルキーやスクロールの入力時に「分」の増加量を指定します。
`mode`	`string`	`"single"`	日付選択モードを指定します。 `"single"`：単一日、`"multiple"`：複数選択、`"range"`：期間
`nextArrow`	`string`	`>`	次月に切り替えに使用するアイコンをHTMLで指定します。
`noCalendar`	`boolean`	`false`	日付選択を無効化します。「時間」ピッカーを利用する場合は`enableTime`と一緒に利用します。
`onChange`	`function`, `[functions]`	`null`	日付変更時に実行させる関数を指定します。イベントを参照してください。
`onClose`	`function`, `[functions]`	`null`	カレンダーを閉じた時に実行させる関数を指定します。イベントを参照してください。
`onOpen`	`function`, `[functions]`	`null`	カレンダーを開いた時に実行させる関数を指定します。イベントを参照してください。
`onReady`	`function`, `[functions]`	`null`	カレンダーが表示待ちになった時に実行させる関数を指定します。イベントを参照してください。
`parseDate`	`function`	`false`	日付文字列を使い、`Date`オブジェクトを返す関数を指定します。
`position`	`string`	`"auto"`	入力欄に対してカレンダーが表示される場所。 `"auto"`、`"above"`、`"below"`を指定することができます。
`prevArrow`	`string`	`<`	前月に切り替えに使用するアイコンをHTMLで指定します。
`shorthandCurrentMonth`	`boolean`	`false`	月を省略形式で表示します。例えばSeptemberはSepになります。 * 日本語表示の場合は変化がありません。
`static`	`boolean`	`false`	カレンダーの位置をwrapperの中に移動させ、input要素の隣に配置します。^*1
`time_24hr`	`boolean`	`false`	時間選択が24時間モードになり、AM/PMの選択が無効化されます。
`weekNumbers`	`boolean`	`false`	カレンダーに週番号を表示します。
`wrap`	`boolean`	`false`	flatpickr + 外部要素を参照してください。
以下はoptions.ts内に定義されているオプションです。
`animate`	`boolean`	`true`	月の移動時等のアニメーションを有効にするかどうかを指定します。
`closeOnSelect`	`boolean`	`true`	日付選択後にカレンダーを閉じるかどうかを指定します。
`conjunction`	`string`	`", "`	`mode`が`multiple`の場合、選択された日付を連結するために利用する文字を指定します。
`defaultSeconds`	`number`	`0`	初期日時の「秒」を指定します。
`getWeek`	`function`	`getWeek function`	`weekNumbers`が有効な場合に有効になります。予め用意されている`getWeek`を上書きすることができます。 `date`オブジェクトを受け取り、週番号に表示する文字列返す関数を指定します。この関数は文字列を返す関数でなければなりません。
`defaultSeconds`	`object`	`[]`	デフォルトではカレンダーと入力欄以外をクリックするとカレンダーは閉じます。このオプションを指定すると、指定した要素をクリックしてもカレンダーが閉じないようになります。
`locale`	`string`	`"default"`	文字(例："ru"、"en"、"jp")またはオブジェクトで表示言語を指定します。 Localizationを参照してください。
`maxTime`	`string`, `date`	`null`	選択可能な最大時間を指定します。選択可能な時間は指定時間を含みます。
`minTime`	`string`, `Date`	`null`	選択可能な最小時間を指定します。選択可能な時間は指定時間を含みます。
`monthSelectorType`	`string`	`"dropdown"`	カレンダーの月セレクタの表示方法を指定します。 `"dropdown"`、`"static"`を指定することができます。
`onDayCreate`	`function`, `[functions]`	`null`	カレンダーの日付セルが生成された時にトリガーされます。生成されたすべての日付でトリガーします。 4番目の引数はセルのhtml要素です。詳しくはイベントを参照してください。
`onDestroy`	`function`, `[functions]`	`null`	インスタンスが破棄される直前にトリガーされます。イベントを参照してください。
`onKeyDown`	`function`, `[functions]`	`null`	キーボードの入力を検知するとトリガーされます。イベントを参照してください。
`onParseConfig`	`function`, `[functions]`	`null`	カレンダーの設定がパースされた後にトリガーされます。イベントを参照してください。
`plugins`	`objects`	`null`	プラグインを指定します。 Pluginsを参照してください。
`positionElement`	`HTMLElement`	`undefined`	カレンダーが配置される要素を指定します。デフォルトは日付入力のinputです。
`showMonths`	`number`	`1`	表示する月数を指定します。

*1 特定の要素にカレンダーを配置した場合、カレンダーの位置とスタイルはその要素に依存します。カレンダーが期待した位置に表示されない場合はその要素のCSSを確認してください。

このコンテンツはGregory Petrosyan(chmln)によるflatpickrドキュメントを翻訳/改変したものです。