Pikaday

概要

JavaScript用カレンダー型の日付選択(Datepicker)となります。
公式サイト：https://github.com/dbushell/Pikaday

導入

2018/03/29時点ではNugetのPikaday ver 1.4と少し古いため、githubから最新のver 1.6.1を取得する。

日本向けにカスタマイズ

日付フォーマット

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

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

下記はMoment.jsを使用しない場合

今回は書式が決まっているため、Pikaday.jsを直接書き換えてしまいます。

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;
},

カレンダーの日本語化

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

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

※各設定の意味は、PikaDay.jsメモを参考にする。

例えば、firstDayを1にすると月曜始まりのカレンダーとなる。工場を持つ企業などで使われている。

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 : ['日','月','火','水','木','金','土']
},

Moment.js のローカル版を使用する場合

「moment.locale('ja');」を実行すれば、monthsとweekdaysとweekdaysShortは、Momentから取得できる。

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
}

土日の色を変更する

CSS3の擬似クラスを使用して、色を変更する。handsontable用のcssファイルに含めて置き換えてもいいし、外出しにしてもいい。
何番目系の便利な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;
}

月曜始まり

.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;
}

八寿のナレッジベース

目次