====== Pikaday ======
===== 概要 =====
JavaScript用カレンダー型の日付選択(Datepicker)となります。\\
公式サイト：https://github.com/dbushell/Pikaday
===== 導入 =====
2018/03/29時点ではNugetのPikaday ver 1.4と少し古いため、[[https://github.com/dbushell/Pikaday/releases|github]]から最新のver 1.6.1を取得する。

===== 日本向けにカスタマイズ =====
==== 日付フォーマット ====
Pikaday単体では日付フォーマット変更オプションは用意されておらず、'Mon Jan 01 2018'という形式でしか出力できません。カスタマイズには自分でフォーマット処理を追加するか、公式推奨のMoment.jsを使用する必要があります。\\
[[https://qiita.com/akuden/items/b26bf6880c8352888945|Pikaday.js 祝日対応とMoment不使用フォーマット整形]]

基本的には、Moment.js のローカル版を使用する。

=== 下記はMoment.jsを使用しない場合 ===
今回は書式が決まっているため、Pikaday.jsを直接書き換えてしまいます。
<code javascript Pikaday.js>
config: function(options)
{
    opts.toString = function (date, format) {
        format = format.replace(/YYYY/g, date.getFullYear());
        format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
        format = format.replace(/DD/g, ('0' + date.getDate()).slice(-2));

        return format;
    }
    
    return opts;
},
</code>

==== カレンダーの日本語化 ====
WEBでExcelのようなスプレッドシートライクな入力を可能にしてくれるJavaScriptライブラリ「Handsontable(ハンズオンテーブル)」では、内部でPicaday.jsを改良して内包している。

Handsontableによるカレンダーの日本語化とデザインを合わせるため、変更が必要となる。\\
Pikaday.js自体をプログラム側で設定を変更出来るようにはなっているが、今回はPikaday.js自体を修正する。

※各設定の意味は、[[https://38elements.github.io/2014/02/02/pikadayjs.html|PikaDay.jsメモ]] を参考にする。

例えば、firstDayを1にすると月曜始まりのカレンダーとなる。工場を持つ企業などで使われている。
<code javascript Pikaday.js>
// the default output format for `.toString()` and `field` value
format: 'YYYY/MM/DD',

// first day of week (0: Sunday, 1: Monday etc)
firstDay: 0,
 
// Additional text to append to the year in the calendar title
yearSuffix: '年',
 
// Render the month after year in the calendar title
showMonthAfterYear: true,
 
// Render days of the calendar grid that fall in the next or previous month
showDaysInNextAndPreviousMonths: true,
 
// internationalization
i18n: {
    previousMonth : '前月',
    nextMonth     : '次月',
    months        : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
    weekdays      : ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
    weekdaysShort : ['日','月','火','水','木','金','土']
},
</code>

=== Moment.js のローカル版を使用する場合 ===
「moment.locale('ja');」を実行すれば、monthsとweekdaysとweekdaysShortは、Momentから取得できる。

<code javascript>
moment.locale('ja');

// the default output format for `.toString()` and `field` value
format: 'YYYY/MM/DD',

// first day of week (0: Sunday, 1: Monday etc)
firstDay: 0,
 
// Additional text to append to the year in the calendar title
yearSuffix: '年',
 
// Render the month after year in the calendar title
showMonthAfterYear: true,
 
// Render days of the calendar grid that fall in the next or previous month
showDaysInNextAndPreviousMonths: true,
 
// internationalization
i18n: {
    previousMonth: '前月',
    nextMonth: '次月',
    months: moment.localeData()._months,
    weekdays: moment.localeData()._weekdays,
    weekdaysShort: moment.localeData()._weekdaysShort
}
</code>


=== 土日の色を変更する ===
CSS3の擬似クラスを使用して、色を変更する。handsontable用のcssファイルに含めて置き換えてもいいし、外出しにしてもいい。\\
[[https://qiita.com/ituki_b/items/62a752389385de7ba4a2|何番目系の便利なCSSまとめ]]

<code css 日曜始まり>
.pika-lendar th:first-child,
.pika-lendar td:first-child .pika-button {
    color: #f00;
}
.pika-lendar th:last-child,
.pika-lendar td:last-child .pika-button {
    color: #00f;
}
</code>

<code css 月曜始まり>
.pika-lendar th:nth-last-child(2),
.pika-lendar td:nth-last-child(2) .pika-button {
    color: #00f;
}
.pika-lendar th:last-child,
.pika-lendar td:last-child .pika-button {
    color: #f00;
}
</code>
=== 祝日等の色を変更する ===
  * [[http://tosh.hatenablog.jp/entry/2016/12/08/092028|Pikaday.jsの土日と指定日（祝日etc）の色分け表示]]
  * [[https://qiita.com/akuden/items/b26bf6880c8352888945|Pikaday.js 祝日対応とMoment不使用フォーマット整形]]

=== 変更後イメージ ===
{{:it技術:web開発:pikaday.png}}