締切済み

JQuery Datepickerについて

2012/04/09 23:49

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

degupod
お礼率14% (1/7)

JavaScript
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

みんなの回答

tumeno
ベストアンサー率41% (5/12)

2012/04/10 06:18 回答No.1

html側 <input type="text" value=""　title="" name="date1" id="jquery-ui-datepicker" class="date-pick" /> js側 $(document).ready(function(){ $("jquery-ui-datepicker").datepicker({ <--id名指定 dateFormat: 'yy-mm-dd', changeMonth:true, changeYear: true, <--等のパラメータ設定 }); }); こんな感じです。

関連する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
jquery UIのdatepickerで和暦
jquery UIのdatepickerで、日付を選択させていますが、これを和暦（昭和や平成）表示にすることはできないのでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
jquery ui.resizable 使い方
jquery ui.resizable でdivをリサイズするとき同時に内部にあるdivをリサイズしたいのですができません。 <div id="out"> <div id="inner"> </div> </div> で、 http://stacktrace.jp/jquery/ui/interaction/resizable.htmlを参考にして、 $('#out').resizable({proportionallyResize:["#inner"]}); としてみたのですが、#outは、リサイズできますが、#innerを同時にリサイズできません。組み込んだjs、cssは、 http://jqueryui.com/download よりDLした、jquery-jquery-ui-1.8.7-0-g12bea93.zipに納められていた jquery.dimensions.js jquery.ui.core.js jquery.ui.widget.js jquery.ui.mouse.js jquery.ui.resizable.js jquery.ui.draggable.js 及び jquery.ui.resizable.css を、記載の順に組み込みました。行いたいことは、divをリサイズしたとき、その内部のdivも同時にリサイズすることです。 proportionallyResizeを使う方法でなくても構いません。方法のわかる方なにとぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
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"> カレンダーで選ぶ</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
- ベストアンサー
- JavaScript
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"/>
- ベストアンサー
- JavaScript
jQueryで質問です。
jQueryで質問です。オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。宜しくお願いします。
- ベストアンサー
- JavaScript
jqueryの tabを使用して外部リンクをしたい
jqueryの tabを使用して外部リンクをしたいこのサイトの下の方のマウスオーバーで切り替えを使用しているのですがタブをマウスオーバーで切り替えつつ、タブ部分をクリックしたら外部にリンクさせるようするにはどうしたらいいでしょうか？ http://5am.jp/jquery/jquery_ui_tabs/ 以下タグです。初心者で大変申し訳ありませんが、ご教授ください。とても困っています。よろしくお願いいたします。 ************************************************************* <!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> <head>  <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="/jquery-ui-1.8.12.custom.min.js"></script> </head> <body> <script type="text/javascript">  </script> <div id="jquery-ui-tabs"> <ul> <li><a href="#jquery-ui-tabs-1">タブ１</a></li> <li><a href="#jquery-ui-tabs-2">タブ2</a></li> <li><a href="#jquery-ui-tabs-3">タブ2</a></li> </ul> <div id="tab_area"> <div id="jquery-ui-tabs-1"> <ul> <li>タブ１内容</li> </ul> </div> <div id="jquery-ui-tabs-2"> <ul> <li>タブ2内容</li> </ul> </div> <div id="jquery-ui-tabs-3"> <ul> <li>タブ3内容</li> </ul> </div> </div> </div> </body> </html>
- 締切済み
- JavaScript
jqueryの$.getJSONの処理結果について
jqueryの$.getJSONの結果およびその違いについて教えてください。以下の(1)と(2)の処理があり、(2)を(1)と同じ様に出力したいと考えておりますが、(2)では(1)のように「class="ui-li-static ui-body-inherit ui-first-child"」などが設定されずに出力されてしまいます。そのため、どのように記述すれば(1)と同じ結果になるのかをご教授いただけますでしょうか。また、宜しければ(1)と(2)の処理の違いを教えていただけると助かります。 ※chrome バージョン 43.0.2357.81 　apache-tomcat-7.0.53 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ (1)固定値で埋め込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $('#listviewtest').append('<li>1:aaaaaaa</li>'); $('#listviewtest').append('<li>2:bbbbbbb</li>'); $('#listviewtest').append('<li>3:ccccccc</li>'); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ui> </div> </div> </body> </html> 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li class="ui-li-static ui-body-inherit ui-first-child">1:aaaaaaa</li> <li class="ui-li-static ui-body-inherit">2:bbbbbbb</li> <li class="ui-li-static ui-body-inherit ui-last-child">3:ccccccc</li> </ul> (2)$.getJSONで読み込み <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> var test1 = function(){ $.getJSON( 'test.js', null, function(data, status) { var items = []; $.each(data, function(key, val) { items.push('<li>' + val.id + ':' + val.name + '</li>'); }); $('#listviewtest').append(items.join('')).trigger('create'); } ); }; $(document).on("pagebeforecreate", function() { test1(); }); </script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul id="listviewtest" data-role="listview"> </ul> </div> </div> </body> </html> 外部ファイル（test.js） [ {"id":1,"name":"aaaaaaa"}, {"id":2,"name":"bbbbbbb"}, {"id":3,"name":"ccccccc"} ] 処理結果 <ul id="listviewtest" data-role="listview" class="ui-listview"> <li>1:aaaaaaa</li> <li>2:bbbbbbb</li> <li>3:ccccccc</li> </ul>
- ベストアンサー
- JavaScript
jquery uiが動かない
jquery uiが動きません。何度も見直し、プログラムを書いてもどこがいけないかわかりません。教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>
- ベストアンサー
- JavaScript
日付の加算結果を表示する方法について
日付の加算結果を表示する方法について、お伺い致します。下記のようなコードにてカレンダーから任意の日付を選択すると、別の枠に、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>
- ベストアンサー
- JavaScript

JQuery Datepickerについて

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

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

JQuery Datepickerについて

みんなの回答

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

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

カテゴリ
一覧

専門家に質問してみよう
専門家登録