通过从另一个日期选择器中选择日期来禁用JQuery日期选择器日期

Question

2 datepickers fromdate and todate

My requirement is to select a fromdate and the todate should not be more than 30 days from the selected fromdate , so when I pick a fromdate it should only enable next 30 days in todate datepicker.

i tried to implement this facility to these datepickers but not working

//from date
$("#txtTFromDateTeacherDailyReport").datepicker(
    {
        changeMonth : true,
        changeYear : true,
        dateFormat : "dd/mm/yy",
        maxDate : '0',
        beforeShow : function() {
            jQuery(this).datepicker(
                'option',
                'maxDate',jQuery('#txtTToDateTeacherDailyReport').val());
        },
    }).datepicker("setDate", "0");

    //to date                   
    $("#txtTToDateTeacherDailyReport").datepicker(
        {
            changeMonth : true,
            changeYear : true,
            dateFormat : "dd/mm/yy",
            maxDate :'0',
            beforeShow : function() {
            jQuery(this).datepicker(
                        'option',
                        'minDate',
                        jQuery( '#txtTFromDateTeacherDailyReport').val());
            },
        }).datepicker("setDate", "0");

Please help me to get rid of this.

Answer 1

jQuery Datepicker - Force range from selected date

http://codepen.io/anon/pen/vENJWd

// From Datepicker
$( "#from" ).datepicker({
    defaultDate: "+1d",
    changeMonth: false,
    numberOfMonths: 1,
    minDate: "+1d",
    onClose: function(selectedDate) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
        // Change value of second parameter for your needs
        // 7 = One Week, 14 = Two Weeks, etc
        $( "#to" ).datepicker( "option", "maxDate", new_date(selectedDate, 30) );
    }
});

// To Datepicker
$( "#to" ).datepicker({
    defaultDate: "+1w",
    changeMonth: false,
    numberOfMonths: 1
});

// Do not edit below this line
function new_date(old_date, days_after) {
    var month = parseInt(old_date.substring(0, 2))-1;
    var day = parseInt(old_date.substring(3, 5));
    var year = parseInt(old_date.substring(6, 10));
    var myDate = new Date(year, month, day);
    myDate.setDate(myDate.getDate() + days_after);
    var newMonth = myDate.getMonth()+1;
    var newDay = myDate.getDate();
    var newYear = myDate.getFullYear();
    var output = newMonth + "/" + newDay + "/" + newYear;  
    return output;
}

// Created By: Rafael Leonidas Cepeda

Answer 2

I think this will work for you...

$(function () {
    $("#datepicker1, #datepicker2").datepicker();
    $("#datepicker1").datepicker("option", "onSelect", function (dateText, inst) {
        var date1 = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);

        var date2 = new Date(date1.getTime());
        date2.setDate(date2.getDate() + 30);
        $("#datepicker2").datepicker("setDate", date2);


    });
});

html

<p>Date1: <input type="text" id="datepicker1" /></p>
<p>Date2: <input type="text" id="datepicker2" /></p>