Examples

更新日: 2019-12-12

基本

configを設定しない場合。以下の機能はデフォルトで動作します。

デモ

最も基本的な使い方です。inputにセレクタ(クラスやid等)を指定し、そのセレクタをnew flatpickr()に指定します。オプションを指定する場合は、new flatpickr()の第二引数にオプションのObjectを渡します。

HTML

<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">

JavaScript

flatpickr('.flatpickr');

※以降、特にHTMLを明示しない場合は同じinputタグを利用するものとします。

時間指定

enableTimeオプションを指定し、時刻を選択可能にします。

"年"、"月"と同様、マウスカーソルを"時"、"分"、"AM/PM"に合わせてホイールを上下にスクロールすると、値が切り替わります。

デモ

const config = {
  enableTime: true,
  dateFormat: "Y-m-d H:i",
}
flatpickr('.flatpickr', config);

表示用日付の指定

altInputオプションを指定すると、実際のテキストエリアが隠され、表示用のテキストエリアに表示用日付が表示されます。隠されたテキストエリアのvalueにはY-m-d...等の実データが設定されます。 altInputで表示される内容はカスタマイズ可能です。

この設定を有効にすることをお勧めします。

デモ

日付を選択した後にinputの内容を確認してください。

const config = {
  altInput: true
  altFormat: "F j, Y",
  dateFormat: "Y-m-d",
}
flatpickr('.flatpickr', config);

日付形式指定

flatpickrには様々な形式の日付を受け取るオプションがあります。

defaultDate
minDate
maxDate
enable/disable

これらのオプションには日付は以下の形式で指定することができます。

Date Objectsは常に利用できます。
- 例:new Date(2015, 0, 10)
タイムスタンプは常に利用できます。
- 例:1488136398547
ISO 8601形式は常に利用できます。
- 例:"2017-02-26T19:40:03.243Z"
文字列指定では、dateFormatオプションの形式と合わせる必要があります。
- dateFormatオプションのデフォルト値はYYYY-MM-DD HH:MMです。
- つまり"2016"、"2016-10"、"2016-10-20"、"2016-10-20 15"、 "2016-10-20 15:30"のこれら全てが正しい指定方法です。
todayと指定することもできます。

日付の初期値設定

初期状態で選択される日付は、inputのvalueに指定された値、またはdefaultDateオプションで指定された日付が選択状態になります。

日付の指定方法は、日付指定オプションに対する日付形式を参照してください。

minDate、maxDate

minDateオプションは、選択可能な日付の範囲指定のうち、最小(最も早い)日付を指定します。 minDateを指定すると、minDate以前の日付を選択することはできません。

maxDateオプションは、選択可能な日付の範囲指定のうち、最大(最も遅い)日付を指定します。 maxDateを指定すると、maxDate以降の日付を選択することはできません。

デモ

minDateオプションに"2020-01"を指定しています。 2020-01-01以降の日付が選択可能になります。

const config = {
  minDate: "2020-01"
}
flatpickr('.flatpickr', config);

デモ

maxDateオプションに"15.12.2017"を指定しています。 2017-12-15以前の日付が選択可能になります。
また、dateFormatオプションで日付フォーマットを指定しています。

const config = {
  dateFormat: "d.m.Y",
  maxDate: "15.12.2017"
}
flatpickr('.flatpickr', config);

デモ

minDateオプションに"today"を設定しています。本日以降の日付が選択可能になります。

const config = {
  minDate: "today"
}
flatpickr('.flatpickr', config);

デモ

minDateオプションに"today"、 maxDateオプションにnew Date().fp_incr(14)を設定しています。本日から14日後までの期間が選択可能になります。

const config = {
  minDate: "today",
  maxDate: new Date().fp_incr(14) // 今から14日後
}
flatpickr('.flatpickr', config);

特定の日付を無効化

特定の日付を選択不可にするには以下の方法があります。

特定の日付を無効化する
特定の期間を無効化する
関数を使って特定の日付を無効化する

これらはdisableオプションを使って設定します。

1. 特定の日付を無効化する

デモ

