Q&A
前提・実現したいこと
タイトルの通りですが、datePickerにて選択した日付（開始日と終了日）の期間を1日毎に出力したいです。
開始日から終了日までの日数を出力する方法は参考にしていたサイトから作成することは出来ましたが、
そこから1日事に出力する方法が考え付きませんでした。
解決方法をご存知の方がいましたら、ご教授ください。
該当のソースコード
// JS $(function() { // 日本語化 $.datepicker.setDefaults({ closeText: "閉じる", prevText: "<前", nextText: "次>", currentText: "今日", monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], dayNames: ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"], dayNamesShort: ["日", "月", "火", "水", "木", "金", "土"], dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"], weekHeader: "週", firstDay: 0, isRTL: false, showMonthAfterYear: true, yearSuffix: "年", dateFormat: 'yy/mm/dd（D）', numberOfMonths: 1, }); $('#start_date').datepicker({ minDate: 0, onSelect: showDays }); $('#end_date').datepicker({ minDate: 0, onSelect: showDays }); function showDays() { var start = $('#start_date').datepicker('getDate'); var end = $('#end_date').datepicker('getDate'); if (!start || !end) return; var days = (end - start) / 1000 / 60 / 60 / 24; days++; $('#diff_day').val(days); //開始日～終了日までの日数 } }); //HTML <div id="container"> <div class="wrapper"> <input type="text" name="開始日" class="datepicker" id="start_date" placeholder="開始日"> ～ <input type="text" name="終了日" class="datepicker" id="end_date" placeholder="終了日"><br> 日時 <input id="diff_day">日 <div class="output"> //ここに開始日から終了日までの日付を出力したい </div> </div> </div>
回答1件
0
こんにちは
この回答では、ご質問のコードにある、 <div class="output"> の中に、 開始日から終了日までの日付の文字列を、番号付きリスト <ol> で列挙するコードを示します。また、日付や日時を扱うときに、Dateオブジェクトのままでやろうとするよりも、momentを使うと、分かり易いコードを楽に書けることが多いので、これを使います。
ご質問に挙げられているコードへの追加を、以下にて、順を追って説明します。
(1) moment を CDN から読み込む
HTML の <head> の中に以下を追加します。
html
1<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
以下の(2)から(5)は JavaScript のコードのほうに追加します。
(2) moment で日付を出力するときの曜日の日本語化
moment を使って、日付を日本語の文字列にしたときに、曜日も日本語になるように、以下を追加します。追加する場所は、 datepicker の日本語設定をした後あたりでよいかと思います。
javascript
1 moment.locale("ja", { 2 weekdaysShort: ["日", "月", "火", "水", "木", "金", "土"] 3 });
(3) 日付の文字列をテキストに設定するJQueryプラグイン
指定された日付dateから n日後の日付を日本語の文字列にし、これを、当該要素のテキストとして設定する、補助的なJQueryプラグインを作ります。これを後で使います。
javascript
1 // date から n 日後の日付を文字列にして、当該要素の text として設定 2 $.fn.dateText = function(date, n) { 3 return this.text(moment(date).add(n, 'days').format('YYYY/MM/DD (ddd)')); 4 }
例えば、以下
$('#test').dateText(new Date(), 3);
は id が test である要素のテキストに、今日から3日後、つまり、 2019/07/31 (水) という文字列を設定します。date で指定される日付（または日時）から n 日後の日付（または日時）を、moment(date).add(n, 'days') と書けるのが、momentの便利なところです。
上記のコードで使っている moment のメソッドは以下の2点です。
- 日付または日時に指定の日数などを加える： moment#add
- 指定したフォーマットの文字列を取得： moment#format
(4) 日付のリストを作成する関数
指定された日付 date を開始日として、これを含めて num 日の日付をリストアイテムとする、番号付きリスト <ol> を返す関数を作ります。ここで、(3) で作った自作プラグインを使います。
javascript
1 // dateを含めてnum日の日付のリストになる <ol> を返す。 2 function daysList(date, num) { 3 if (num <= 0) return; 4 5 return [...Array(num)].reduce( 6 (list, _, i) => list.append($('<li>').dateText(date, i)), 7 $('<ol>') 8 ); 9 }
(5) $('.output')の更新処理を追加
(4) で作成した daysList を使って、開始日から終了日までの日数を表示した後に、以下を追加します。
javascript
1$('.output').html(daysList(start, days)); // .outputの内容を開始日から終了日までのリストで置き換え
ご質問に挙げられているコードへの追加は以上になります。また上記 (1) から (5) を追加したコードを以下に上げておきました。
- github.com: jun68ykt/q202886
上記のレポジトリの初期コミットでは、ご質問に挙げられているコードをそのままコミットしています。
以下は、修正後の index.html を表示して、開始日に 2019/07/28 を選び、終了日に 2019/08/06 を選んだときの画面です。
以上、参考になれば幸いです。
追記
momentに用意されている、二つの日付、あるいは日時の差分を取得するメソッド moment#diff を使うと、以下の2行
var days = (end - start) / 1000 / 60 / 60 / 24; days++;
を、以下のように書くことができます。
var days = moment(end).diff(moment(start), 'days');
投稿2019/07/27 17:01
編集2019/07/28 00:59
総合スコア9058
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/28 01:58
2019/07/28 02:36