无法使用 jquery 在 datepicker 中选择更多日期答案

【问题标题】：Cannot pick further dates in datepicker using jquery无法使用 jquery 在 datepicker 中选择更多日期
【发布时间】：2016-12-07 02:13:22
【问题描述】：

我是这里的新手，我已经设置了开始日期 +60 D，我对为什么不能选择更多日期感到困惑，我的计划是设置默认日期范围 +60D，我会能够选择更多日期。这里是示例链接http://jsfiddle.net/jquerybyexample/LGw6F/

From: <input type="text" id="txtFromDate" />
To: <input type="text" id="txtToDate" />


$(document).ready(function(){
    $("#txtFromDate").datepicker({
        minDate: 0,
        maxDate: "+60D",
        numberOfMonths: 2,
        onSelect: function(selected) {
          $("#txtToDate").datepicker("option","minDate", selected)
        }
    });
    $("#txtToDate").datepicker({ 
        minDate: 0,
        maxDate:"+60D",
        numberOfMonths: 2,
        onSelect: function(selected) {
           $("#txtFromDate").datepicker("option","maxDate", selected)
        }
    });  
});

【问题讨论】：

我的理解是：你想选择今天和未来 60 天之间的第一个日期，然后从第一个选择的日期开始在它和未来 60 天之间选择第二个日期？
@Daidon，不，先生，我的意思是，我能够设置默认日期 +60D，但问题是我无法选择更多日期，比如有什么方法可以设置默认日期日期范围，我还能选择更多日期吗？
将 minDate 设置为 +60 而不是 maxDate。
@Teapetetose Ronald 的回答解决了你的问题吗？
@Teapetetose，嗯？你真的想发生什么？你说默认日期应该是 +60 天，你应该可以进一步选择。请举例说明您的问题。

标签： jquery datepicker jquery-ui-datepicker

【解决方案1】：

要预先填充您的输入字段（“输入默认日期”），请执行以下操作：

$(function(){
    $("#txtFromDate").datepicker({
        minDate:0,
        maxDate: "+60D",
        numberOfMonths: 2,
    });
    $("#txtToDate").datepicker({ 
        minDate:0,
        maxDate:"+60D",
        numberOfMonths: 2,
    });
    var default_date = new Date();
    default_date.setDate(default_date.getDate()+60);
    $('#txtFromDate').datepicker('setDate', new Date());
    $('#txtToDate').datepicker('setDate', default_date);
});
$("#txtFromDate").datepicker({
        onSelect: function(dateText) {
            $("#txtToDate").datepicker("option", "minDate", $('#txtFromDate').datepicker("getDate") );
            var date2 = $("#txtFromDate").datepicker("getDate");
            date2.setDate(date2.getDate()+60);
            $("#txtToDate").datepicker("option", "maxDate", date2);
        }
    });

body
{
    font-size:8pt;
    font-family:Verdana;
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<br/>
From: <input type="text" id="txtFromDate" />
To: <input type="text" id="txtToDate" />

<!-- begin snippet: js hide: false console: true babel: false -->

完整的 HTML 示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
body
{
    font-size:8pt;
    font-family:Verdana;
    padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
    
<br/>
From: <input type="text" id="txtFromDate" />
To: <input type="text" id="txtToDate" />

<script type="text/javascript">
$(function(){
	$("#txtFromDate").datepicker({
		minDate:0,
		maxDate: "+60D",
		numberOfMonths: 2,
	});
	$("#txtToDate").datepicker({ 
		minDate:0,
		maxDate:"+60D",
		numberOfMonths: 2,
	}); 
	var default_date = new Date();
	default_date.setDate(default_date.getDate()+60);
	$('#txtFromDate').datepicker('setDate', new Date());
	$('#txtToDate').datepicker('setDate', default_date);
});
$("#txtFromDate").datepicker({
    onSelect: function(dateText) {
        $("#txtToDate").datepicker("option", "minDate", $('#txtFromDate').datepicker("getDate") );
        var date2 = $("#txtFromDate").datepicker("getDate");
        date2.setDate(date2.getDate()+60);
        $("#txtToDate").datepicker("option", "maxDate", date2);
    }
});
</script>

</body>
</html>

我希望这是你想要的。问候

【讨论】：

【解决方案2】：

根据最新评论再次更新。

更新了 jFiddle (http://jsfiddle.net/LGw6F/2230/)

$(document).ready(function(){
   $("#txtFromDate").datepicker({ 
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    minDate: new Date(),
    numberOfMonths: 2,
    onSelect: function(selected) {
          $("#txtToDate").datepicker("option","minDate",selected);
          var  selectedDate = $("#txtFromDate").datepicker("getDate");
          var msecsInADay = 5184000000;
          var endDate = new Date(selectedDate.getTime() + msecsInADay);
          $("#txtToDate").datepicker("option","maxDate",endDate);

        }
  });

  $("#txtToDate").datepicker({ 
      dateFormat: 'yy-mm-dd',
      numberOfMonths: 2,
  });
});

【讨论】：

我也猜到了
@Daidon，OP的问题不清楚。连他自己都不知道自己想做什么。哈哈
我认为 OP 在英语方面可能有轻微的困难。他可能会更好地提出他的问题。否则我看不出有人会给出正确的答案。
@Daidon，他的英语说得很好，就像我读过的一样。检查了他的个人资料，他在犹他州工作。
嗯，只能猜测。但是检查个人资料是个好主意！那他肯定不是在和语言打架。