A refreshing JavaScript Datepicker

• 軽量 (minified and gzipped 5kb less)
• 依存なし (but plays well with Moment.
• Modular CSS classes for easy styling

Try Pikaday Demo →

Production ready? バージョン1.0.0以降、ピカデーは安定しており、実運用で使用されています。 しかし、もしバグを見つけたり、機能の要望があれば、GitHubの課題追跡システム（issue tracker）に投稿してください。changelog

Installation

PikadayはNPMパッケージとしてインストールできます:

npm install pikaday

またはCDNに直接リンクします：

<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>

Styles

さらにPikaday CSSファイルを含めることが必要です。 このステップは、Pikadayがどのようにインストールされたかに依存します。 NPMからインポートする：

@import './node_modules/pikaday/css/pikaday.css';

またはCDNにリンクする：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">

使用方法

Pikadayを入力フィールドにバインドすることができます。

<input type="text">

JavaScriptをドキュメントの最後に追加します:

<script src="pikaday.js"></script><script> var picker = new Pikaday({ field: document.getElementById('datepicker') });</script>

jQueryを使用している場合、最初の要素のみを渡すことを確認します。

var picker = new Pikaday({ field: $('#datepicker') });

Pikaday インスタンスがフィールドにバインドされていない場合、要素をどこにでも追加できます:

var field = document.getElementById('datepicker');var picker = new Pikaday({ onSelect: function(date) { field.value = picker.toString(); }});field.parentNode.insertBefore(picker.el, field.nextSibling);

Formatting

デフォルトでは、日付は標準 JavaScript Date オブジェクトを使ってフォーマットおよびパースされます。Moment.js がスコープ内で利用可能な場合、入力値のフォーマットと解析に使用されます。 設定に追加の format オプションを渡すことができ、それは moment コンストラクタに渡されます。完全なバージョンは moment.js のサンプルを参照してください。

<input type="text" value="9 Oct 2014"><script src="moment.js"></script><script src="pikaday.js"></script><script> var picker = new Pikaday({ field: document.getElementById('datepicker'), format: 'D MMM YYYY', onSelect: function() { console.log(this.getMoment().format('Do MMMM YYYY')); } });</script>

より高度で柔軟な書式設定を行うには、独自の toString 関数を設定に渡すと、日付オブジェクトをフォーマットするために使用されます。 もし、返すフォーマットされた文字列が Date.parse メソッド (または利用可能であれば moment) によって正しくパースできない場合、 config で独自の parse 関数を提供しなければなりません。 この関数はフォーマットされた文字列とformat:

parse(dateString, format = 'YYYY-MM-DD')

var picker = new Pikaday({ field: document.getElementById('datepicker'), format: 'D/M/YYYY', toString(date, format) { // you should do formatting based on the passed format, // but we will just return 'D/M/YYYY' for simplicity const day = date.getDate(); const month = date.getMonth() + 1; const year = date.getFullYear(); return `${day}/${month}/${year}`; }, parse(dateString, format) { // dateString is the result of `toString` method const parts = dateString.split('/'); const day = parseInt(parts, 10); const month = parseInt(parts, 10) - 1; const year = parseInt(parts, 10); return new Date(year, month, day); }});

Configuration

上の例で示したようにPikadayには多くの便利なオプションが用意されています。

• field datepicker をフォーム フィールドにバインドする
• trigger datepicker を開くトリガーに別の要素を使用する。 トリガーの例を参照してください (デフォルトは field)
• bound field フォーカス時に日付ピッカーを自動的に表示/隠す (field が設定されている場合はデフォルト true)
• ariaLabel data-attribute with an aria assistance text (bound が設定されているときのみ適用)
• position form field に対する日付ピッカー位置、例えば、…g.: top right, bottom right 注意: 自動調整は、datepicker がビューポートの外に表示されるのを避けるために行われるかもしれません。 True）
• container カレンダーをレンダリングする DOM ノード、コンテナの例を参照（デフォルト：未定義）
• format .toString() および field 値のデフォルト出力形式（要 Moment.NET）
• container は、ビューポート内で日付ピッカーを再配置しないように設定できます。
• formatStrict moment の厳密な日付解析のデフォルトフラグ (カスタムフォーマットには Moment.js が必要)
• toString(date, format) カスタムフォーマットのために使用される関数です。 この関数は、moment.
• parse(dateString, format) 入力文字列をパースして日付オブジェクトを取得する関数より優先されます。 この関数は moment.
• defaultDate 最初に開いたときに表示する日付
• setDefaultDate 論理値 (true/false). defaultDate を初期選択値とする
• firstDay 曜日 (0: 日曜日、 1: 月曜日など)
• minDate 最小/最古日付（ネイティブ日付オブジェクト – e. coliが必要）を選択することができるようになる。
• maxDate 選択できる最大/最小の日付 (これはネイティブの日付オブジェクトでなければなりません – 例: new Date() または moment().toDate())
• disableWeekends 土日の選択を無効にする
• disableDayFn コールバック関数に、ビュー内の各曜日の日付オブジェクトを渡します。
• yearRange 両側の年数 (例: 10) または上限/下限の配列 (例:
• ) を返さなければならない。 )
• showWeekNumber ISO 週番号を行の先頭に表示 (デフォルト false)
• pickWholeWeek 日ではなく週全体を選択 (デフォルト false)
• isRTL 右から左にカレンダーを反転させる。左言語
• i18n 月名と曜日名の言語デフォルト (下記の国際化を参照)
• yearSuffix タイトルで年に追加する追加テキスト
• showMonthAfterYear タイトルで年の後に月を表示する (デフォルト false)
• showDaysInNextAndPreviousMonths 次または前の月のカレンダーグリッドの日にちを表示する (デフォルト。) false)
• enableSelectionDaysInNextAndPreviousMonths 翌月または前月の日付を選択する (デフォルト: false)
• numberOfMonths カレンダーの表示数
• mainCalendar numberOfMonths が使われている場合、メインカレンダーがどこにあるかを選択できるようにします（デフォルト left、right に設定することも可能）。 最初の表示、または選択した日付がまだ表示されていない場合のみ使用されます
• events 通常の日と区別したい日付の配列 (例. )
• theme 異なるテーマのスタイリングのフックとして使用できる classname を定義します。 テーマの例を参照 (デフォルト null)
• blurFieldOnSelect 日付が選択されたときにフィールドをぼかすかどうかを定義 (デフォルト true)
• onSelect 日付選択時のコールバック関数
• onOpen ピッカーが可視化する時のコールバック関数 onClose ピッカーが隠されたときのコールバック関数
• onDraw ピッカーが新しい月を描いたときのコールバック関数
• keyboardInput enable keyboard input support (default true)

Styling

if reposition configuration-… – –

– – –

• top-aligned
• left-aligned
• right-aligned
• bottom-aligned

DOM要素は通常2つのCSSクラス（例: CSS-ref.DM）を持っているので注意してください。

jQuery Plugin

Pikaday の通常版は jQuery を必要としませんが、お好みであれば jQuery プラグインがあります (リポジトリの plugins/pikaday.jquery.js を参照してください)。 このバージョンは当然 jQuery を必要とし、他のプラグインと同様に使用できます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="pikaday.js"></script><script src="plugins/pikaday.jquery.js"></script><script>// activate datepickers for all elements with a class of `datepicker`$('.datepicker').pikaday({ firstDay: 1 });// chain a few methods for the first datepicker, jQuery style!$('.datepicker').eq(0).pikaday('show').pikaday('gotoYear', 2042);</script>

AMD サポート

モジュール式のスクリプトローダーを使っているなら、Pikaday はグローバルオブジェクトに縛られないので、構築プロセスにうまくフィットするでしょう。 他のモジュールと同様にPikadayをrequireすることができます。完全版はAMDの例を参照してください。

require(, function(Pikaday) { var picker = new Pikaday({ field: document.getElementById('datepicker') });});

同じことが、上記のjQueryプラグインにもあてはまります。完全版はjQuery AMDの例を参照してください。

require(, function($) { $('#datepicker').pikaday();});

CommonJS module support

CommonJS compatible environmentを使っていれば、pikadayを読み込むためにrequire functionを使用することができます。

var pikaday = require('pikaday');

必要なモジュールをすべてBrowserifyでバンドルし、Moment.jsを使用しない場合はignoreオプションを指定します。

browserify main.js -o bundle.js -i moment

Ruby on Rails

Railsを使っているならPikaday gemをチェックアウトするようにしてください。

Methods

作成後の日付ピッカーを制御できます:

var picker = new Pikaday({ field: document.getElementById('datepicker') });

Get and set date

picker.toString('YYYY-MM-DD')

選択した日付を文字列形式で取得します。 Moment.jsが存在する場合（推奨）、PikadayはMomentが理解できる任意のフォーマットを返すことができます。また、独自のtoString関数を用意して、自分でフォーマットを行うことも可能です。

momentオブジェクトもtoString関数も提供されない場合、JavaScriptのデフォルトの.toDateString()メソッドが使用されます。

picker.getDate()

選択した日の基本JavaScript Dateオブジェクト、または選択がない場合はnullを返します。 これは、minDateとmaxDateのオプションが指定されていれば、その範囲内に制限されます。 オプションで、onSelect コールバックのトリガー (true) を防ぐために、2 番目のパラメーターとしてブール値を渡すことができ、日付を静かに設定できます。

picker.getMoment()

選択した日付の Moment.js オブジェクトを返します (Moment は Pikaday より前に読み込まれなければなりません)。

picker.setMoment(moment('14th February 2014', 'DDo MMMM YYYY'))

現在の選択項目をMoment.jsオブジェクトで設定します（詳細はsetDate参照）。

Clear and reset date

picker.clear()

pickerが結合されている入力をクリア、リセットします。

Change current view

picker.gotoDate(new Date(2014, 1))

特定の日付を見るために現在のビューを変更します。 この例では、2014年2月にジャンプします（月はゼロベースのインデックスです）。

picker.gotoToday()

Shortcut for picker.gotoDate(new Date())

picker.gotoMonth(2)

月ごとに現在の表示を変更します（0：1月、1：2月など）。

picker.nextMonth()picker.prevMonth()

次または前の月へ行きます（必要なら年を変更します）。

picker.gotoYear()

表示中の年を変更する。

picker.setMinDate()

選択できる最小/最古の日付を更新する。

picker.setMaxDate()

選択できる最大/最新の日付を更新する。

picker.setStartRange()

範囲の開始日を更新する。 2つのPikadayインスタンスを使用して日付範囲を選択する場合.

picker.setEndRange()

範囲終了日を更新する.

範囲終了日を更新する.

datepickerの表示と非表示

picker.isVisible()

trueまたはfalseを返します。

picker.show()

ピッカーを見えるようにする。

picker.adjustPosition()

ピッカーの位置を再計算して変更する。

picker.hide()

ピッカーが見えないようにする。

picker.destroy()

ピッカーを非表示にして、すべてのイベント リスナーを削除します – 後戻りできません！

国際化

デフォルトの i18n 設定フォーマットは次のようになります。

i18n: { previousMonth : 'Previous Month', nextMonth : 'Next Month', months : , weekdays : , weekdaysShort : }

あなたは 12 ヶ月および 7 週間を指定しなければなりません (省略形も使用できます)。 曜日は必ず日曜日を先頭にこの順序で指定してください。 必要に応じてfirstDayオプションで並び替えができます（0：日曜日、1：月曜日、など）。 また、右から左に読む言語のために、isRTL を true に設定することもできます。

Extensions

Timepicker

Pikaday は純粋な日付ピッカーです。 それは、時間帯を選ぶことをサポートしません。 しかし、Pikaday に時間のサポートを追加する努力がなされています。

You can use the work @owenmead did most recently at owenmead/PikadayA more simple time selection approach done by @xeeali at xeeali/Pikaday is based on version 1.0.2.0.Also @stas has a fork stas/Pikaday, but now quite old

Browser Compatibility

• IE 7+
• Chrome 8+
• Firefox 3.5+
• Safari 3+
• Opera 10.6+

Authors

• David Bushell https://dbushell.com @dbushell
• Ramiro Rikkert GitHub @RamRik

Thanks for the name.

@shoogledesigns に感謝します。