- ベストアンサー
jQueryを使ったカレンダーの作成方法
- jQueryを使ってカレンダーの作成方法について教えてください。
- 年がテキストボックスで、月と日がセレクトで入力するカレンダーを作成したいです。
- 表示されたカレンダーの日付をクリックすると、年のテキストボックスへ年が入り、月と日のセレクトに反映されるようにしたいです。
- FireFile
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
すみません。私の不注意でした。 parseIntは、引数が'0'から始まる場合、それを8進数の数字とみなします。 10進数であると明示的に示すため、スクリプトを以下のように変更してみてください。 (HTML部分は変更したまま、つまり、<option value="01"> 等です。) [script A] --- $(function () { $('#ex1').datepicker({ beforeShow : function() { var y = parseInt($('#year').val(), 10); // 10進数であることを指定 var m = parseInt($('#month').val(), 10); // 10進数であることを指定 var d = parseInt($('#dayofmonth').val(), 10); // 10進数であることを指定 var dt = new Date(y,m-1,d); if(!isNaN(dt)) { return{ defaultDate:dt }; } }, onSelect : function(date) { $('#year').val(date.substr(0,4)); $('#month').val(date.substr(5,2)); $('#dayofmonth').val(date.substr(8,2)); } }); }); --- HTML部分を変更しない(つまり、<option value="1"> 等)場合、parseIntの第二引数は省略可能です。 この場合、一桁のvalueを持つoptionを選択する場合には、0を除いた文字列を渡す必要があります。 スクリプトは以下のようにしてみてください。 [script B] --- $(function () { $('#ex1').datepicker({ beforeShow : function() { var y = parseInt($('#year').val()); var m = parseInt($('#month').val()); var d = parseInt($('#dayofmonth').val()); var dt = new Date(y,m-1,d); if(!isNaN(dt)) { return{ defaultDate:dt }; } }, onSelect : function(date) { $('#year').val(date.substr(0,4)); $('#month').val(date[5] == '0' ? date[6] : date.substr(5,2)); // 一桁の場合は0を除く $('#dayofmonth').val(date[8] == '0' ? date[9] : date.substr(8,2)); // 一桁の場合は0を除く } }); }); --- 最初にお答えしたときは、script Bにある場合分けを避けるためにHTML部分を変更しました。 しかし、(何らかの理由により)HTML部分を変更せずに使いたいということであれば、script Aではなくscript Bをお試しください。
その他の回答 (1)
以下のようにすればいかがでしょうか。 変更点は大きくは2箇所です。 1つはスクリプト部分、もう1つはHTML部分です。 全てをスクリプトだけで解決することもできますが、HTMLを一部だけ変える方がより簡単かと思います。 スクリプト部分は以下のように、onSelectを加えます。 --- $(function () { $('#ex1').datepicker({ beforeShow:function(tag) { var y=parseInt($('#year').val()); var m=parseInt($('#month').val()); var d=parseInt($('#dayofmonth').val()); var dt=new Date(y,m-1,d); if(!isNaN(dt)) return{ defaultDate:dt}; }, onSelect:function(date) { $("#year").val(date.substr(0,4)); $("#month").val(date.substr(5,2)); $("#dayofmonth").val(date.substr(8,2)); } }); }); --- HTML部分は以下のように、月と日の選択肢のうち、1桁のもののvalueに"0"を加えます。 --- <select name="month" id="month"> <option value="" ></option> <option value="01">1</option> <option value="02">2</option> ... <select name="dayofmonth" id="dayofmonth" > <option value="" ></option> <option value="01">1</option> <option value="02">2</option> ... ---
お礼
kaorineさん、本当にありがとうございました！ とても参考になりました！ 何とお礼を言っていいのか分かりません！ 本当に助かりました＾＾ ありがとうございます。
補足
kaorineさん、ご連絡ありがとうございます！ kaorineさんからコメント頂きましたソースで修正しましたところ、 カレンダーで日付をクリックした場合の処理が無事に動作できました＾＾ ありがとうございます。 また質問で申し訳ありませんが、なぜか8月と9月をセレクトボックスから 選択して表示をすると、2007年12月と表示されてしまいますTT こちらもご教授頂けませんでしょうかTT お忙しいところ本当に申し訳ありません。 よろしくお願いします。m(_ _)m 以下、修正したソースです。 <!--カレンダー用jQuery--> <script type="text/ecmascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="ui.datepicker.js"></script> <script type="text/javascript" src="ui.datepicker-ja.js"></script> <link rel="stylesheet" href="themes/flora/flora.datepicker.css" type="text/css" media="screen" /> <script type="text/javascript"> window.onload = function () { $('#ex1').datepicker({ beforeShow:function(tag) { var y=parseInt($('#year').val()); var m=parseInt($('#month').val()); var d=parseInt($('#dayofmonth').val()); var dt=new Date(y,m-1,d); if(!isNaN(dt)) return{ defaultDate:dt}; }, onSelect:function(date) { $("#year").val(date.substr(0,4)); $("#month").val(date.substr(5,2)); $("#dayofmonth").val(date.substr(8,2)); } }); }; </script> <!--カレンダー用jQuery--> </head> <body> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <!--カレンダーテスト--> <input id="ex1" type="text" size="20" /> <input id="year" type="text" size="4" />年 <select name="month" id="month"> <option value="" ></option> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select>月 <select name="dayofmonth" id="dayofmonth" > <option value="" ></option> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">9</option> <option value="10">10</option> </select>日 <button onclick="$('#ex1').val(''); $('#ex1').datepicker('show');">表示</button> <!--カレンダーテスト--> </td></tr></table> </body> </html>
お礼
kaorineさん、本当にありがとうございました！ とても参考になりました！ しかももう一つもソースを書いて頂いて・・・。 10進数である記述など、とても勉強になりました。 今後ともよろしくお願いします。 本当にありがとうございました！