jQuery日期验证,同时在输入字段上显式输入

时间:2017-04-25 10:43:15

标签: javascript jquery date jquery-ui-datepicker

jQuery Date Validation,同时在输入字段上显式输入,而不是从datepicker中选择

我只想要今天的最短日期。即我不想选择未来的日期。

在日期选择器中,我禁用了将来的日期。但是,当我在字段中输入日期时,它接受将来的日期。

这是我的jQuery代码

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

2 个答案:

答案 0 :(得分:2)

我想你可能正在寻找这样的东西。您可以通过键入来输入日期,并将其验证为不超过今天。我还建议你只使用你的datepicker字段,这样用户就不能像@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>

答案 1 :(得分:0)

试试这个:

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();
      });
    });

此示例允许您选择前一年10 years的最大Today