【jQuery UI】 datepickerの日付フォーマットを変更する方法

jquery

色々なサイトで見かけるようになった、「jQuery UI」のdatepickerの日付フォーマットを変更する方法を紹介します。

[スポンサーリンク]

datepickerの日付フォーマットですが、デフォルトでは「dd/mm/yy」となっています。
日本では、あまり馴染みがないフォーマットなので、「yy/mm/dd」に変更する方法を紹介していきます。

ユーザビリティ向上のために、datepickerを積極的に使いましょう!

この章でやること

datepickerのフォーマットを「yy/mm/dd」に設定します。

datepickerの日付フォーマットを変更するサンプルソース

jQuery部分のソースコード

<script type="text/javascript">
        $(function(){
             $("#datepickerFrom").datepicker();
             $("#datepickerFrom").datepicker("option", "dateFormat", 'yy/mm/dd');
        });
</script>

HTML部分のソースコード

<body bgcolor="#e2e2e2">
    <form>
        <h5 id="target_title">日付</h5>
        <input type="text" id="datepickerFrom" placeholder="クリックして下さい"/>
    </form>
</body>

デモ

実際に動かすことが出来ます

解説

datepickerは、4行目のように、optionを指定することが出来ます。
"/"を使わず、他の記号(例えばハイフン"-"とか)を使って日付を表現することも可能です。

日付フォーマット以外の変更も、ここのoptionを指定することによって変更が可能となります。
(例えば、カレンダーの出現形式や、何か月分のカレンダーを表示する等の設定がオプションで指定できます。)

さいごに

datepickerのオプションを変更する方法はいかがでしたか?
今回は、日付フォーマットのdateFormatオプションを変更する方法を紹介しました。

もちろん他のオプションも変更することは可能です。
例えば、たまに見かけるのですが、一定期間の日数は選択できるけど、一定期間外の日にちは選択不可の状態になっているカレンダーもあります。
これも、optionを指定して制御しています。
具体的にはminDatemaxDateのオプションを使って制御しています。

個人的には、dateFormatと同じくらいの使用頻度で、minDateとmaxDateを使っています。
次回は、minDateとmaxDateを使って、入力可能な日数を指定する方法も紹介していきたいと思います。

datepicker意外と面白いので積極的に活用しましょう!
それでは!