HARD DAY'S NIGHT別館

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

jQuery UI Datepicker(カレンダー)インライン表示

常時カレンダーを表示させる方法(インライン表示)を紹介します。
方法は <div> タグのIDに datepicker を指定すればできます。

選択した日付をテキストフィールドに反映させるには、カレンダーの日付が選択された時(onSelect イベント)、日付をテキストフィールドへセットします。


日付:

コード


$(function() {
    $("#datepicker").datepicker({
        // 日付が選択された時、日付をテキストフィールドへセット
        onSelect: function(dateText, inst) {
                    $("#date_val").val(dateText);
                }
    });
});
	

HTMLコード


<div id="datepicker"/>
<br/>
<p>日付: <input type="text" id="date_val"/></p>