Bilal Ahmed
Bilal Ahmed

Reputation: 1129

How to format From/To date in dd/mm/yy using datepicker

I found a code snippet here, in which it validates that the end date must be greater than the start date, but it uses the format mm/dd/yy as below :

$("#FromDate").datepicker({
    numberOfMonths: 2,
    onSelect: function (selected) {
        var dt = new Date(selected);
        dt.setDate(dt.getDate() + 1);
        $("#ToDate").datepicker("option", "minDate", dt);
    }
  });
$("#ToDate").datepicker({
    numberOfMonths: 2,
    onSelect: function (selected) {
        var dt = new Date(selected);
        dt.setDate(dt.getDate() - 1);
        $("#FromDate").datepicker("option", "maxDate", dt);
    }
  });

Now what it does is that, when the user selects a particular date in the FromDate field say 11/05/2016, considering the above code with default date format mm/dd/yy, it omits all of the date before the date 11/05/2016 in the ToDate Field, or omits the days before 05 (more specifically), and this works wonderful. Now I wanted to change its date format to dd/mm/yy, so I added the dateFormat attribute of datepicker as below :

$("#FromDate").datepicker({
    .
    dateFormat : 'dd/mm/yy'
    .
    .
    }
});
$("#ToDate").datepicker({
    .
    dateFormat : 'dd/mm/yy'
    .
    .
    }
});

and it worked fine as expected, the date format is now changed to dd/mm/yy, now considering the above example, say when the user selects the date 11/05/2016 in the FromDate field, note that now the format has changed and the day is 11 here, now it should omit the days be 11 and not 05, but it is still taking the 05 part of the date as day and omits before it, now my question is that, how should I modify the above code that it should take the 11 part as day? In other words how do I specify the date format dd/mm/yy in datepicker while validating it? I've already specified date format for TextBox Field. Thanks in Advance :)

Upvotes: 0

Views: 261

Answers (1)

Jayesh Chitroda
Jayesh Chitroda

Reputation: 5049

Try this:

$("#FromDate").datepicker({
    numberOfMonths: 2,
    dateFormat : 'dd/mm/yy',
    onSelect: function() {
        var minDate = $('#FromDate').datepicker('getDate');
        $("#ToDate").datepicker("change", { minDate: minDate });
    }
});

$("#ToDate").datepicker({
    numberOfMonths: 2,
    dateFormat : 'dd/mm/yy',
    onSelect: function() {
        var maxDate = $('#ToDate').datepicker('getDate');
        $("#FromDate").datepicker("change", { maxDate: maxDate });
    }
});

Upvotes: 1

Related Questions