Javascript JQuery datepickers-从开始日期设置结束日期

JQuery datepickers- setting end date from a start date

提问by UglyTeapot

There are two Jquery datepickers in use, StartDate and EndDate

使用了两个 Jquery 日期选择器，StartDate 和 EndDate

<input id="StartDate" class="datepicker setNext hasDatepicker" type="text" value="13/02/2015" name="StartDate">
<input id="EndDate" class="datepicker hasDatepicker" type="text" value="15/02/2015" name="EndDate">

When the StartDate datepicker is selected I want the EndDate datepickers to be the StartDate + 1 Day, and to make it so that earlier dates cannot be selected in EndDate than are in StartDate.

选择 StartDate 日期选择器时，我希望 EndDate 日期选择器为 StartDate + 1 天，并使其不能在 EndDate 中选择比在 StartDate 中更早的日期。

I have this code:

我有这个代码：

$(function () {
    $(".datepicker").datepicker({
        dateFormat: 'dd/mm/yy',
        onSelect: function( selectedDate ) {
            if(this.id == 'StartDate') {
                var minDate = selectedDate + 1;
                $('#to').datepicker("option", "minDate", minDate);

            }
        }
   });
});

So it hits the onSelect ok, but then the adding 1 to the date doesn't work (I just get the datestring with a 1 on the end, so '31/12/20141').

所以它点击 onSelect ok，但是在日期上加 1 不起作用（我只是得到最后一个 1 的日期字符串，所以'31/12/20141'）。

I have also tried the following in the OnSelect, assuming that selectedDate was a string not a date type:

我还在 OnSelect 中尝试了以下内容，假设 selectedDate 是字符串而不是日期类型：

                var minDate = new Date(selectedDate);
                var tomorrow = new Date();
                tomorrow.setDate(minDate.getDate() + 1);
                $('#to').datepicker("option", "minDate", tomorrow);

minDate ends up being an Invalid Date, as does tomorrow. I can't work out how to set dates from the string. Trying something along the lines of:

minDate 最终成为无效日期，明天也是如此。我不知道如何从字符串中设置日期。尝试以下方式：

var minDate = selectedDate.getDate();

Gets me an 'Uncaught TypeError: undefined is not a function'.

给我一个 'Uncaught TypeError: undefined is not a function'。

Using JQuery 1.11.1, UK date formats of dd/mm/yyyy.

使用 JQuery 1.11.1，英国日期格式为 dd/mm/yyyy。

采纳答案by acontell

If you want to change the datepicker date of another datepicker adding a day, you can do something like this:

如果要更改另一个日期选择器添加一天的日期选择器日期，您可以执行以下操作：

Notethat selectedDate is in format dd/mm/YYYY which is not a valid string date format to use in Date constructor. You have then to parse it.

请注意， selectedDate 的格式为 dd/mm/YYYY，这不是 Date 构造函数中使用的有效字符串日期格式。然后你必须解析它。

        var arr = selectedDate.split("/");
        var date = new Date(arr[2]+"-"+arr[1]+"-"+arr[0]);
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        var minDate = new Date(y, m, d + 1);
        $("#EndDate").datepicker('setDate', minDate);

Here you have a working example fiddle

在这里你有一个工作示例小提琴

回答by Sahil Bhati

here i am letting the user select interval of 10 days only..you can modify it according to your requirement.

在这里，我让用户只选择 10 天的间隔......你可以根据你的要求修改它。

$(document).ready(function() {
    var minDate ;
    var maxDate;
    var mDate
    var j = jQuery.noConflict();
    j( "#startTime" ).datepicker({
    onSelect: function() {
    minDate = j( "#startTime" ).datepicker("getDate");
    var mDate = new Date(minDate.setDate(minDate.getDate()));
    maxDate = new Date(minDate.setDate(minDate.getDate() + 10));
j("#endTime").datepicker("setDate", maxDate);
j( "#endTime" ).datepicker( "option", "minDate", mDate);
j( "#endTime" ).datepicker( "option", "maxDate", maxDate);
}
});
var tdate = new Date();
var ddate = new Date(tdate.setDate(tdate.getDate() + 10));
j("#startTime").datepicker("setDate", new Date());
j( "#endTime" ).datepicker();
j("#endTime").datepicker("setDate",ddate);
  });

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><div>Please Select Dates:</div>
  <p>Strat Date:<input id ="startTime" type="text" ></input></p>
  <p>End Date:<input id ="endTime" type="text" ></input></p>

回答by Invicnaper

You can use the setDateand getDate.

您可以使用setDate和getDate。

Example:

例子：

<input id="StartDate" class="datepicker setNext hasDatepicker" type="text" value="13/02/2015" name="StartDate">
<script>
function convertInputtoDate(){
    var input = document.getElementById("StartDate").value;
    var date = input.split('/');
    var selectdate = new Date(date[2], date[1], date[0]);

    return selectdate;
}
var today = convertInputtoDate();
var tomorrow = new Date(convertInputtoDate());
tomorrow.setDate(today.getDate() + 1);
alert('Today : ' + today + ' Tommorow :' + tomorrow.toLocaleString());
</script>

If you want to change the date format, use:

如果要更改日期格式，请使用：

tomorrow.toLocaleString(); // output will be : d/m/Y H:M:S

And to convert your input to date:

并将您的输入转换为日期：

function convertInputtoDate(){
    var input = document.getElementById("StartDate").value;
    var date = input.split('/');
    var selectdate = new Date(date[2], date[1], date[0]);

    return selectdate;
}