JavaScript
UI
カレンダー
DatePicker
pickadate.js

UIのイケているdatepickerライブラリpickadate.jsが最高だった(demo有)

datepickerって何がいい??

昨年末からWebアプリケーションを作成していて、dateapickerの機能が必要になり、どのライブラリを使おうかと、色々と調べていたところ、pickadate.jsのdatepickerが最高だったので、概要と簡単な使い方を共有したいと思います。

datepickerライブラリのまとめ

結局、どのdatepickerが一番使い勝手がよいのか - @knt45 さん
※参考にさせてもらいました:bow_tone2:

pickadate.jsの概要

スクリーンショット 2018-01-12 7.53.16.png
【実装できるdatepicker】
スクリーンショット 2018-01-12 7.53.03.png

インストール

pickadate.js

インストールを実行すると以下のファイル群がインストールされ、その中から以下のjsファイルと、cssファイルを読み込ませます。
スクリーンショット-2018-01-12-8.03.09.jpg

pickadate.jsデモ

デフォルトdatepickerデモ

ezgif-4-cd54cb2f48.gif

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pickadate.js demo</title>

<!-- 最新 -->
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/default.css">
<link rel="stylesheet" href="assets/css/default.date.css">
<!-- クラクシック版 -->
<!-- <link rel="stylesheet" href="assets/css/classic.css">
<link rel="stylesheet" href="assets/css/classic.date.css"> -->

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="assets/pickadate/picker.js"></script>
<script src="assets/pickadate/picker.date.js"></script>
<script src="assets/pickadate/legacy.js"></script>
<script src="assets/pickadate/lang-ja.js"></script>  <!-- 日本語化 -->
<script src="assets/js/main.js"></script>

</head>
  <body>
    <section class="section">
      <div class="section__block section__block--scoped">
        <h3>demo</h3>                  
        <fieldset class="fieldset fieldset--demo">
          <div class="fieldset__wrapper">
            <input id="demo" class="fieldset__input js__datepicker" type="text" placeholder="Try me&hellip;">
          </div>
        </fieldset>
      </div>
    </section>
  </body>
</html>
main.js
$(function() {
    $('#demo').pickadate();
});

日本語対応datepicker

ezgif-4-14c1ef3061.gif

日本語化したい方は以下のjsファイルを読み込ませれば、日本語のdatepickerが出力できます。フォーマット等もかなり自分ようにカスタマイズすることができます。

lang-ja.js
jQuery.extend( jQuery.fn.pickadate.defaults, {
    monthsFull: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
    monthsShort: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
    weekdaysFull: [ '日曜' , '月曜', '火曜', '水曜', '木曜', '金曜', '土曜'],
    weekdaysShort: [ '日曜' ,  '月曜', '火曜', '水曜', '木曜', '金曜', '土曜'],
    today: '本日',
    clear: 'キャンセル',
    format: 'yyyy年mm月dd日'
});

ライブラリの詳しい使い方については、オフィシャルのHPにも記載されているので、参考にしてみください。

デモページ & Github

デモページ

http://tech-portfolio.org/demo/pickadate

Github(ソース)

https://github.com/FujiyamaYuta/pickadate_demo

参考

JQueryプラグインまとめ
【pickadate.js】シンプルだけど高機能な日付カレンダー編