it技術:web開発:pikaday
差分
このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン | ||
it技術:web開発:pikaday [2018/03/29 16:40] – 作成 yajuadmin | it技術:web開発:pikaday [2018/08/22 11:02] (現在) – yajuadmin | ||
---|---|---|---|
行 1: | 行 1: | ||
====== Pikaday ====== | ====== Pikaday ====== | ||
===== 概要 ===== | ===== 概要 ===== | ||
- | Pikaday.jsは、JavaScript用カレンダー型の日付選択コンポーネント(Datepicker)となります。 | + | JavaScript用カレンダー型の日付選択(Datepicker)となります。\\ |
+ | 公式サイト:https:// | ||
===== 導入 ===== | ===== 導入 ===== | ||
2018/ | 2018/ | ||
行 11: | 行 11: | ||
[[https:// | [[https:// | ||
+ | 基本的には、Moment.js のローカル版を使用する。 | ||
+ | |||
+ | === 下記はMoment.jsを使用しない場合 === | ||
今回は書式が決まっているため、Pikaday.jsを直接書き換えてしまいます。 | 今回は書式が決まっているため、Pikaday.jsを直接書き換えてしまいます。 | ||
<code javascript Pikaday.js> | <code javascript Pikaday.js> | ||
行 61: | 行 64: | ||
}, | }, | ||
</ | </ | ||
+ | |||
+ | === Moment.js のローカル版を使用する場合 === | ||
+ | 「moment.locale(' | ||
+ | |||
+ | <code javascript> | ||
+ | moment.locale(' | ||
+ | |||
+ | // the default output format for `.toString()` and `field` value | ||
+ | format: ' | ||
+ | |||
+ | // 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: | ||
+ | |||
+ | // Render days of the calendar grid that fall in the next or previous month | ||
+ | showDaysInNextAndPreviousMonths: | ||
+ | |||
+ | // internationalization | ||
+ | i18n: { | ||
+ | previousMonth: | ||
+ | nextMonth: ' | ||
+ | months: moment.localeData()._months, | ||
+ | weekdays: moment.localeData()._weekdays, | ||
+ | weekdaysShort: | ||
+ | } | ||
+ | </ | ||
+ | |||
=== 土日の色を変更する === | === 土日の色を変更する === | ||
行 87: | 行 122: | ||
} | } | ||
</ | </ | ||
+ | === 祝日等の色を変更する === | ||
+ | * [[http:// | ||
+ | * [[https:// | ||
=== 変更後イメージ === | === 変更後イメージ === | ||
- | {{: | + | {{: |
it技術/web開発/pikaday.1522309209.txt.gz · 最終更新: 2018/03/29 16:40 by yajuadmin