jQueryを使ったカレンダーの作成方法

前へ 次へ
このQ&Aのポイント
  • jQueryを使ってカレンダーの作成方法について教えてください。
  • 年がテキストボックスで、月と日がセレクトで入力するカレンダーを作成したいです。
  • 表示されたカレンダーの日付をクリックすると、年のテキストボックスへ年が入り、月と日のセレクトに反映されるようにしたいです。
回答を見る
  • ベストアンサー

初心者ですTT　jQueryを使ったカレンダーのことについて教えて下さい。

jQueryを使ったカレンダーを途中まで作ることができましたが、 なかなか思うように完成させることができませんでしたTT 作りたいと思っているのは、年がテキストボックスで、 月と日がセレクトで入力するようなものにしたいと思っています。 年月日をそれぞれ入力して、「表示ボタン」をクリックすると、 カレンダーが表示されるところまで作ることはできましたが、 表示されたカレンダーの日付をクリックした時に、年のテキストボックスへ 年が入り、月と日のセレクトに反映されるというようにしたいんですが、 思うように作ることができませんでした。 どなたか教えていただけませんでしょうか・・・。 よろしくお願いします！ ↓以下ソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>カレンダーテスト</title> <!--カレンダー用jQuery--> <script type="text/javascript" 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="jquery/themes/flora/flora.all.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}; } }); } </script> <!--カレンダー用jQuery--> </head> <body> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <!--カレンダーテスト--> <input id="ex1" type="hidden" size="20" value="today" /> <input id="year" type="text" size="4" />年 <select name="month" id="month"> <option value="" ></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">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="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select>日 <button onclick="$('#ex1').datepicker('show');">表示</button> <!--カレンダーテスト--> </td></tr></table> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
noname#137826
noname#137826
回答No.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をお試しください。

参考URL：
http://developer.mozilla.org/ja/Core_JavaScript_1.5_Reference/Global_Functions/parseInt
FireFile
質問者

お礼

kaorineさん、本当にありがとうございました！ とても参考になりました！ しかももう一つもソースを書いて頂いて・・・。 10進数である記述など、とても勉強になりました。 今後ともよろしくお願いします。 本当にありがとうございました！

その他の回答 (1)

noname#137826
noname#137826
回答No.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> ... ---

参考URL：
http://ui.jquery.com/repository/latest/demos/functional/#ui.datepicker
FireFile
質問者

お礼

kaorineさん、本当にありがとうございました！ とても参考になりました！ 何とお礼を言っていいのか分かりません！ 本当に助かりました＾＾ ありがとうございます。

FireFile
質問者

