日期验证基于当前日期

时间:2015-11-05 11:14:37

标签: javascript jquery date

我有两个日期,即Date和Date to,我的问题是,我想要Date只能点击/选择过去的日期直到当前日期,然后日期可以自动选择当前日期

这是代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Select a Date Range</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
 $(function() {
    $( "#from" ).datepicker({
      dateFormat: 'yy-mm-dd',
      defaultDate: "+1 	w",
      changeMonth: true,
	  changeYear: true,
      numberOfMonths: 1,
      yearRange: '2006:'+(new Date).getFullYear() ,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      dateFormat: 'yy-mm-dd',
      defaultDate: "+1w",
      changeMonth: true,
	  changeYear: true,
      numberOfMonths: 1,
      yearRange: '2006:'+(new Date).getFullYear() ,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  
  </script>
</head>
<body>
 
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
 
 
</body>
</html>

2 个答案:

答案 0 :(得分:2)

使用maxDate属性我们可以满足您的要求。

请将DateDate的maxDate设置为今天的日期日期。

$(function() {
   $( "#from" ).datepicker({
    dateFormat: 'yy-mm-dd',
    defaultDate: "+1    w",
    maxDate: new Date(),
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    yearRange: '2006:'+(new Date).getFullYear() ,
    onClose: function( selectedDate ) {
    $( "#to" ).datepicker( "option", "minDate", selectedDate );
  }
});
  $( "#to" ).datepicker({
    dateFormat: 'yy-mm-dd',
    defaultDate: "+1w",
    minDate : new Date(),
    maxDate: new Date(), 
    changeMonth: true,
    changeYear: true,
    numberOfMonths: 1,
    yearRange: '2006:'+(new Date).getFullYear() ,
    onClose: function( selectedDate ) {
    $( "#from" ).datepicker( "option", "maxDate", selectedDate );
  }
}).datepicker("setDate",new Date());

});

希望这会对你有所帮助。

Fiddle

答案 1 :(得分:1)

&#13;
&#13;
$(function() {
    $( "#from" ).datepicker({
      dateFormat: 'yy-mm-dd',
      defaultDate: "+1 	w",
      changeMonth: true,
	  changeYear: true,
      numberOfMonths: 1,
      yearRange: '2006:'+(new Date).getFullYear() ,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      },
      maxDate: 0
    });
    $( "#to" ).datepicker({
      dateFormat: 'yy-mm-dd',
      defaultDate: "+1w",
      changeMonth: true,
	  changeYear: true,
      numberOfMonths: 1,
      yearRange: '2006:'+(new Date).getFullYear(),
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    }).datepicker("setDate", new Date()).datepicker( "option", "disabled", true );
  });
&#13;
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
&#13;
&#13;
&#13;