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

Question

I need to set a start date using datepicker (allows future dates only) and then set an end date based on chosen day from particular month where end date will be last day of chosen month from Start Date.

HTML code looks like:

<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 code:

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

});

Somehow I'm not able to get End Date functionality to work.

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

Below accurate version and w/o "February leap year" bug:

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

and JSFiddle

PS. Thanks to Sµßhrånil∂ from jQuery Forum for tips