補足

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>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQuery-datepicker on IE8

    以下のような非常にシンプルなHTMLでjqueryのdatepicker()を使用しています。 他のブラウザでは問題なく動作するのですが、IE8でのみ、カレンダーは表示されるものの、 日付を選択してもカレンダーが閉じず、テキストボックスにも選択日付が設定されません。 どなたか解決方法をご存知の方、教えてください。 以下にHTMLソースと、テスト用に設置してあるURLを記載します。 よろしくお願いします。 http://apps.spiral-software.com/test/datepicker.html <html> <head> <title>datepicker</title> <link rel="stylesheet" href="jquery-ui.css" type="text/css" /> <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.11.min.js"></script> <script type="text/javascript"> $(function () { $("#incidentDateId").datepicker({ dateFormat: "yy/mm/dd" }); }); </script> </head> <body> <form> <input id="incidentDateId" name="incidentDateName" type="text" value="" /> </form> </body> </html>

  • javascript初心者です。

    javascript初心者です。 下記のソースコードで、単純に、マウスホーバーで、テキストの内容を切り替えるものですが、 IE8ですと動作しますが、Firefox3.5だと動作しません。 なにか、原因あるのでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <script language="javascript" type="text/javascript"> function formcalc(formobj){ var val_a= formobj.elements["para_a"].value; var val_b= formobj.elements["para_b"].value formobj.elements["answer"].value = val_a * val_b } function chktext(){ var obj = document.getElementById("id1"); obj.innerText="テキスト変更しました。"; } </script> </head> <body> <form> <input size="10" type="text" name="para_a" value="0" />× <input size="10" type="text" name="para_b" value="0" />= <input size="10" type="text" name="answer" /><br /> <input type="button" name="keisan" value="計算" onclick="formcalc(this.form)" /> </form> <br /><br /><br /><br /> <p id="id1" onMouseOver="this.innerText='受付終了'">最初のテキスト</p> </body> </html>

  • 日付の加算結果を表示する方法について

    日付の加算結果を表示する方法について、お伺い致します。 下記のようなコードにてカレンダーから任意の日付を選択すると、別の枠に、60日後の日付と90日後の日付が自動的に表示されるようにしたいのですが、どのようにしたらよいでしょうか。 お分かりになる方、アドバイス宜しくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta charset="UTF-8" /> <title></title> <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui..."></script> <script type="text/javascript"> $(function() { $.datepicker.setDefaults($.datepicker.regional['ja']); $('#date').datepicker({ dateFormat: 'yy/mm/dd', showOn: 'both' ,showButtonPanel:'show' }); }); </script> </head> <body> <form method="POST" action=""> <label> <input type="text" id="date" /> </label> </form> </body> </html>

  • jqueryについて質問です。

    jqueryについて質問です。 過去こちらにお世話になりまして、一つの質問を解決していただきました。 しかしまた、わかったつもりになっていただけのようでして、再度問題が出てしまいました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="main.css"></link> <script type="text/javascript" src="accordian.pack.js" charset="UTF-8"></script> <script type="text/javascript" src="jquery-1.3.2.min.js" charset="UTF-8"></script> <script type="text/javascript" src="smartsticky.js" charset="UTF-8"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ 　　　　　new Accordian('basic-accordian',5,'header_highlight'); }); </script> このように記述しましたが、どちらも作動しないという状態になってしまいました。 smartsticky.jsが、元々は<SCRIPT>内に書かれていたものを、まとめて外部に出したような感じだとは思うのですが、それに対しての対処が思いつきません。見ての通りjQuery.noConflict();を使っても見たのですが、まるで効果なしです・・・ accordian.pack.jsとsmartsticky.jsをバッティングさせずに上手く同時に動かす手段はありますでしょうか？ ちなみにこのページのscript自体はこの記事をのものです。 組み込みもこの記事を参考に行っています。 http://solidstate.jp/ContentsDisplay/floatingBox/script_147.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html

  • prototype+jquery+プラグイン

    prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか？ エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>

  • datepickerで日付の値を取得したい

    jQueryのdatepickerを実装しました。 そこに、jquery.validate.jsを当てて、空欄の時にエラーが出るようにしました。 しかし、日付を選択しても、エラーメッセージが出てしまいます。 （※日付をカレンダーで選択後、再び日付の欄をクリックするとエラーが消えます。） どうやら、日付の値を取得していないような気がしています。 どなたかご存じの方がいらっしゃいましたら、教えていただけると幸いです。 <script type="text/javascript"> $(function(){ 　$("#datepicker").datepicker() }); </script> <script> jQuery(".validDate").validate({ expression: "if(VAL != '') return true; else return false;", message: "希望日をお選びください。" }); </script> <input type="text" name="reservationdate" class="rDate validDate" id="datepicker"/>

  • mouseoverのコンテンツ内でselectタグ

    jQueryでマウスオーバーで、あるコンテンツを表示する仕組みを作って、 そのコンテンツ内にプルダウンを表示したいのですが、 <option>の選択肢にカーソルを合わせると、コンテンツが閉じてしまい、困っています。 （メガメニュー？のようなイメージです。IEとFireFoxで検証しています。） ↓のようなソースを書いているのですが、どこがいけないのでしょうか。。 --------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(function(){ //一旦非表示 $('#cont').hide(); //ここから表示設定 $('#hoge').mouseover(function(){ $('#cont').show(); }).mouseout(function(){ $('#cont').hide(); }); }); </script> <style type="text/css"> #hoge {margin:0; padding:0;} #cont {padding:100px; position:absolute; background-color: rgba(0, 0, 0, 0.5);} </style> </head> <body> <ul> <li id="hoge"> <a >hoge</a> <div id="cont"> <form method="get"> <select> <option value="">選択してください</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> </select> <input type="button" value="検索" /> </form> </div> </li> <li>…</li> <li>…</li> </ul> </body> </html> --------------------- わかる方いらっしゃいましたら、ヒントいただけると嬉しいです。。 よろしくお願いいたしますm(__)m

  • javascriptでselectboxのvalueを取得し、特定のv

    javascriptでselectboxのvalueを取得し、特定のvalue値により、「<input type="text" name～>」をブラウザに表示させたいのですが、やり方がわかりません。 javascriptについて素人です。 jQUERYを使用して、phpのようにif文を追加したらいけるのかなと思って下記のようにやってみたのですが、更新しないと変わりませんでした。。 どなたかお力を貸して下さい！どうか宜しくお願い致します！ ========================================== <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta name="robots" content="noindex,nofollow" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="/admin/js/jquery-1.2.3.js" ></script> <script type="text/javascript"> $(function() { hogehoge = $("#abcdefg").val(); if(hogehoge !== '3'){ $('#hijklmn').hide(); } }); </script> </head> <body> <form method="post" action="/admin/～"> <select id="abcdefg"> <option value="1">aaaaaaaa</option> <option value="2">bbbbbbbb</option> <option value="3">cccccccc</option> </select> <div id="hijklmn"> 上のセレクトボックスが3の場合のみ、下記のフォームを表示させたい <input type="text" value="ああああああああ" /> </div> </form> </body> </html>

  • 一部のjQueryとmootoolsが競合します

    dropdownメニューのdroppy(jquery)とmootoolsを使用したカレンダーが競合してしまいます。 mootoolsのカレンダーhttp://www.electricprism.com/aeron/calendar/ とメールフォームプロ　http://www.synck.com/contents/download/cgi-perl/mailformpro.html のjqueryの組み合わせは問題ありませんでした。そこにdroppy http://onehackoranother.com/projects/jquery/droppy/ が入ると動かなくなります。 助けて頂ければ嬉しいです。よろしくお願いいたします。 jQuery.noConflict();やDollar Safe Modeなどもやってみましたが、うまくいきません。どこが間違っているのでしょうか？ <script type="text/javascript"> jQuery.noConflict(); jQuery(function(){ jQuery("#nav").droppy(); }); </script> ----------------------------- <script type="text/javascript"> $(function() { $("#nav").droppy(); }); (function($) { window.addEvent('domready', function() { myCal1 = new Calendar({ date1: 'Y/m/d' }, { direction: 1, tweak: {x: 6, y: 0} }); }); }(document.id)); </script> ---元はこちら↓-------------- <script type="text/javascript" src="commons/jquery.js"></script> <script type="text/javascript" src="js/jquery.droppy.js"></script> <script type="text/javascript"> $(function() { $("#nav").droppy(); }); </script> メールフォームプロ↓ <script type="text/javascript" src="commons/mfp.lang.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mfp.extensions.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mailform.js" charset="UTF-8"></script> <script type="text/javascript" src="postcodes/get.cgi?js" charset="UTF-8"></script> カレンダー↓ <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/calendar.rc4.js"></script> <script type="text/javascript"> //<![CDATA[ window.addEvent('domready', function() { myCal1 = new Calendar({ date1: 'Y/m/d' }, { direction: 1, tweak: {x: 6, y: 0} }); }); //]]> </script>

  • jQueryでajax

    ajax（jQuery使用）を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート（This is success!）が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>

    • ベストアンサー
    • AJAX

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する