如何拒绝同一日期到输入字段？

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

店在阵列中的每个日期和检查重复每次 “添加新的日期” 事件occure

$(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">