根据javascript或jquery中的选定日期禁用日期选择器的先前日期

时间:2015-07-03 10:17:05

标签: javascript jquery jquery-ui datepicker

我有两个日期选择器,如startdate和enddate。如果我在startdate中选择2015年6月18日,我必须在datedicker中将之前的日期禁用到enddate中的18thjune2015。

这是我的代码。

 $("#txtstartdate").datepicker({ minDate: 0 });

结束日期:

    var startdate = $("#txtstartdate").val();
    $("#txtenddate").datepicker({ minDate: startdate }); 

它不起作用。任何人都可以帮我这个。 谢谢。

6 个答案:

答案 0 :(得分:7)

您需要在更改开始日期时使用选项方法设置

$("#txtstartdate").datepicker({
  minDate: 0,
  onSelect: function(date) {
    $("#txtenddate").datepicker('option', 'minDate', date);
  }
});

$("#txtenddate").datepicker({});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<input id="txtstartdate" />
<input id="txtenddate" />

答案 1 :(得分:1)

如果您将输入标签用于属性type="datetime-local",请尝试以下操作:

let today = new Date().toLocaleString('sv-SE').slice(0, 16).replace(' ', 'T');
document.getElementById('someId').setAttribute("min", today);

答案 2 :(得分:0)

尝试添加yearRange

$("#txtenddate").datepicker({ 
    minDate: startdate,
    yearRange: '1999:2020', 
}); 

答案 3 :(得分:0)

您必须使用option

insted of

$("#txtenddate").datepicker({ minDate: startdate }); 

执行此操作:

$("#txtenddate").datepicker('option', 'minDate', date);

Change mindate in datepicker

答案 4 :(得分:0)

$("#txtstartdate").datepicker({
  minDate: 0,
  onSelect: function(date) {
    $("#txtenddate").datepicker('option', 'minDate', date);
  }
});

$("#txtenddate").datepicker({});



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>

<input id="txtstartdate" />
<input id="txtenddate" />

答案 5 :(得分:0)

如果 minDate 不起作用,您可以尝试 startDate 它肯定会起作用。

$('#datepicker4').datepicker({
  autoclose: true,
  startDate: new Date() 
 });