oyamazaki.dev

最近お気に入りで勝手に仕事で使ってるフロントエンド（CSS）フレームワークUIkitの中のDatepicker（カレンダー）コンポーネントについての小ネタです。

 

まずはUIkitのURLです。

UIkit
http://getuikit.com/

この中の下記ページのコンポーネントについてです。何をやるかというと日本語のページでも違和感ない程度に使うためのカスタマイズです。といあえず下記のページをそのまま参考にすると、カレンダーの月と曜日は英語表記で、さらに年と月が逆になります。

Datepicker component – UIkit documentation
http://getuikit.com/docs/datepicker.html

 

そこで、Markupを以下に変更します。

<form class="uk-form">
<input type="text" data-uk-datepicker="{format:'YYYY/MM/DD', weekstart: 0, i18n:{ months:['1','2','3','4','5','6','7','8','9','10','11','12'], weekdays:['日','月','火','水','木','金','土']}}">
</form>

 

そして、適当なところにscriptで挟んで以下を追加して下さい（readyも適当にお願いします。）。やってることは、カレンダー更新イベント発生時に、年と月を入れ替えてそれぞれの後ろに年と月のテキストを足してるだけです。上記のDatepickerのページでF12を押してコンソールに以下のコードを貼り付けて実行したらどうなるか分かります。

$(function() {
  $('[data-uk-datepicker]').on('update.uk.datepicker', function(e, children) {
    $(".uk-datepicker-heading .uk-form-select").eq(1).prependTo($(".uk-datepicker-heading"));
    $(".uk-datepicker-heading .uk-form-select").eq(0).after("年");
    $(".uk-datepicker-heading .uk-form-select").eq(1).after("月");
  });
});

なお、以下の様にやっちゃうと正常に動かなくなりますのでご注意下さい……

var datepicker = $(".uk-datepicker-heading .uk-form-select");