jqueryを使用したリスト絞り込み機能を作成したい

実現したいこと

ここに実現したいことを箇条書きで書いてください。
<select name="datestart" id="datestart">
<input type="date" id="datestart" class="datestart" min="2021-04-01" max="2022-03-31">
</select>
〜
<select name="dateend" id="dateend">
<input type="date" id="dateend" class="dateend" min="2021-04-01" max="2022-03-31">
</select>

上記のselectタグを利用して、数あるliタグの中から、<li class="item" data-accident="2021-05-21”>を表示させるような絞り込み機能をjqueryを使用して作成したい

前提

ここに質問の内容を詳しく書いてください。
<select name="datestart" id="datestart">
<input type="date" id="datestart" class="datestart" min="2021-04-01" max="2022-03-31">
</select>
〜
<select name="dateend" id="dateend">
<input type="date" id="dateend" class="dateend" min="2021-04-01" max="2022-03-31">
</select>

上記のselectタグを利用して、数あるliタグの中から、<li class="item" data-accident="2021-05-21”>を表示させるような絞り込み機能をjqueryを使用して、
以下のように実装するも絞り込みができません。
jqueryで絞り込みできるような実装方法があれば、ご教示頂けますと助かります。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
 <select name="datestart" id="datestart">
        <input type="date" id="datestart" class="datestart" min="2021-04-01" max="2022-03-31">       
    </select>
       〜
    <select name="dateend" id="dateend">
        <input type="date" id="dateend" class="dateend" min="2021-04-01" max="2022-03-31">
    </select>  
            
<ul id="list">
        <li class="item" data-accident="2021-05-21" data-time="3時" data-color="blue" data-sizesecond="medium" data-sizethird="large" data-filter="りんご">Item 1</li>
        <li class="item" data-accident="2021-08-11" data-color="red" data-size="large" data-filter="">Item 2</li>
        <li class="item" data-accident="2021-06-18" data-color="blue" data-size="small" data-filter="">Item 3</li>
        <li class="item" data-accident="2021-10-13" data-color="green" data-size="medium" data-filter="">Item 4</li>
    </ul>
ソースコード
```jquery

$('#datestart, #dateend').on('change', function() {
      // 開始日・終了日を取得
      var start = $('#datestart').val();
      var end = $('#dateend').val();
      
      // すべてのアイテムを非表示にする
       $('.item').hide();
      
      // 開始日・終了日の範囲内のアイテムを表示する
      $('.item').each(function() {
        var date = $(this).data('accident');
        if (date >= start && date <= end) {
          $(this).show();
        }
      });
    });


### 試したこと
①startdateより日付が小さかったら、表示しない。endDateよりも日付の値が大きかったら、表示しない。
　といったコードを実装→絞り込みできず
items.each(function()  {
         var accidentDate = $(this).data('accident');

          if (accidentDate < startDate || accidentDate > endDate){
             $(this).hide();
          } else {
             $(this).show();
          }
       });
    });

②data-accidentの値を日付型にするために、『var date = new Date("2021-05-21");
  $("#data-accident").val(date.getFullYear() + "-" + ("0" + (date.getMonth() + 1)).slice(-2) + "-" + ("0" + date.getDate()).slice(-2));』を
『$('#datestart, #dateend').on('change', function() {』の1行下に入力するも、絞り込みできず

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
jquery3.6.3を使用

m.ts10806

2023/04/05 22:18

マークダウンのcodeが後半の本文喰ってしまってるので調整してください。「できない」ではなく「起きていること」を確認してください。例えば。・各条件式の評価結果のtrue/falseを個別で・どこを通っているか　意図した場所を通っているかデバッグ・エラーが起きているかどうか

行動規範の内容に同意します

回答1件

ベストアンサー

原因

HTML が間違っているので、 javascript で start および end を取得できない状態です。

select 要素の中に記述できるのは option または optgroup だけです。input を入れるのは間違ってます。
select 要素と input 要素に同じ id が設定されていますが、これもおかしいです。id は一意でなければなりません。

修正方法

select を消して、input だけにします。

html
1      <input type="date" id="datestart" class="datestart" min="2021-04-01" max="2022-03-31">       
2      〜
3      <input type="date" id="dateend" class="dateend" min="2021-04-01" max="2022-03-31">

javascript は今のままでも動作すると思いますが、開始日と終了日を両方指定しなければ検索できない（片方だけ指定すると検索結果0件になる）ので少し不便です。
以下のように変数のデフォルト値を指定すれば、開始日のみ or 終了日のみでの検索も出来るようになります。

diff
1    $('#datestart, #dateend').on('change', function() {
2      // 開始日・終了日を取得
3-     var start = $('#datestart').val();
4-     var end = $('#dateend').val();
5+     var start = $('#datestart').val() || '0000-01-01';
6+     var end = $('#dateend').val() || '9999-12-31';
7
8      // すべてのアイテムを非表示にする
9      $('.item').hide();
10
11      // 開始日・終了日の範囲内のアイテムを表示する
12      $('.item').each(function() {
13        var date = $(this).data('accident');
14        if (date >= start && date <= end) {
15          $(this).show();
16        }
17      });
18    });