jQuery datepickerを複数使いたい

このQ&Aのポイント
  • javascriptで行を追加するDOMを作成しました。最初の1回だけdatepickerで日付をクリックすると該当のテキストボックスに日付が問題なく代入されます。
  • 追加ボタンをクリックで行を追加した際にもjQuery datepickerを動作させるにはどうしたら良いでしょうか?
  • ご教授の程、宜しくお願いしますm(__)m
回答を見る
  • ベストアンサー

jQuery datepickerを複数使いたい

javascript で行を追加するDOMを作成しました。 最初の1回だけdatepickerで日付をクリックすると該当のテキストボックスに日付が問題なく代入されます。 追加ボタンをクリックで行を追加した際にもjQuery datepickerを動作させるにはどうしたら良いでしょうか? function add() { var objTBL = document.getElementById("request_tb" + num); if (!objTBL) return; var count = objTBL.rows.length; // 最終行に新しい行を追加 var row = objTBL.insertRow(count); // 列の追加 var c1 = row.insertCell(0); var c2 = row.insertCell(1); var c3 = row.insertCell(2); // 各列に表示内容を設定 c1.innerHTML = '<span class="seqno' + count +'">第' + count + '日時</span>'; c2.innerHTML = '<input type="text" name="date' + count + '" class="datepicker'+ count+'" id="datepicker">'; c3.innerHTML = '<img src="img.gif">&nbsp;カレンダーで選ぶ</a>'; $('datepicker'+count).datepicker({ numberOfMonths: 2, dateFormat: 'yy-mm-dd', changeYear: false, showButtonPanel: true, minDate:0 }); } <input type="button" id="add" onClick="add()" value="追加"> ご教授の程、宜しくお願いしますm(__)m

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

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5069/13245)
回答No.1

まず、c2.innerHTML に入れているinputタグのidがユニーク値では無いのでHTMLとしてNG。 datepicker をセットしている「$('datepicker'+count)」というセレクタは「'datepicker'+count」タグと言う意味になっているので間違い。 $('.datepicker'+count) か $('#datepicker'+count) にしなきゃいけないので、inputタグのidがユニークに成るようにして $('#datepicker'+count) のような指定にするのがいいと思います。

i-love-fit
質問者

お礼

ご回答ありがとうございます。 $('#datepicker'+count) なるほど。 idになるようにするとユニークに指定することができますね。 無事解決することができました。

