flatpickrを使ったデモ

flatpickrは javascriptで作られた、date-picker ライブラリです。

flatpickrのデモ

このデモはflatpickr v3.1.5を使用して作成しています。また、インプットフォームをクリックすればflatpickrが動作します。

npm i flatpickr --save

bower install flatpickr-calendar --save

yarn add flatpickr

<link rel="stylesheet" href="//unpkg.com/flatpickr/dist/flatpickr.min.css">
<!-- カスタムテーマ -->
<link rel="stylesheet" href="//unpkg.com/flatpick/dist/themes/airbnb.css">
<script src="//unpkg.com/flatpickr"></script>
<!-- 日本語の言語ファイル -->
<script src="//unpkg.com/flatpickr/dist/l10n/ja.js"></script>

<script>

flatpickr("#myInput", {
  locale: "ja" // 日本語を適応
});

</script>

// webpackのstyle-loader & css-loaderが必要
require("flatpickr/dist/flatpickr.min.css");
// カスタムテーマを適応する場合
// require("flatpickr/dist/themes/dark.css");
import flatpickr from "flatpickr";
// 日本語の言語ファイル
const ja = require("flatpickr/dist/l10n/ja").default.ja;

flatpickr.localize(ja); // 日本語化

// write somthing

<!-- ブラウザ上、CDN軽油で読み込む場合 -->
<link rel="stylesheet" href="//unpkg.com/flatpick/dist/themes/airbnb.css">
<link rel="stylesheet" href="//unpkg.com/flatpick/dist/themes/confetti.css">
<link rel="stylesheet" href="//unpkg.com/flatpick/dist/themes/dark.css">
<link rel="stylesheet" href="//unpkg.com/flatpick/dist/themes/light.css">
<link rel="stylesheet" href="//unpkg.com/flatpick/dist/themes/material_blue.css">
<link rel="stylesheet" href="//unpkg.com/flatpick/dist/themes/material_green.css">
<link rel="stylesheet" href="//unpkg.com/flatpick/dist/themes/material_orange.css">
<link rel="stylesheet" href="//unpkg.com/flatpick/dist/themes/material_red.css">
<!-- ローカルから呼び出す場合 -->
<link rel="stylesheet" href="/flatpick/dist/themes/airbnb.css">

// loaderを通して読み込む場合
require("flatpickr/dist/themes/airbnb.css");
require("flatpickr/dist/themes/confetti.css");
require("flatpickr/dist/themes/dark.css");
require("flatpickr/dist/themes/light.css");
require("flatpickr/dist/themes/material_blue.css");
require("flatpickr/dist/themes/material_green.css");
require("flatpickr/dist/themes/material_orange.css");
require("flatpickr/dist/themes/material_red.css");

<!-- ベースとなるインプットフォーム -->
<input class="input" id="myInput" type="text" />

minDate : 選択可能な最小の日付

// 1: 設定無しの動作
flatpickr("#myInput", {});

// 2: 当日以前を選択不可に
flatpickr("#myInput", {
  minDate: "today"
});

disable : [] : 選択不可な日付

// 3: 土日を選択不可に
flatpickr("#myInput", {
  disable: [
    function(date) {
      var day = date.getDay()
      // 0:日, 1:月, 2:火, 3:水, 4:木, 5:金, 6:土
      return (day === 0 || day === 6);
    }
  ],
  minDate: "today"
});

// 4: 指定日を選択不可に
flatpickr("#myInput", {
  // 選択不可にする期間の設定
  disable: [
    {
      from: "2017-10-12", // 開始日
      to: "2017-10-16" //終了日
    },
    "2017-10-28" // 日付のみ
  ],
  minDate: "today" // スタート日
});

locale: { firstDayOfWeek : num } : 表示する曜日の順番

enable: { } : 選択可能な日付

// 5: 曜日の表示を切り替え
// 月曜日を週始めに表示切り替え
flatpickr("#myInput", {
  disable: [
    function(date) {
      // 土日は選択不可に
      var day = date.getDay()
      return (day === 0 || day === 6);
    }
  ],
  locale: {
    firstDayOfWeek: 1 // 月曜日を週の始めに設定
  },
  minDate: "today" // スタート日
});

// 6: 指定日のみ選択可能に
// 2017年10月12日 ~ 16日のみ選択可
flatpickr("#myInput", {
      enable: [
        {
          from: "2017-10-12",
          to: "2017-10-16"
        },
      ],
      minDate: "today"
    });

mode : "モード名" ( range, multiple )

weekNumbers : bool : 週番号

// 7: 指定日 ~ 指定日までの範囲
flatpickr("#myInput", {
  mode: "range",
  minDate: "today",
});

//  8: 週番号を表示
flatpickr("#myInput", {
  weekNumbers: true,
  minDate: "today",

});

// 9: 各種イベント
flatpickr("#myInput", {
  defaultDate: "2017-09-21", // デフォルトの日付
  onReady: function() {
    // カレンダーがロードされた時の処理
  },
  onValueUpdate: function(selectedDates, dateStr) {
    // 値が変更された時の処理
    alert('日付が ' + dateStr + ' に変更されました !');

  },
  onClose: function(selectedDates, dateStr) {
    // 日付を選択し終えた時の処理
  },
  onChange: function(selectedDates, dateStr) {
    // 日付を変更し終えた時の処理

    // selectedDates : Fri Sep 22 2017 00:00:00 GMT+0900 (JST)
    // dateStr : 2017-09-22
  }
});

// 10: タイムピッカー
flatpickr("#myInput", {
  enableTime: true, // タイムピッカーを有効
  noCalendar: true, // カレンダーを非表示
  enableSeconds: false, // '秒' を無効
  time_24hr: false, // 24時間表示
  dateFormat: "H:i", // 時間のフォーマット "時:分"
  // タイムピッカーのデフォルトタイム
  // 下記の場合はタイムピッカーを開いた時に '9:00'で表示
  defaultHour: 9, // 時
  defaultMinute: 0, // 分
  // defaultDate: '9:00' // 時間を予めセットする時の設定
});