• ベストアンサー

jquery datepickerについて

jqueryを利用して、簡単な料金シュミレーションを作っています。 日数によって、料金が変わるので、jquery datepickerで日付を選択し 選択した日付(例えば2012/08/22~2012/08/31)から期間(日数)を計算する方法はあるのでしょうか? 期間の計算方法を教えてください。宜しくお願いいたします。

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

  • ベストアンサー
  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 FromToの値を取得して差分を求めれば良いと思います。 例えばですが以下のような感じでもできると思います。 $('input.date').datepicker ({ dateFormat: 'yy/mm/dd', onSelect: function() { // 開始を取得 var from = $('#date-from').val(); // 終了を取得 var to = $('#date-to').val(); if ( from !== '' && to !== '' ) { // 両方入力されていたら計算 // 計算はそれぞれのミリ秒を取得して差分を求めて1日単位に変更 // 日単位への変更は1000ミリ秒が60回で60秒 // 60秒が60回で1時間 // 1時間が24回で1日 var date = new Date(to).getTime() - new Date(from).getTime(); alert ( date/(1000*60*60*24) ); } } });

immature365
質問者

お礼

ご回答ありがとうございます。 回答いただいたようにしたところ、計算できました。 ありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • jquery datepickerについて2

    jqueryを利用して、簡単な料金シュミレーションを作っています。 日数の計算について、質問させていただき、解決することができました。 もうひとつわからないことがあり、質問させていただきます。 特定の日が通常より料金が高いのですが、その特定の日が選択した期間に1日でも含まれているかを調べることができないでしょうか? わかる方、ご教授宜しくお願いいたします。

  • jquery UIのdatepickerで和暦

    jquery UIのdatepickerで、日付を選択させていますが、これを和暦(昭和や平成)表示にすることはできないのでしょうか? よろしくお願いします。

  • 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" />');

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

  • 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 datepickerについて

    言語初心者です。 まだ、ほとんど自分では書けず、どうにかネットに上がっているものを使っている状態です。 datepickerを利用しつつ、fromとtoから期間を計算させたいと思っています。 過去ログがあったので示します。 http://okwave.jp/qa/q7656838.html onSelect: function() {   // 開始を取得     var from = $('#date-from').val();   // 終了を取得     var to = $('#date-to').val();     if ( from !== '' && to !== '' ) {        var date = new Date(to).getTime() - new Date(from).getTime();        alert ( date/(1000*60*60*24) );     }   } 上記ソースコードの   alert ( date/(1000*60*60*24) ); の部分を書き換えて /*html内*/ <input type="text" id="from-to" name="期間"> のテキストボックスに計算させた日数を出したいのですが、上手くいきません。 どなたかご教授ください。よろしくお願いいたします。

  • 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

  • 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希望まであります。。

  • iPhoneのDatePickerについて

    趣味でiPhoneの開発をしております。 TabbarControllerを使用しており、日付の変更をする機能を追加したいと思っております。 日付の変更ボタンをクリックするとDatePickerが画面下からニュッと表示したいのですが、Tabbarの上から表示されず困っております。 方法をご存知の方がおりましたらご教示いただけないでしょうか? 下記URLのようにアクションシートのように表示したいと思っております。 http://bugcloud.com/?p=936 こちらのサイトを参考にしましたが、Tabbarがない状態での方法なので、Tabbarの背面に表示されてしまいました。 宜しくお願いします。

  • jquery-ui-rails 5.0.3 日本語

    いつもお世話になっております。 最近からRuby on Railsを始めました。 そこで、日付をマウス操作で入力するため、datepickerを導入したいと思い、 jquery-ui-rails 5.0.3をインストールしたところ日本語化する方法がわかりません。 お忙しい中、申し訳ありませんが、どなたか、ご教示ください。 【実行環境】 ・Windows7 ・Ruby2.1.5 ・Rails4.2.0 ・jquery-ui-rails 5.0.3 以上、宜しくお願いいたします。

    • ベストアンサー
    • Ruby