「datepicker」を日本語化する

こんにちわ、開発者のⅠです。

前回紹介したdatepickerについて、各表記をデフォルトの”英語”から”日本語”に変更してみたいと思います。

それでは、datepickerの各プロパティに対して表示させたいもの(日本語)を設定してあげましょう。



/* 日本語化してみよう */

jQuery(function($){
    $.datepicker.regional ['ja'] = {
        closeText : '閉じる',
        prevText : '<前',
        nextText : '次>',
        currentText : '今日',
        monthNames : ['1月',　'2月',　'3月',　'4月',　'5月',　'6月',　
        '7月',　'8月',　'9月',　'10月',　'11月',　'12月'],
        monthNamesShort : ['1月',　'2月',　'3月',　'4月',　'5月',　'6月',　
        '7月',　'8月',　'9月',　'10月',　'11月',　'12月'],
        dayNames : ['日曜日',　'月曜日',　'火曜日',　'水曜日',　'木曜日',　'金曜日',　'土曜日'],
        dayNamesShort : ['日',　'月',　'火',　'水',　'木',　'金',　'土'],
        dayNamesMin : ['日',　'月',　'火',　'水',　'木',　'金',　'土'],
        dateFormat : 'yy/mm/dd',
        firstDay : 0,
        isRTL : false,
        showMonthAfterYear : true,
        yearSuffix: '年'};

    $.datepicker.setDefaults($.datepicker.regional['ja']);
});


これで、カレンダーの表記が日本語に変化しているはずです。
この他にも、日本語化対応だけではなく、特定の部分の表示・非表示を切り替えることもプロパティを指定することで可能です。

それでは、今回はここまでです。
次回、またお会いしましょう。

Read More

jQuery UI の「datepicker」とは？

こんにちわ、開発者のⅠです。
今回は、datepickerについてお話したいと思います。

このdatepickerは、カレンダーを表示させて日付を選択させるUIを実現するために用いるjQuery(Javascriptのライブラリ)の一つです。

まず利用するためには、j Query 本体を読み込む必要がありますが、自分のローカルに保存する必要はなく、以下の様にソースに直接書き込むことでインターネット経由で読み込むことが可能です。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


ただし、デフォルトの状態では年や月などの表記はすべて英語になってしまいます……。
デザインを変更するには、その設定を記述する必要が有りますが、その話はまた次回にしたいと思います。

それでは、また！

※参考ページ

Read More