使用 datepicker 根据开始日期设置结束日期答案

【问题标题】：Set an end date based on start date using datepicker使用 datepicker 根据开始日期设置结束日期
【发布时间】：2014-11-07 17:56:29
【问题描述】：

我需要使用 datepicker 设置开始日期（仅允许将来的日期），然后根据特定月份中选择的日期设置结束日期，其中结束日期将是开始日期后所选月份的最后一天。

HTML 代码如下：

<fieldset>
    <label for="dataStart">Start Date</label>
    <input type="text" style="width: 88px;" class="datepicker" id="dataStart" size="10" name="dataStart" />
</fieldset>
<fieldset>
    <label for="dataEnd">End Date</label>
   <input type="text" style="width: 88px;" class="end_date" id="dataEnd" size="10" name="dataEnd" value="<!-- last day of mont from dataStart -->" readonly />
</fieldset>

jQuery 代码：

function getLastDayOfYearAndMonth(year, month)
{
    return(new Date((new Date(year, month + 1, 1)) - 1)).getDate();
}
$(document).ready(function() {
    $("#dataStart").datepicker({
        minDate: 1,
        onSelect: function(theDate) {
            var defalulDate = new Date();
            defalulDate.getLastDayOfYearAndMonth(date.getFullYear(), date.getMonth()));
            $("#dataEnd").datepicker(defaultDate: defalulDate);
        },
        beforeShow: function() {
            $('#ui-datepicker-div').css('z-index', 9999);
        },
        dateFormat: 'mm/dd/yy'
    });

});

不知何故，我无法让结束日期功能正常工作。

【问题讨论】：

标签： javascript jquery date datepicker

【解决方案1】：

This is the working fiddle....

HTML

<p>From Date: <input type="text" id="fromDatePicker"></p>
<p>To Date: <input type="text" id="toDatePicker"></p>

JavaScript

var dateToday = new Date(); 
$(function() {
    $( "#fromDatePicker" ).datepicker({        
        minDate: dateToday,
        onSelect: function(selected,evnt) {
        var date = $(this).datepicker('getDate'),  
            day  = date.getDate(),  
            month = date.getMonth() + 1,              
            year =  date.getFullYear();            
            updateToDate(day,month,year);
    }

    });
});

function updateToDate(day,month,year){     
   var myDate = new Date();
    var updatedDay;
    if(month==9|| month==4 ||month==6 || month==11){
        updatedDay = 30;
    }
    else if (month==2){
        updatedDay = 28;
    }
    else{
        updatedDay = 31;
    }
   var prettyDate =month+ '/' +updatedDay + '/' +year;
$("#toDatePicker").val(prettyDate);
}

$(function() {
    $( "#toDatePicker" ).datepicker({        
        minDate: dateToday
    });
});

【讨论】：

在这种情况下如何处理二月？我认为它需要使用带有 +1m 偏移量的 getDate(0)，而不是基于“硬编码”月份的 updatedDay。
嗯，闰年 2 月可能有 29 天，因此上述解决方案并不完美，但可以很好地使用它并使其正常工作。

【解决方案2】：

低于准确的版本并且没有“二月闰年”错误：

HTML：

    <fieldset>
        <label for="dataStart">Start Date</label>
        <input type="text" style="width: 88px;" class="datepicker" id="dataStart" size="10" name="dataStart" />
    </fieldset>
    <fieldset>
        <label for="dataEnd">End Date</label>
       <input type="text" style="width: 88px;" class="end_date" id="dataEnd" size="10" name="dataEnd" value="" readonly />
    </fieldset>
<div>Days counted between dates: <span id="calculated"></span></div>

jQuery:

$(document).ready(function() {
     $("#dataStart").datepicker({
        minDate: '+1d',
        changeMonth: true,
        changeYear: true,
        dateFormat: 'mm/dd/yy',
        onSelect: function(date){
            var dates = date.split('/');
            var lastDate = new Date(dates[2], dates[0], 0);
            var y = lastDate.getFullYear(), m = lastDate.getMonth(), d = lastDate.getDate();
            m = ('0'+ (m+1)).slice(-2);

            $('#dataEnd').val(m+'/'+d+'/'+y);

            var start = $('#dataStart').datepicker('getDate');
            $('#dataEnd').datepicker({dateFormat: 'mm/dd/yy'}).datepicker('setDate', m+'/'+d+'/'+y);
            var end = $('#dataEnd').datepicker('getDate');
            var days   = ((end - start)/1000/60/60/24)+1;

            $('#calculated').text(days);          
        }
    });
});

和JSFiddle

PS。感谢 jQuery 论坛的 Sµßhrånil∂ 提供提示

【讨论】：