javascript - jquery datetimepicker 设置为日期取决于日期

Question

我正在使用 jQuery“datetimepicker”，我想根据“起始日期”值和包含以下值的选择框值来设置“截止日期”值。

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
});

请提出建议。

谢谢

Answer 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