那么如何根据日历中的选定范围从字典中获取值

Question

Image of the console

我是 Javascript、html 和 css 的新手。任何帮助将不胜感激 ：） 我有一个日历，您可以在其中选择日期范围。我希望有这个范围来根据日期过滤掉字典。

我已经创建了日历和字典。这是我的 HTML 中的日历代码和字典代码。

我尝试使用 console.log() 进行调试。正如您在此处看到的，dateDict 和 fromDate 中的键具有相同的格式和数据类型，但 dateDict 不将 fromDate 识别为 dateDict 中的键之一。那么如何根据日历中的选定范围从字典中获取值

<!-- Block for the Calendar --> 
    <div class="calendar">
      <label>From Date</label>
      <input type="date" name="" max="" id="fromDate">
      <br><br>
      <label>To Date</label>
      <input type="date" name="" max="" id="toDate">
      <br><br>
      <button onclick="myFunction()">See Data</button>
    </div>

    <p id="selectedDate"></p>
    
    <!-- Block for Calendar to show error--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
    var fromDate;
    $('#fromDate').on('change', function(){
    fromDate = $(this).val();
    $('#toDate').prop('min', function(){
      return fromDate;
    })

  });

</script>

<!-- Storing the Value of the fromDate and toDate --> 
<script>
  var dateDict = {
    "2021-4-1": 1,
    "2021-4-2": 1,
    "2021-4-3": 5,
    "2021-4-4": 1,
    "2021-4-5": 2
  };
  console.log(dateDict);
  console.log(typeof dateDict);
  

  function myFunction() {
    var x = document.getElementById("fromDate").value;
    var y = document.getElementById("toDate").value;
    document.getElementById("selectedDate").innerHTML = x + y;
    console.log(x);
    console.log(typeof x); // x is a string
    console.log(fromDate);
    console.log(typeof fromDate); // is also a string
    console.log(fromDate in dateDict); //but gives false, when both have the same format and data type
    




  }
</script>

Answer 1

dateDict 中的键应该与日期选择器返回的格式相匹配，它目前缺少一些零。正确：

var dateDict = {
    "2021-04-01": 1,
    "2021-04-02": 1,
    "2021-04-03": 5,
    "2021-04-04": 1,
    "2021-04-05": 2
  };

另外，我在 datePicker 中发现的一个错误是，如果您先选择 to 日期，然后选择 from 日期，那么您实际上可能会搞砸逻辑，因为现在 to 日期可以在from 日期之前。为了解决这个问题，我所做的是每当from 日期发生更改时，to 日期就会被重置。

如果你想要dateDict中的日期对应的值，你可以简单地做dateDict[fromDate]。

<!-- Block for the Calendar --> 
    <div class="calendar">
      <label>From Date</label>
      <input type="date" name="" max="" id="fromDate">
      <br><br>
      <label>To Date</label>
      <input type="date" name="" max="" id="toDate">
      <br><br>
      <button onclick="myFunction()">See Data</button>
    </div>

    <p id="selectedDate"></p>
    
    <!-- Block for Calendar to show error--> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
    var fromDate;
    $('#fromDate').on('change', function(){
    fromDate = $(this).val();
    $('#toDate').val(""); // RESET toDate when fromDate is changed
    $('#toDate').prop('min', function(){
      return fromDate;
    })
  });
</script>

<!-- Storing the Value of the fromDate and toDate --> 
<script>
  var dateDict = {
    "2021-04-01": 1,
    "2021-04-02": 1,
    "2021-04-03": 5,
    "2021-04-04": 1,
    "2021-04-05": 2
  };

  function myFunction() {
    var x = document.getElementById("fromDate").value;
    var y = document.getElementById("toDate").value;
    document.getElementById("selectedDate").innerHTML = x + y;
    console.log(fromDate in dateDict); // gives true if fromDate is in dateDict
    console.log(dateDict[fromDate]); // gives the value corresponding to the date
  }
</script>