PikaDay.jsメモ

PikaDay.jsはカレンダー機能を入力フォームに付けるためのプログラムです。
Moment.jsに依存しています。
また、コードが読みやすいと感じました。  


基本的な使い方

<!-- 付属のCSSファイル  -->
<link rel="stylesheet" href="pikaday.css" type="text/css" />
<!-- 対象となる要素  -->
<input type="text" id="datepicker">
<script src="moment.js"></script>
<script src="pikaday.js"></script>
<!-- 初期化  -->
<script>
    var picker = new Pikaday({ field: document.getElementById('datepicker') });
</script>

デモ


設定するパラメータ

    var picker = new Pikaday({ 
        //対象となる要素
        field: document.getElementById('datepicker'),
        //カレンダーを表示する際に起点になる要素
        trigger: document.getElementById('datepicker'),
        //fieldに指定した要素にフォーカスした際に自動的にカレンダーが表示されるか
        bound: true,
        //カレンダーが表示される位置(top right, bottom right)
        position: "bottom left",
        //出力する際のフォーマット(Moment.jsの形式)
        format: 'YYYY/MM/DD',
        //最初に表示された際に選択されている日付
        defaultDate: new Date('2012-12-12'),
        //初期化する際にdefaultDateで指定された日付を入力フォームに入力しておくか
        setDefaultDate: true,
        //カレンダーで表示する最初の曜日(0: Sunday, 1: Monday, etc)
        firstDay: 1,
        //選択することができる最小の日付
        minDate: new Date('1999-12-10'),
        //選択することができる最大の日付
        maxDate: new Date('2015-12-24'),
        //プルダウンで選択することができる日付の範囲(ex 10 or [2000, 2020])
        yearRange: [1999, 2015],
        //カレンダーの日付の表示順序を逆にするか
        isRTL: false,
        //国際化
        i18n: {
                previousMonth : '前の月',
                nextMonth     : '次の月',
                months        : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
                weekdays      : ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
                weekdaysShort : ['日','月','火','水','木','金','土']
        },
        //カレンダーの年の後に表示する文字列
        yearSuffix: '年',
        //年の後に月を表示するか
        showMonthAfterYear: true,
        //日付を選択したときの処理
        onSelect: function() {alert("onSelect"); console.dir(this);},
        //カレンダーを表示したときの処理
        onOpen: function() {alert("onOpen"); console.dir(this);},
        //カレンダーを閉じたときの処理
        onClose: function() {alert("onClose"); console.dir(this);},
        //月を変更したときの処理
        onDraw: function() {alert("onDraw"); console.dir(this);},
    });

デモ


メソッド

picker.toString(フォーマット)
選択されている日付をMoment.jsのスタイルの日付フォーマットを指定して、それに沿った文字列を返す。
picker.getDate()
選択されている日付のDateオブジェクトを返す。
picker.setDate(日付の文字列)
指定した日付の文字列の日付を選択する。
picker.getMoment()
選択されている日付のMomentオブジェクトを取得する。
picker.setMoment(Momentオブジェクト)
指定したMomentオブジェクトの日付を選択する。
picker.gotoToday()
今日の日付をカレンダーに表示する。
picker.gotoMonth(月)
指定した月を表示する。(1月は0)
picker.nextMonth(),picker.prevMonth()
先月、翌月を表示する。
picker.gotoYear(年)
指定した年を表示する。
picker.setMinDate(Dateオブジェクト), picker.setMaxDate(Dateオブジェクト)
指定したDateオブジェクトの日付を選択可能な日付の最小、最大にする。
picker.isVisible()
カレンダーが表示されているか
picker.show()
カレンダーを表示する。
picker.hide()
カレンダーを非表示にする。
picker.adjustPosition()
カレンダーの表示する場所を調整する。
picker.destroy()
カレンダーのDOMを削除する。



Flatpickrメモ