jQueryUI datepickerのsetDateにつきまして

投稿日: 2014/05/29

すき家のストは起こるのか！？

簡単にサクッとカレンダーを表示する時、よく使われるのは自分の経験だとjQueryUIのdatepickerなんですが、日付の書式変更とデフォルトの日付を表示する時にちょっとハマったので残しときます。

datepickerでデフォルトの日付をセットするには、setDateを使います。
参考：jQuery datepicker 初期日付を入れる方法 | gworks web site
datepickerの日付書式を変更するには、dateFormatを使います。
参考：【jQuery UI】 datepickerの日付フォーマットを変更する方法 | ジャイアントモリンキーのjavaテック

が、この組み合わせだとsetDateにセットする日付のフォーマットがYYYY-MM-DD (例)2014-05-29 だと、日付がおかしくなる現象に出くわして一瞬ファッキングタイムになりました。
結局、setDateに渡す日付のフォーマットをYYYY/MM/DD (例)2014/05/29にしたら上手く言ったんだけど超ファッ○。
だって、DBから日付を取ってくる時って大体こういう形式じゃないですか〜、わざわざフォーマット変えるの面倒じゃないっすか〜。

ソースはこんな感じ

<!-- input -->
<input type="text" name="date1" value="" id="test1"><br/>
<input type="text" name="date2" value="" id="test2">
<!-- input -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery-ui-i18n.min.js"></script>
<script>
$(function(){
    // うまくいく
    var $test1 = $("#test1");
    $test1.datepicker();
    $test1.datepicker("setDate", "2014/05/29"); // YYYY/MM/DD をセット
    $test1.datepicker("option", {
        "dateFormat": "yy-mm-dd"
    });
    
    // うまくいかない(意図しない日付がセットされる)
    var $test2 = $("#test2");
    $test2.datepicker();
    $test2.datepicker("setDate", "2014-05-29");  // YYYY-MM-DD をセット
    $test2.datepicker("option", {
        "dateFormat": "yy-mm-dd"
    });
});
</script>

と思っていたんですが、なんとびっくりoption設定の後にsetDateしたら上手くいきました。。え〜、うっそ〜ん。で、こんな記事を見つけました。
jQuery Datepickerのデフォルト日付 | ENTEREAL/エンタリアル
こちらの記事によると、

本家のドキュメントを(斜め読みではなく)丁寧に読んで行った所、setDateは、他のオプションとは違い、Methodsに分類されるもので、使い方が違うようなのです。
要するに、一度オプション等を設定しdatepickerを実行し、その後に改めて、setDateを実行すると良いのです。

との事でした。なるほど、オプション設定してからsetDateしろと。なるほど、ドキュメント嫁と。
ん〜、でも、YYYY/MM/DD をセットした時はなんで上手くいったんだろ。。
時間があればソースを見てみたい所。（←絶対やらないやつね）

まとめ

何はともあれ、setDate使う時はoptionの設定をしてから！

一応最終的なソース

簡単なsampleはこちら

<!-- input -->
<input type="text" name="date1" value="" id="test1"><br/>
<input type="text" name="date2" value="" id="test2"><br/>
<input type="text" name="date3" value="" id="test3">
<!-- input -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery-ui-i18n.min.js"></script>
<script>
$(function(){
    // 日本語にする
    $.datepicker.setDefaults($.datepicker.regional["ja"]);

    // うまくいく
    var test1date = getDate('/');
    var $test1 = $("#test1");
    $test1.datepicker();
    $test1.datepicker("setDate", test1date); // YYYY/MM/DD をセット
    $test1.datepicker("option", {
        "dateFormat": "yy-mm-dd"
    });
    
    // うまくいかない
    var test2date = getDate('-');
    var $test2 = $("#test2");
    $test2.datepicker();

    // オプション設定の前にsetDateするとうまくいかない(意図しない日付がセットされる)
    $test2.datepicker("setDate", test2date);  // YYYY-MM-DD をセット

    $test2.datepicker("option", {
        "dateFormat": "yy-mm-dd"
    });
    $("#test-2-date").html(test2date);

    // うまくいく
    var test3date = getDate('-');
    var $test3 = $("#test3");
    $test3.datepicker();
    $test3.datepicker("option", {
        "dateFormat": "yy-mm-dd"
    });
    // オプション設定の後にsetDateするとうまくいく
    $test3.datepicker("setDate", test3date);  // YYYY-MM-DD をセット

    /**
     * 現在日(Ymd)を与えられた文字列で区切って返す
     * @param {string} separator 区切り文字
     * @returns {string}
     */
    function getDate(separator) {
        var d = new Date();

        return [
            d.getFullYear(),
            ('0' + (d.getMonth() + 1)).slice(-2),
            ('0' + d.getDate()).slice(-2)
        ].join(separator);
    }
});
</script>

jQueryUI datepickerのsetDateにつきまして

ソースはこんな感じ

まとめ

一応最終的なソース

参考にさせて頂きました

スポンサーリンク

作成者: shimabox

コメントする