Skyper Skyper - 3 months ago 16
jQuery Question

Jquery Datepicker Limited to the month and year of another datepicker

I have an issue. I need a datepicker which will limit the user to choose the date.

So it goes like this:

1) First input, I should be able to pick whatever day, month, and year I want.

2) Second input, I should be able to pick a day if it is greater than First Input's day, from the same month/year of the First Input. Else alert an error.

EDIT - code:
http://jsfiddle.net/wc6jcpka/

var dates = $("input[id$='startDate'], input[id$='endDate']").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onSelect: function (selectedDate) {
var option = this.id == $("input[id$='startDate']")[0].id ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});

Answer

@Gaurav P gave me a hint, but I had to do some modifications so that the code works.

Here is the code:

var txtTranDate = $("input[id$='startDate']");

var txtTranDateTo = $("input[id$='endDate']");

txtTranDate.datepicker({
    defaultDate: 0,
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd/mm/yy'
}).on("change", function () {
    var date = this.value;
    var values = date.split("/");
    var lastDate = new Date(values[2], values[1] - 1, daysInMonth(values[1], values[2]));
    var formatted = $.datepicker.formatDate("dd/mm/yy", lastDate);
    txtTranDateTo.datepicker("option", "minDate", getDate(this));
    txtTranDateTo.datepicker("option", "maxDate", formatted);
});

txtTranDateTo.datepicker({
    defaultDate: 0,
    changeMonth: true,
    changeYear: true,
    dateFormat: 'dd/mm/yy',
    numberOfMonths: 1
}).on("change", function() {

});

function getDate(element) {
    var date;
    try {
        date = $.datepicker.parseDate('dd/mm/yy', element.value);
    } catch (error) {
        date = null;
    }

    return date;
}