質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

【datepicker】3つのカレンダーの日付を比較して、最大日を取得したい

TMTN
TMTN

総合スコア51

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

0グッド

0クリップ

314閲覧

投稿2022/12/01 06:26

編集2022/12/01 08:46

実現したいこと

datepickerを使用し3つのカレンダー(datepicker1,datepicker2,datepicker3)を用意、現状カレンダーで選択された日付の値をセッションストレージで格納しております。

date1 = datepicker1
date2 = datepicker2
date3 = datepicker3

今回は3つのカレンダーの日付を比較して、最大日を取得に行き詰まってしまっております...

分かる方いらっしゃいましたらお力添えを頂きたいです...
以上、よろしくお願い致します。

該当のソースコード

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});

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

int32_t

2022/12/01 07:07 編集

①の方法でだいたい大丈夫だと思います。同じ日付が複数入る可能性があると少し修正する必要がありますが。 どんなケースで駄目でしたか?
TMTN

2022/12/01 07:27

コメントありがとうございます。 なぜかカレンダーで1-9日目だと上手く機能するのですが、二桁(10日以上)になるとなぜか最大日として認識されないです。。。文字列で比較しているのですが、なぜか原因がわからずでして。。。
int32_t

2022/12/01 07:33

1-9日目のときは value の文字列の日パートは2桁になってますか?
TMTN

2022/12/01 07:44

1-9日目は、2022年12月1日と1桁ですね・・・ 一桁の状態で比較できないですかね・・・
int32_t

2022/12/01 07:48

質問文のコードでは dateFormat:'yy年mm月dd日', となってますから、2桁になるはずです。テストしているコードでは d日になってませんか。 d日が正しい指定であれば、②のようなアプローチが必要でしょうね。
TMTN

2022/12/01 08:14

おっしゃる通りテストしているコードでは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
int32_t

総合スコア17200

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

TMTN

2022/12/01 07:29

コメントありがとうございます! 上記コードでお伺いしたいことがあるのですが、「.sort((a, b) => a.localeCompare(b)).at(-1);」箇所について調べても理解できず・・・どういう処理なのでしょうか・・・
退会済みユーザー

退会済みユーザー

2022/12/01 07:45

[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 を得ています。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。