javascript - 如何拒绝输入字段中的相同日期？

Question

我正在使用 jQuery datepicker 选择多个日期，但我不想选择同一日期两次。这很难解释。

我创建了一个演示，可以帮助你们更好地理解。

 $(function() {
   $('.date-picker').datepicker({
     changeMonth: true,
     changeYear: true,
     showButtonPanel: true,
     dateFormat: "MM yy",
     onClose: function(dateText, inst) {
       var months = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
       var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
       $(this).datepicker('setDate', new Date(year, months, 1));
       var monthSelect = $("#monthSelector").val();
       var d = new Date(monthSelect).getTime();
       $("#month").val($("#month").val() + d + ",");
     }
   });
 });

.ui-datepicker-calendar {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="monthSelector" class="date-picker">
<input type="text" id="month">

Answer 1

将每个日期存储在数组中，并在每次发生“添加新日期”事件时检查是否重复

 $(function() {
   var dateArray = []; // for storing selected date as an array
   
   $('.date-picker').datepicker({
     changeMonth: true,
     changeYear: true,
     showButtonPanel: true,
     dateFormat: "MM yy",
     onClose: function(dateText, inst) {
       var isNotDuplicated = true; // for checking duplicated
       var months = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
       var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
       $(this).datepicker('setDate', new Date(year, months, 1));
       var monthSelect = $("#monthSelector").val();
       var d = new Date(monthSelect).getTime();
       
       // each time we have a new selected date, we check it for duplicated before using it
       for(let dd of dateArray) {
        if(d == dd) {
         // new selected date is duplicated, so we set flag isNotDuplicated to false, that will cause logics below to ignore it.
          isNotDuplicated = false;
          break;
        }
       }
 
       if(isNotDuplicated) {
         // new date is not duplicated, so we use it.
         dateArray.push(d);
         $("#month").val($("#month").val() + d + ",");
       }
     }
   });
 });

.ui-datepicker-calendar {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="monthSelector" class="date-picker">
<input type="text" id="month">