CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepicker
Zirbo Filip
Zirbo Filip

Reputation: 300

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

Upvotes: 1

Views: 1074

Answers (3)

Jared Teng
Jared Teng

Reputation: 311

This will also work, just edited some of your code. http://jsfiddle.net/wc6jcpka/2/

$(function(){

var dates = $("input[id$='startDate'], input[id$='endDate']").datepicker({
    dateFormat: 'dd/mm/yy',
    changeMonth: true,
    changeYear: true,
    onSelect: function (selectedDate) {

        var endDateInput = $("#endDate").val();
        var startDateInput = $("#startDate").val();
        if(endDateInput != '' && startDateInput != ''){
            var endDate = new Date();
            endDate.setMonth   (parseInt(endDateInput.substr(3, 6), 10) - 1);
            endDate.setDate    (parseInt(endDateInput.substr(0, 3), 10));
            endDate.setYear    (parseInt(endDateInput.substr(6, 10), 10));
            var startDate = new Date();
            startDate.setMonth   (parseInt(startDateInput.substr(3, 6), 10) - 1);
            startDate.setDate    (parseInt(startDateInput.substr(0, 3), 10));
            startDate.setYear    (parseInt(startDateInput.substr(6, 10), 10));
                if(startDate.getDate() >= endDate.getDate() || startDate.getMonth() != endDate.getMonth() || startDate.getYear() != endDate.getYear()){
                alert("Error");
                }
        }
    }
});

});

Upvotes: 1

Zirbo Filip
Zirbo Filip

Reputation: 300

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

Upvotes: 1

Gaurav P
Gaurav P

Reputation: 1107

Below will work as per your requirement:

var txtTranDate = $("#startDate");

var txtTranDateTo = $("#endDate");

txtTranDate.datepicker({
    defaultDate: 0,
    changeMonth: true,
    changeYear: true,
    dateFormat: dateFormat,
    maxDate: 0,
    numberOfMonths: 1
}).on("change", function () {
    var dcal = getDate(this);
    if (txtTranDate.val() !== '' && dcal === null) {
        txtTranDate.prop("value", "");
        txtTranDateTo.prop("value", "");
    } else {
        txtTranDateTo.datepicker("option", "minDate", getDate(this));
    }
});

txtTranDateTo.datepicker({
    defaultDate: 0,
    changeMonth: true,
    changeYear: true,
    maxDate: 0,
    dateFormat: dateFormat,
    numberOfMonths: 1
}).on("change", function () {
    var dcal = getDate(this);
    if (txtTranDateTo.val() !== '' && dcal === null) {
        txtTranDate.prop("value", "");
        txtTranDateTo.prop("value", "");
    } else {
        txtTranDate.datepicker("option", "maxDate", getDate(this));
    }
});

UPDATE Method to check if valid date is entered

function getDate(element) {
    var date;
    try {
        date = $.datepicker.parseDate(dateFormat, element.value);
    } catch (error) {
        date = null;
    }

    return date;
}

Upvotes: 1

Related Questions