HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jQuery UI Datepicker(カレンダー)日付の初期値の表示

Datepicker に関連付けされたテキストフィールドに日付を初期値として設定する方法を実験してみました。

最初の Datepicker は、日付フォーマットを "yy-mm-dd" に設定しました。
そして、<input ... value="2015-01-01" /> と値を設定しているのですが、表示されていません。

2番目の Datepicker は、日付フォーマットを "yy-mm-dd" に設定しました。
そして、<input ... value="2015/01/01" /> と値を設定したところ、表示されています。

3番目の Datepicker は、日付フォーマットは指定はなし(デフォルト設定)。
そして、<input ... value="2015-01-01" /> と値を設定したところ、表示されていません。

4番目の Datepicker は、日付フォーマットは指定はなし(デフォルト設定)。
そして、<input ... value="2015/01/01" /> と値を設定したところ、表示されています。

5番目の Datepicker は、日付フォーマットを "yy/mm/dd" に設定しました。
そして、<input ... value="2015/01/01" /> と値を設定したところ、表示されています。

上記の結果から、テキストフィールドの値に yyyy/mm/dd の形式で日付を初期設定すれば表示がおこなわれるということになります。

日付:
日付:
日付:
日付:
日付:

コード


$(function() {
    $("#datepicker1").datepicker();
    $("#datepicker1").datepicker("option", "showOn", 'button');
    $("#datepicker1").datepicker("option", "dateFormat", "yy-mm-dd");
    $("#datepicker1").datepicker("option", "buttonText", "日付選択" );

    $("#datepicker2").datepicker();
    $("#datepicker2").datepicker("option", "showOn", 'button');
    $("#datepicker2").datepicker("option", "dateFormat", "yy-mm-dd");
    $("#datepicker2").datepicker("option", "buttonText", "日付選択" );

    $("#datepicker3").datepicker();
    $("#datepicker3").datepicker("option", "showOn", 'button');
    $("#datepicker3").datepicker("option", "buttonText", "日付選択" );

    $("#datepicker4").datepicker();
    $("#datepicker4").datepicker("option", "showOn", 'button');
    $("#datepicker4").datepicker("option", "buttonText", "日付選択" );

    $("#datepicker5").datepicker();
    $("#datepicker5").datepicker("option", "showOn", 'button');
    $("#datepicker5").datepicker("option", "dateFormat", "yy/mm/dd");
    $("#datepicker5").datepicker("option", "buttonText", "日付選択" );
});
	

HTMLコード


<div>日付: <input type="text" id="datepicker1" value="2015-01-01"/></div>

<div>日付: <input type="text" id="datepicker2" value="2015/01/01"/></div>

<div>日付: <input type="text" id="datepicker3" value="2015-01-01"/></div>

<div>日付: <input type="text" id="datepicker4" value="2015/01/01"/></div>

<div>日付: <input type="text" id="datepicker5" value="2015/01/01"/></div>