disableオプションに無効化対象の日付を指定しています。 2025-01-30、2025-02-21、2025-03-08、2025-05-09が選択不可になります。

const config = {
  disable: ["2025-01-30", "2025-02-21", "2025-03-08", new Date(2025, 4, 9) ]
}
flatpickr('.flatpickr', config);

2. 特定の期間を無効化する

デモ

disableオプションに無効化対象の期間を指定しています。 from、toを使って期間を指定します。 2025-04-01～2025-05-01と、2025-09-01～2025-12-01の期間が選択不可になります。

const config = {
  disable: [
    {
      from: "2025-04-01",
      to: "2025-05-01"
    },
    {
      from: "2025-09-01",
      to: "2025-12-01"
    }
  ]
}
flatpickr('.flatpickr', config);

3. 関数を使って特定の日付を無効化する

デモ

disableオプションに関数を指定して無効化する日付を計算します。

関数はDateオブジェクトを受け取り、booleanを返す必要があります。もし指定した関数がtrueを返した場合、その日付が無効化されます。

この機能を使うことで、任意のロジックを使用して日付を無効化することができます。

以下の例では土曜日、日曜日を無効化しています。

const config = {
  disable: [
    function(date) {
      // trueを返して無効化します。
      return (date.getDay() === 0 || date.getDay() === 6);

    }
  ],
  locale: {
    firstDayOfWeek: 1 // 週を月曜開始にします。
  }
}
flatpickr('.flatpickr', config);

特定日付以外を無効化

enableオプションは有効化する日付を指定することができます。基本的にはdisableオプションと同様です。

1. 特定の日付のみ有効化する

デモ

enableオプションに有効化対象の日付を指定しています。 2025-03-30、2025-05-21、2025-06-08、2025-09-09のみが選択可能になります。

const config = {
  enable: ["2025-03-30", "2025-05-21", "2025-06-08", new Date(2025, 8, 9) ]
}
flatpickr('.flatpickr', config);

2. 特定の期間のみ有効化する

デモ

enableオプションに有効化対象の期間を指定しています。 from、toを使って期間を指定します。 2025-04-01～2025-05-01と、2025-09-01～2025-12-01の期間のみが選択可能になります。

const config = {
  enable: [
    {
      from: "2025-04-01",
      to: "2025-05-01"
    },
    {
      from: "2025-09-01",
      to: "2025-12-01"
    }
  ]
}
flatpickr('.flatpickr', config);

3. 関数を使って特定の日付のみを有効化する

デモ

enableオプションに関数を指定して有効化する日付を計算します。 2で割り切れる月の1日～14日のみ選択可能になります。

* 月[date.getMonth()]は0～11の整数値が入ります。そのため、0は1月、1は2月、11は12月に対応します。

const config = {
  enable: [
    function(date) {
      // trueを返して無効化します。
      return (date.getMonth() % 2 === 0 && date.getDate() < 15);
    }
  ]
}
flatpickr('.flatpickr', config);

日付の複数選択

modeオプションに"multiple"を指定すると、日付の複数選択が可能になります。

デモ

const config = {
  mode: "multiple",
  dateFormat: "Y-m-d"
}
flatpickr('.flatpickr', config);

複数日付の初期値設定

デモ

const config = {
  mode: "multiple",
  dateFormat: "Y-m-d",
  defaultDate: ["2016-10-20", "2016-11-04"]
}
flatpickr('.flatpickr', config);

区切り文字の設定

デモ

const config = {
  mode: "multiple",
  dateFormat: "Y-m-d",
  conjunction: " :: "
}
flatpickr('.flatpickr', config);

日付の期間選択

modeオプションに"range"を指定すると、日付の期間選択が可能になります。

デモ

const config = {
  mode: "range"
}
flatpickr('.flatpickr', config);

無効化された日付(minDate、maxDate、enable、disable)は、期間に含めることはできません。

デモ

minDateに"today"が指定されているため、本日以降の期間が選択可能です。また、8で割り切れる日付以外が選択可能なので、 8日、16日、24日を含めた期間を選択することはできません。

