tobijibu

Examples

【お知らせ】 この翻訳ページは下記サイトに移行します。下記リンク先よりご確認ください。
これに伴い当ページの更新を停止します。
[flatpickr - Japanese] - http://tr.you84815.space/flatpickr/
上記サイトは随時更新していきますので、今後とも、宜しくお願い致します。





基本

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
}
flatpickr('.flatpickr', config);

表示用日付の指定

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

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

サンプル

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

日付指定オプションに対する日付形式

日付形式を指定するオプションがあります。

  • 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オプションに"2017-04"を指定しています。2017-04-01以降の日付が選択可能になります。

const config = {
  minDate: "2017-04"
}
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)
}
flatpickr('.flatpickr', config);


特定の日付を無効化

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

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

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

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

サンプル

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

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

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

サンプル

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

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


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

サンプル

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

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

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

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

const config = {
  disable: [
    function(date) {
      // return true to disable
      return (date.getDay() === 0 || date.getDay() === 6);

    }
  ],
  locale: {
    firstDayOfWeek: 1 // start week on Monday
  }
}
flatpickr('.flatpickr', config);


特定日付以外を無効化

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

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

サンプル

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

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


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

サンプル

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

const config = {
  enable: [
    {
      from: "2017-04-01",
      to: "2017-06-01"
    },
    {
      from: "2017-09-01",
      to: "2017-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) {
      // return true to disable
      return (date.getMonth() % 2 === 0 && date.getDate() < 15);
    }
  ]
}
flatpickr('.flatpickr', config);


日付の複数選択

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

サンプル

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


複数日付の初期値設定

サンプル

const config = {
  mode: "multiple",
  dateFormat: "Y-m-d",
  defaultDate: ["2016-10-20", "2016-11-04"]
}
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",
  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,   // カレンダー非表示

  enableSeconds: false, // ｢秒｣の選択可否。初期値は無効です

  time_24hr: false, // AM/PM選択可否。初期値は有効です。

  // 表示フォーマット
  dateFormat: "H:i",

  // 初期選択時間。日付の初期指定を利用する場合は指定しないでください。
  defaultHour: 12,
  defaultMinute: 0

  // 代わりに"defaultDate"を指定してください。
  // defaultDate: "3:30"
  // とか
  // dateFormat: "Y-m-d H:i",
  // defaultDate: "2016-10-10 3:30"
  // など
}
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>
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: 8.5px 12px;
    border-left: 0;
    cursor: pointer;
    align-self: center;
    justify-content: center;
    line-height: 1;
}
date_range clear

  rss_feed
info_outline home keyboard_arrow_left keyboard_arrow_right