jQuery 在输入字段上明确键入时进行日期验证

Question

jQuery 日期验证，同时在输入字段上显式键入而不是 select 从 datepicker

我只想要今天这样的最短日期。即我不想 select 未来的日期。

在日期选择器中，我禁用了未来 dates.But，当我在字段中输入日期时，它正在接受未来日期。

这是我的jQuery代码

jQuery(document).ready(function() {
  jQuery("#datepicker").datepicker({  maxDate: new Date(),dateFormat: 'MM/DD/YYYY' });
  jQuery('.fa-calendar').click(function() {
    jQuery("#datepicker").focus();
  });
});

Answer 1

试试这个：

jQuery(document).ready(function() {

      jQuery("#datepicker").datepicker({                         
                    dateFormat: 'MM/DD/YYYY',
                    maxDate: '+10Y',
                    minDate: '+0M',
                    changeMonth: true,
                    changeYear: true,
                    yearRange: "-0:+10", });

      jQuery('.fa-calendar').click(function() {
        jQuery("#datepicker").focus();
      });
    });

此示例允许您 select 最大 10 years 前一年至 Today。

Answer 2

我想您可能正在寻找这样的东西。您可以通过键入并验证它不大于今天来提供输入日期。我还建议只读地使用你的日期选择器字段，这样用户就不会像@Mufi 在评论中所说的那样提供无效输入。

$(document).ready(function() {
  $("#datepicker,#datepickerReadonly").datepicker({  
   maxDate: new Date(),
   dateFormat: 'dd/mm/yy',
 changeYear:true,
 changeMonth:true,
  });
  
  $('.fa-calendar').click(function() {
    $("#datepicker").focus();
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="datepicker">
<input type="button" id="" value="check" onclick="check_();"/><br>
Read Only Example: <br><input type="text" readonly="readonly" id="datepickerReadonly">

<script>
function check_(){
 if(new Date($('#datepicker').val()) > new Date()){
  alert("you are not allowed to select future date");
  $('#datepicker').val('');
 }
}
</script>

jQuery 在输入字段上明确键入时进行日期验证

jQuery Date Validation while explicitly type on the input field

javascript

jquery

date

jquery-ui-datepicker