関連するQ&A

  • JQuery Datepickerについて

    DatePickerを使ってカレンダーを選ばせて、inputテキストエリアに出した日付で検索をさせたいのですが、inputタグのvalue値、title値をどうやってもってくるかがわかりません。どのようにすれば選んだ日付がinputタグ内に記述されるのでしょうか?詳しい方、ご教示いただけないでしょうか。。 呼び出す箇所はJS内に記述しています。↓ $("div#Calender").append('<input type="text" value="" title="" name="date1" id="jquery-ui-datepicker" class="date-pick" />');

  • scriptに関して

    scriptで下記のようにcheckboxと削除ボタンを作りました。 checkをした行を削除ボタンで削除をしたいのですが、 今のソースの状態では、checkboxを押した瞬間に行が消えます。 どこの書き方がいけないのでしょうか? <scriptソース> function AddTableRows1(){ var table1 = document.getElementById("table1"); var row1 = table1.insertRow(table1.rows.length); var cell1 = row1.insertCell(0); var cell2 = row1.insertCell(1); var cell3 = row1.insertCell(2); cell1.setAttribute("class","name"); cell2.setAttribute("class","naiyo"); cell3.setAttribute("class","zyoukyou"); var HTML1 = '<input type="checkbox" onclick="remove_row(this)"><input name="gyoumuname" ID="gyoumuname" type="text" ><input type="hidden" name="gyoumuno" Id="gyoumuno" value="0">'; var HTML2 = '<textarea name="gyoumunaiyo" ID="gyoumunaiyo" Style="width:50em;height:5em"></textarea>'; var HTML3 = '<input name="gyoumuzyoukyou" ID="gyoumuzyoukyou" >'; cell1.innerHTML = HTML1; cell2.innerHTML = HTML2; cell3.innerHTML = HTML3; } function remove_row(o){ var TR = o.parentNode.parentNode; TR.parentNode.deleteRow(TR.sectionRowIndex); } <ボタンソース> <input class="btn1" type="button" value="削除" onclick="remove_row(this)">

  • Jquery Datepickerについて。。

    質問させてください。 javascriptが非常に苦手な初級エンジニアです。。 JqueryのDatepickerを使って、「レンタル希望日」という入力項目に入った日付を見て、「レンタル返却日」の選択できる日にちを変える、っというようなものを作っています。レンタル希望日の入力をする前にレンタルもとの販売店の選択をし、休店日も選択した販売店によって切り替えるような仕様です。苦手ながらも何とかそこまではできたのですが1点問題点が。。 レンタル希望日、返却予定日は第三希望まで入力する必要があります(必須)。 以下1ソースで第3希望までの入力を一元で行う方法があればと思っています。 丸ごと関数化すればいいのかと思い色々試してみましたが上手くいきませんでした。ソースを3回書くのはできれば避けたいです。 何卒よろしくお願いいたします。 ---------------------以下ソース $(function() { $( "#from" ).datepicker({ defaultDate: "+1w", minDate: '+3', maxDate: '2014年12月26日', dateFormat: 'yy年mm月dd日', changeMonth: true, beforeShow:function(){ var kyoten = $("select[name='kyoten']").val(); try{ if(kyoten == ''){ throw new Error('販売店を選択してください'); } }catch(e){ alert(e.message); window.location.reload();//あまりよろしくない。。 } }, beforeShowDay: function(day) { // カレンダー表示前に実行 var kyoten = $("select[name='kyoten']").val(); kekka = kyoten.split('_'); var result; switch (day.getDay()) { case 2: // 火曜日を選択できないようにする if(kekka[1] == 1){ result = [false]; }else{ result = [true]; } break; case 3: // 水曜日を選択できないようにする if(kekka[1] == 2){ result = [false]; }else{ result = [true]; } break; case 6: // 土曜日を選択できないようにする result = [false]; break; case 0: // 日曜日を選択できないようにする result = [false]; break; default: result = [true]; // それ以外は選択できる break; } return result; }, onClose: function( selectedDate ) { var toDate = $('#from').datepicker('getDate'); var toMin = $('#from').datepicker('getDate');//toDate var toWeek = toDate.getDay(); var tiNum = ''; var niNum = ''; // maxDateの挙動(選択した日にちの曜日番号によって(#to)で選択できる日にちを絞り込む) if(toWeek == 1) { // 月 tiNum = 4; } else if(toWeek == 2){ // 火 tiNum = 3; } else if(toWeek == 3){ // 水 tiNum = 2; } else if(toWeek == 4){ // 木 tiNum = 1; } else if(toWeek == 5){ // 金 tiNum = ''; } // minDateの挙動(金曜日のみ1を加算しない) if(toWeek == 5){ niNum = ''; }else{ niNum = 1; } toMin.setDate(toMin.getDate() + tiNum); toDate.setDate(toDate.getDate() + niNum); $( "#to" ).datepicker('option', {minDate: toDate, maxDate: toMin}); } }); $( "#to" ).datepicker({ defaultDate: "+1w", minDate: '+1', maxDate: '2014年12月26日', dateFormat: 'yy年mm月dd日', changeMonth: true, beforeShow:function(){ var kyoten = $("select[name='kyoten']").val(); try{ if(kyoten == ''){ throw new Error('拠点を選択してください'); } }catch(e){ alert(e.message); window.location.reload(); } }, beforeShowDay: function(day) { // カレンダー表示前に実行 var kyoten = $("select[name='kyoten']").val(); kekka = kyoten.split('_'); var result; switch (day.getDay()) { case 2: // 火曜日を選択できないようにする if(kekka[1] == 1){ result = [false]; }else{ result = [true]; } break; case 3: // 水曜日を選択できないようにする if(kekka[1] == 2){ result = [false]; }else{ result = [true]; } break; case 6: // 土曜日を選択できないようにする result = [false]; break; case 0: // 日曜日を選択できないようにする result = [false]; break; default: result = [true]; // それ以外は選択できる break; } return result; } }); }); </script> 以下html部分 <select name="kyoten"> <option value="">選択してください</option> <?php foreach( $kyotenArr as $key=>$var):?> <option value="<?php echo $var;?>"><?php echo $key;?></option> <?php endforeach;?> </select> 第一希望日<input type="text" id="from" readonly="readonly"> 第一希望返却日<input type="text" id="to" readonly="readonly"> <!--第3希望まであります。。

  • scriptとJSPについて質問です。

    scriptとJSPについて質問です。 現在は下記のソースのように追加ボタンを押すことで、 テキストボックスがどんどん追加されていきます。最上行削除ボタンで一番上のテキストボックスは消せます。 最下行削除ボタンで一番下のテキストボックスは消せます。 この削除の仕様が悪くて、 追加された全てのテキストボックスの前にチェックボックスを入れて、 チェックしたもののみを削除ボタンで消すようにしたいです。 どのようにソースを書くのかをご教示いただきたいです。 「現在のscriptソース」 function AddTableRows1(){ var counter = 0; counter++; var table1 = document.getElementById("table1"); var row1 = table1.insertRow(counter); var cell1 = row1.insertCell(0); var cell2 = row1.insertCell(1); var cell3 = row1.insertCell(2); cell1.setAttribute("class","name"); cell2.setAttribute("class","naiyo"); cell3.setAttribute("class","zyoukyou"); var HTML1 = '<input name="gyoumuname" ID="gyoumuname" type="text" name="width:100em;height:10em">'; var HTML2 = '<textarea name="gyoumunaiyo" ID="gyoumunaiyo" Style="width:50em;height:5em"></textarea>'; var HTML3 = '<input name="gyoumuzyoukyou" ID="gyoumuzyoukyou" type="text" name="width:100em;height:10em">'; cell1.innerHTML = HTML1; cell2.innerHTML = HTML2; cell3.innerHTML = HTML3; } function DelTalbeFirstRow1(){ var table1 = document.getElementById("table1"); if(table1.rows.length > 1){ table1.deleteRow(1); } } function DelTalbeLastRow1(){ var table1 = document.getElementById("table1"); if(table1.rows.length > 1){ table1.deleteRow(table1.rows.length-1); } } 「JSPソース」 <tr> <th>タイトル</th><th>内容</th><th>状況</th> </tr> </table> <input type="button" value="追加" onClick="AddTableRows1();" /> <input type="button" value="最上行削除" onclick="DelTalbeFirstRow1();" /> <input class="btn1" type="button" value="最下行削除" onclick="DelTalbeLastRow1();" />

  • 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"/>

  • jQueryによるカウントアップ

    質問をさせてください。 <span class="1000"> <a class="2000" title="このコメントを承認しない" href="comment.php?c=327&action=unapprovecomment">承認しない</a> </span> こちらのリンクを押した時に <span class="count"> ( <span class="Approved-count">100</span> ) </span> <span class="Approved-count">100</span> こちらの数字100にページ遷移を行わずに+1を行いたいのですが それは可能でしょうか? 検索をしてみたのですが、なにやら複雑な処理が多く 単純にカウントアップを行うだけならもっと簡単にできるのではと 質問をさせて頂きました。 どなたかご教示いただけましたら幸いでございます。

  • Jqueryのイベントが動かないケースがある

    Jqueryを使ってイベントによる実行をしています。 上手く行くケース html読み込み時にあるi要素のクリックイベント に関しては問題なく実行されました。 hogehogeRegisterEvent : function(container){ var thisInstance = this; container.find('.iで指定した名称').on("click",function(e){ 処理; }); その他処理 }, という感じで指定したところできました。 それを ボタンクリックをした時にjavascriptにて、i要素を作成してそれをクリックするとイベントが発生しません。 挿入処理は var cell = row.insertCell(2); cell.innerHTML = "i要素を挿入"; という感じでテーブル内部にinsertCellで行っています。 そもそもこの方法だと上手く認識してくれないものなのでしょうか? 上手く認識させるための要素挿入方法もしくは、イベントをリフレッシュするなどして追加したコード部分も認識させる方法を教えてください。

  • JQueryを使ってcssを書き換え

    何となくコードを見てさわる程度の初心者です。 以下のようなソースを組みました。 <div id="slide"> <a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a> </div> <div id="slidenavi"> <ul> <li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li> <li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li> <li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li> </ul> </div> #slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。 ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。 問題はここからです。 最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。 そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。 この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。 jsファイルは以下の通りです。 $(function(){ $('#slidenavi ul li a').fadeTo(0,0.4); $('#slidenavi ul li a').hover(function(){ $(this).fadeTo(300,1.0); }, function(){ $(this).fadeTo(300,0.4); }) $('#slidenavi ul li img').mouseover(function(){ var bglink = $(this).attr("class"); var altTxt = $(this).attr("alt"); $("#slide img").attr("src","images/home/main/"+bglink); $("#slide img").attr("alt",altTxt); $("#slide span.active").css("display","block"); }); $('#slidenavi ul li a').mouseover(function(){ var Href = $(this).attr('href'); var Tget = $(this).attr('target'); $("#slide a").attr("href", Href); $("#slide a").attr("target", Tget); $("#slide a").click(function() { window.open(Href,'_self'); return false; }); }); });

  • insertRowメソッド内で計算式を書く方法

    http://jsajax.com/Articles/TableInsertRow/157を参考に、[行を挿入]ボタンをクリックすると最終行の下に行が追加され、その中にテキストボックスを配置し計算を行うようにしたいと思い、下記のソースを記述しました。 そして追加した行で正常に計算を行うために、insertRow内のinnerHTMLのgoods_a_3の3の部分を動的に設定したり、calc内の計算式を動的にループさせる必要があると思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <script type="text/javascript"> <!-- window.onload = function() { document.getElementById("btnInsert").onclick = insertRow; } function insertRow() { var tbl = document.getElementById("Table1"); var row = tbl.insertRow(2); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = "<input type=\"text\" name=\"goods_a_3\" size=\"3\" value=\"0\" onchange=\"calc();\" />*"; cell2.innerHTML = "<input type=\"text\" name=\"goods_b_3\" size=\"3\" value=\"0\" onchange=\"calc();\" />="; cell3.innerHTML = "<input type=\"text\" name=\"ans3\" size=\"8\" value=\"0\" disabled=\"disabled\" />"; } function calc(){ document.form1.ans1.value = document.form1.goods_a_1.value * document.form1.goods_b_1.value; document.form1.ans2.value = document.form1.goods_a_2.value * document.form1.goods_b_2.value; } // --> </script> </head> <body> <form action="#" name="form1" id="form1"> <table id="Table1" border="1"> <tr> <td><input type="text" name="goods_a_1" size="3" value="0" onchange="calc();" />*</td> <td><input type="text" name="goods_b_1" size="3" value="0" onchange="calc();" />=</td> <td><input type="text" name="ans1" size="8" value="0" disabled="disabled" /></td> </tr> <tr> <td><input type="text" name="goods_a_2" size="3" value="0" onchange="calc();" />*</td> <td><input type="text" name="goods_b_2" size="3" value="0" onchange="calc();" />=</td> <td><input type="text" name="ans2" size="8" value="0" disabled="disabled" /></td> </tr> </table> </form> <br /> <input id="btnInsert" type="button" value="行を挿入" /> 以上、よろしくお願いします。

  • JQuery インプット要素 カウント減算について

    お世話になります。 JQueryを使用してインプット要素を追加・削除できるようにするアプリケーションを作成してます。 問題は、インプット要素の数を追加した合計数量を取得し削除をした場合、うまくいかない事です。 下記はコードです。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../library/js/jquery-1.6.js"></script> <link rel="stylesheet" href="../library/css/defult.css"> <link rel="stylesheet" href="../library/css/style.css"> <title>メールアドレス登録</title> <script type="text/javascript"> <!-- $(document).ready(function(){ $(function() { var count; var scntDiv = $('tbody.row'); var i = $('#row').size() + 2; $('#addScnt').live('click', function() { $('<tr><td><input type="text" style="width: 320px;" name="emailAddress_' + i +'" /></td><td><a href="#" id="addScnt">Add</a></td><td><a href="#" id="remScnt">Remove</a></td></tr>').appendTo(scntDiv); count = i++; document.getElementById('cnt').value=count; return false; }); $('#remScnt').live('click', function() { if( i > 2 ) { $(this).parents('p').remove(); count = i--; document.getElementById('cnt').value=count; } return false; }); }); }); --> </script> </head> <body> <div id="content"> <h1>メールアドレス登録</h1> <form id="multi"> <table> <tbody class="row"> <tr> <td><input type="text" style="width: 320px;" name="emailAddress_1" /></td> <td><a href="#" id="addScnt">Add</a></td> </tr> </tbody> </table> <input type="hidden" name="cnt" id="cnt" /> <div id="process"> <input type="submit" class="processing" name="submit" value="次へ"/> </div> </form> </div> </body> </html>

専門家に質問してみよう