jquery datetimepicker 设置为日期取决于从日期答案

【问题标题】：jquery datetimepicker set to date depand on from datejquery datetimepicker 设置为日期取决于从日期
【发布时间】：2015-08-11 23:05:55
【问题描述】：

我正在使用 jQuery "datetimepicker"，我想设置 "to date" 值取决于 "from date" 值和包含以下值的选择框值。

1- 每周（7 天以上）
2- 每月（30 天以上）
3- 半年一次（6 个月以上）
3 年（1 年以上）

例子：

1- 选择日期：2015-05-29
2- 持续时间每月
3- 迄今为止应该是 2015-06-29

我正在使用以下代码来选择日期开始日期。

jQuery('#start_date').datetimepicker({
    format:'m/d/Y',
    closeOnDateSelect:true,
    timepicker:false
});

请提出建议。

谢谢

【问题讨论】：

您的其他代码在哪里取决于选择每周、每月、...

标签： javascript php jquery datetime datepicker

【解决方案1】：

如果我理解正确，你有这样的事情：

a) 像这样的选择框

Options : 
<select id="time">
    <option value="1">Weekly (7+ days)</option>
    <option value="2">Monthly (30+ days)</option>
    <option value="3">Half Yearly (6+ months)</option>
    <option value="4">Yearly (1+ Year)</option>
</select>

b) 和两个日期选择器，如下所示：

Select From Date :
<input id="start_date" type="text" />
Select END Date :
<input id="end_date" type="text" />

c) 用于更改第二个日期选择器的日期选择器和 onSelect 函数的代码：

/** addExtraTime() function 
*    this function changes the second datepicker ( $('#end_date').datepicker )
*    according to the selected value of select box.
*/
var addExtraTime = function (aDateObj) {
    var actualDate = aDateObj;
    var newDate = aDateObj;
    var extraTime = $('#time').val(); //string
    if (extraTime === '1') { //Weekly = +7d
        newDate = new Date(actualDate.getFullYear(), actualDate.getMonth(), actualDate.getDate() + 7);
        $('#end_date').datepicker('setDate', newDate);
    } else if (extraTime === '2') { //Monthly = +1m
        newDate = new Date(actualDate.getFullYear(), actualDate.getMonth() + 1, actualDate.getDate());
        $('#end_date').datepicker('setDate', newDate);
    } else if (extraTime === '3') { //Half Yearly = +6m
        newDate = new Date(actualDate.getFullYear(), actualDate.getMonth() + 6, actualDate.getDate());
        $('#end_date').datepicker('setDate', newDate);
    } else if (extraTime === '4') { //Yearly = +1y
        newDate = new Date(actualDate.getFullYear() + 1, actualDate.getMonth(), actualDate.getDate());
        $('#end_date').datepicker('setDate', newDate);
    } //End of if..else
};

/* We watch for changes in the select box and call the addExtraTime() */
$('#time').change(function () {
    var currentDate = $('#start_date').datepicker("getDate");
    addExtraTime(currentDate);
});

/* From Date picker */
$('#start_date').datepicker({
    format: 'm/d/Y',
    closeOnDateSelect: true,
    timepicker: false,
    onSelect: function (selectedDate) {
        /*
         * selectedDate is a string so we convert is to a Date obj
         */
        var selectedDateObj = new Date(selectedDate);
        addExtraTime(selectedDateObj);
    } //End of onSelect

});

/* To Date picker */
$('#end_date').datepicker({
    format: 'm/d/Y',
    closeOnDateSelect: true,
    timepicker: false
});

您可以看到它的实际效果：here

【讨论】：

感谢 Cubakos，但是如果我们更改下拉选项呢？您能否为其提供事件，以便它会根据所选值更改 end_date。
@pratik 欢迎您。我编辑了我的答案以匹配您的要求。我将 if..else 语句从 onSelect 函数移到了一个函数中，所以我们可以在 change 函数中调用它，我们附加到我们的选择框。