ユーザ用ツール

サイト用ツール


it技術:web開発:pikaday

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

次のリビジョン
前のリビジョン
it技術:web開発:pikaday [2018/03/29 16:40] – 作成 yajuadminit技術:web開発:pikaday [2018/08/22 11:02] (現在) yajuadmin
行 1: 行 1:
 ====== Pikaday ====== ====== Pikaday ======
 ===== 概要 ===== ===== 概要 =====
-Pikaday.jsは、JavaScript用カレンダー型の日付選択コンポーネント(Datepicker)となります。 +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を取得する。 2018/03/29時点ではNugetのPikaday ver 1.4と少し古いため、[[https://github.com/dbushell/Pikaday/releases|github]]から最新のver 1.6.1を取得する。
行 11: 行 11:
 [[https://qiita.com/akuden/items/b26bf6880c8352888945|Pikaday.js 祝日対応とMoment不使用フォーマット整形]] [[https://qiita.com/akuden/items/b26bf6880c8352888945|Pikaday.js 祝日対応とMoment不使用フォーマット整形]]
  
 +基本的には、Moment.js のローカル版を使用する。
 +
 +=== 下記はMoment.jsを使用しない場合 ===
 今回は書式が決まっているため、Pikaday.jsを直接書き換えてしまいます。 今回は書式が決まっているため、Pikaday.jsを直接書き換えてしまいます。
 <code javascript Pikaday.js> <code javascript Pikaday.js>
行 61: 行 64:
 }, },
 </code> </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>
 +
  
 === 土日の色を変更する === === 土日の色を変更する ===
行 87: 行 122:
 } }
 </code> </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?400|}}+{{:it技術:web開発:pikaday.png}}
it技術/web開発/pikaday.1522309209.txt.gz · 最終更新: 2018/03/29 16:40 by yajuadmin