0

I have these two calendar pickers that chooses the date for you, one for arrival and one of departed.

If the user chooses a day in departed calendar that is earlier than the one in arrival calendar, the calendar picker should be either disabled or when choosen - ignore it.

For example: arrival is 2017-03-08, choosen and read in the textbox and same for departed. If I try to pick 2017-03-07 for departed, it should not allow it and not be read in the textbox.

How is this possible with javascript/jquery?

My code:

var CalendarTwo;

function onPopupTxtArrivalDateChanged(sender) { //Function that reads arrival date
    var txtArrival = $("#txtArrivalDate");
    var date = new Date(sender.getSelectedDate());
    var textDate = date.getFullYear() + "-" + (date.getMonth() <= 9 ? "0" + (date.getMonth() + 1)
        : (date.getMonth() + 1)) + "-" + (date.getDate() <= 9 ? "0" + date.getDate() : date.getDate());

    txtArrival.val(textDate);
    onChange(sender, txtArrival, $("#txtDepartureDate")[0], CalendarTwo);
}

function onPopupTxtDepartureDateChanged(sender) { //Function that reads departed date
    var txtDeparture = $("#txtDepartureDate");
    var date = new Date(sender.getSelectedDate());
    var textDate = date.getFullYear() + "-" + (date.getMonth() <= 9 ? "0" + (date.getMonth() + 1)
        : (date.getMonth() + 1)) + "-" + (date.getDate() <= 9 ? "0" + date.getDate() : date.getDate());
    CalendarTwo = sender;
    txtDeparture.val(textDate);
}

function onChange(sender, txt, departed, calendarTwo) { //Function that checks that arrival date and departed is equal
    var txtDate = $(txt).val();
    var date = new Date(txtDate);
    if (departed != undefined) {
        CalendarTwo = calendarTwo;
        var departedDate = new Date($(departed).val());
        if (departedDate < date) {
            calendarTwo.setSelectedDate(date);
            departed.value = txtDate;
        }
    }

    sender.SetSelectedDate(date);
}
Malphai
  • 307
  • 3
  • 6
  • 21
  • http://stackoverflow.com/a/5174982/4248328 OR http://stackoverflow.com/a/15743190/4248328 – Alive to die - Anant Mar 08 '17 at 11:59
  • I like to use [MomentJS](http://momentjs.com/) when working with dates in JavaScript. It has nice features to calculate durations or compare DateTimes. Plus, it takes into account things like leap years and differences with time zones. As a general guideline, I always convert time to UTC to prevent side effects of comparing two different time zones. – Sumi Straessle Mar 08 '17 at 12:00
  • @AlivetoDie Sure, that might work. But how do I later make sure that the textbox does not update the value with this logic? – Malphai Mar 08 '17 at 12:00
  • @SumiStraessle I cannot use 3:rd party SDK's/API' – Malphai Mar 08 '17 at 12:01

0 Answers0