Q&A
①の方法でだいたい大丈夫だと思います。同じ日付が複数入る可能性があると少し修正する必要がありますが。
どんなケースで駄目でしたか?
実現したいこと
datepickerを使用し３つのカレンダー（datepicker1,datepicker2,datepicker3）を用意、現状カレンダーで選択された日付の値をセッションストレージで格納しております。
date1 = datepicker1
date2 = datepicker2
date3 = datepicker3
今回は３つのカレンダーの日付を比較して、最大日を取得に行き詰まってしまっております...
分かる方いらっしゃいましたらお力添えを頂きたいです...
以上、よろしくお願い致します。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <link rel="stylesheet" href="../カレンダー/test.css"> 9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css"> 10 <title>カレンダー</title> 11</head> 12 13<body class="center"> 14 <h1 style="margin-bottom: 0;">カレンダー</h1> 15 <div class="box center" style="display: flex; justify-content: center; align-items: center;"> 16 <div style="display: flex; flex-direction: column; width: 300px;"> 17 <input type="text" id="datepicker1"> 18 <input type="text" id="datepicker2"> 19 <input type="text" id="datepicker3"> 20 </div> 21 </div> 22 23 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 24 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 25 <script src="../カレンダー/test.js"></script> 26</body> 27 28</html>
css
1.box { 2 width: 900px; 3 height: 400px; 4 padding: 0.5em 1em; 5 margin: 2em 0; 6 color: #5d627b; 7 background: white; 8 border-top: solid 5px #5d627b; 9 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22); 10} 11 12input { 13 margin-bottom: 8px; 14}
js
1$(function () { 2 3 $('#datepicker1').datepicker({ 4 dateFormat:'yy年mm月dd日', 5 onSelect:function(){ 6 var date1 = document.getElementById('datepicker1').value; 7 sessionStorage.setItem('date1',date1) 8 } 9 }); 10 11 $('#datepicker2').datepicker({ 12 dateFormat:'yy年mm月dd日', 13 onSelect:function(){ 14 var date2 = document.getElementById('datepicker2').value; 15 sessionStorage.setItem('date2',date2) 16 } 17 }); 18 19 $('#datepicker3').datepicker({ 20 dateFormat:'yy年mm月dd日', 21 onSelect:function(){ 22 var date3 = document.getElementById('datepicker3').value; 23 sessionStorage.setItem('date3',date3) 24 } 25 }); 26 27});
コメントありがとうございます。
なぜかカレンダーで1-9日目だと上手く機能するのですが、二桁（10日以上）になるとなぜか最大日として認識されないです。。。文字列で比較しているのですが、なぜか原因がわからずでして。。。
1-9日目のときは value の文字列の日パートは2桁になってますか?
1-9日目は、2022年12月1日と1桁ですね・・・
一桁の状態で比較できないですかね・・・
質問文のコードでは dateFormat:'yy年mm月dd日', となってますから、2桁になるはずです。テストしているコードでは d日になってませんか。
d日が正しい指定であれば、②のようなアプローチが必要でしょうね。
おっしゃる通りテストしているコードではdになってました・・・しかし質問文のコードの方が誤りだったので②のようなアプリーチで再検討しますmm
回答2件
0
ベストアンサー
コメントでのやり取りによると、日パートは1桁のことがあるそうで、シンプルな文字列比較は使えませんね。
日付の文字列から数値の部分を抜き出して再構成する必要があります。
js
1let maxDate = [data1, data2, data3].map(d => { 2 const n = d.split(/[^\d]/); 3 return n[0] * 10000 + n[1] * 100 + n[2]; 4}).sort((a, b) => b - a)[0];
投稿2022/12/01 08:32
編集2022/12/01 08:39総合スコア21929
0
比較対象の文字列がすべて 'yy年mm月dd日'形式なのであれば、以下でどうでしょうか？
javascript
1[date1, date2, date3].sort((a, b) => a.localeCompare(b)).at(-1);
使用例としてはこんな感じです。
javascript
1const date1 = '22年12月01日'; 2const date2 = '23年01月01日'; 3const date3 = '22年11月30日'; 4 5const maxDate = [date1, date2, date3].sort((a, b) => a.localeCompare(b)).at(-1); 6 7console.log(maxDate); // "23年01月01日" 8
投稿2022/12/01 06:46
編集2022/12/01 07:11
退会済みユーザー
総合スコア0
コメントありがとうございます！
上記コードでお伺いしたいことがあるのですが、「.sort((a, b) => a.localeCompare(b)).at(-1);」箇所について調べても理解できず・・・どういう処理なのでしょうか・・・
[date1, date2, date3] という文字列の配列を昇順ソートし、並び順で最後にくる文字列が日付として最大のものであるので、配列のat メソッドに -1 を渡して最後の要素を取り出しています。はしょらないで書くと
const dates = [date1, date2, date3];
const sortedDates = dates.sort((a, b) => a.localeCompare(b));
const maxDate = sortedDates.at(-1);
という処理をやって maxDate を得ています。
あなたの回答
tips
プレビュー