const config = {
  mode: "range",
  minDate: "today",
  dateFormat: "Y-m-d",
  disable: [
    function(date) {
      // disable every multiple of 8
      return !(date.getDate() % 8);
    }
  ]
}
flatpickr('.flatpickr', config);

範囲日付の初期値設定

デモ

const config = {
  mode: "range",
  dateFormat: "Y-m-d",
  defaultDate: ["2016-10-10", "2016-10-20"]
}
flatpickr('.flatpickr', config);

時間選択

デモ

const config = {
  enableTime: true,   // 時間の選択可否
  noCalendar: true,   // カレンダー非表示
  dateFormat: "H:i",  // 表示フォーマット
}
flatpickr('.flatpickr', config);

24時間選択

デモ

const config = {
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i",
  time_24hr: true,
}
flatpickr('.flatpickr', config);

minDate、maxDate

デモ

const config = {
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i",
  minDate: "16:00",
  maxDate: "22:30",
}
flatpickr('.flatpickr', config);

時間の初期値指定

デモ

const config = {
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i",
  defaultDate: "13:45"
}
flatpickr('.flatpickr', config);

時間の範囲制限

デモ

どの日付も選択可能ですが、AM9:00より前の時刻を選択することはできません。

const config = {
  enableTime: true,
  minTime: "09:00"
}
flatpickr('.flatpickr', config);

デモ

どの日付も選択可能ですが、PM4:00～PM10:00の範囲のみ選択することができます。

const config = {
  enableTime: true,
  minTime: "16:00",
  maxTime: "22:00"
}
flatpickr('.flatpickr', config);

インライン表示

inlineオプションを指定すると、常にカレンダーを開いた状態で表示することができます。

デモ

const config = {
  inline: true
}
flatpickr('.flatpickr', config);

週番号表示

weekNumbersオプションを指定すると、カレンダーの左側に週番号を表示することができます。

デモ

const config = {
  weekNumbers: true,
}
flatpickr('.flatpickr', config);

デモ

週番号表示関数を上書きし、週番号の前に"Week"を表示しています。

const config = {
  weekNumbers: true,
  /*
    オプションで、週番号を返す関数getWeekを上書きすることができます。
    上書きする関数は、Dateオブジェクトを受け取り、
    週番号表示列に表示する文字列を返す関数でなければなりません。
  */
  getWeek: function(dateObj) {
    var d = new Date(dateObj);
    d.setHours(0,0,0);
    d.setDate(d.getDate()+4-(d.getDay()||7));
    return "Week" + Math.ceil((((d-new Date(d.getFullYear(),0,1))/8.64e7)+1)/7);
  }
}
flatpickr('.flatpickr', config);

flatpickr + 外部要素

flatpickrではBootstrapやその他フレームワークで利用される、テキストボックスとボタンの組み合わせ(input group)にも対応しています。

これにより、カレンダーの状態をトリガーする要素を追加することができます。

デモ

テキストボックス右のボタン要素に対して、トリガーを指定します。トリガーはdata-(トリガー名)で指定してください。トリガー名は"open"、"close"、"toggle"、"clear"を指定することが出来ます。

JavaScript

const config = {
  wrap: true
}
flatpickr('.flatpickr', config);

HTML

<div class="flatpickr input-group" data-id="strap">
  <input type="text" placeholder="Select Date.." data-input><!-- inputは必須です-->
  <a class="input-button" title="toggle" data-toggle>
    <i class="material-icons">date_range</i>
  </a>
  <a class="input-button" title="clear" data-clear>
    <i class="material-icons">clear</i>
  </a>
</div>

アイコンはMaterial Iconsを使用しています。

CSS

.input-group {
    display: flex;
    align-items: center;
}
.input-group input {
    border: 1px solid #c3c3c3;
    height: 36px;
    line-height: 36px;
    width: 80%;
    padding: 4px;
    max-width: 360px;
    border-radius: 3px;
    background: #fff;
}
a.input-button {
    text-decoration: none;
    border: 1px solid #bbb;
    display: block;
    padding: 13px;
    border-left: 0;
    cursor: pointer;
    align-self: center;
    justify-content: center;
    line-height: 1;
}

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