Question

我需要使用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'
    });

});

不知何故，我无法使用End Date功能。

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

Answer 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∂提示

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

2 个答案: