Two zapatec calendars with date range filters

Question

I am using the Zapatec DHTML Calendar (its manual here).

In my page i have two of these calendars one for selecting startDate for an event and other for selecting endDate.

Therefore, I need to add filters while selecting, like, startDate should not be less than current Date and end Date should not be less than startDate.

Can anyone pls help me to implement this using Zapatec calendar

Answer 1

You can use something like this.
It worked for me.

Use :
<pre>
var cal_doj = new Zapatec.Calendar.setup({
       inputField     :    "startDate",     // id of the input field
       doubleClick    :     true,      // require two clicks to submit
       ifFormat       :    '%d/%m/%Y',     // format of the input field
       showsTime      :     false,     // show time as well as date
       weekNumbers    :      false,
       **dateStatusFunc :    dateInRange1, //the function to call
     onUpdate       :    filterDates1**
   });
   var cal_doj1= new Zapatec.Calendar.setup({
       inputField     :    "endDate",     // id of the input field
       doubleClick    :     true,      // require two clicks to submit
       ifFormat       :    '%d/%m/%Y',     // format of the input field
       showsTime      :     false,     // show time as well as date
       weekNumbers    :      false,
       **dateStatusFunc :    dateInRange2, //the function to call
     onUpdate       :    filterDate**s2
   });
</pre>
for the Zapatec date picker.


Define this as global variables.
<pre>
 var startDate;
 var endDate;
 var callbacks = 0;
</pre>

Copy this in a included js file 
<pre>
function timeOutOfRange(date, year, month, day, hours, minutes) {
     var x=new Date();
     if (date > x) { // No Sunday
      return true;
     }
     return false;
}   
function resetDates() {
    startDate = endDate = null;
}


function compareDatesOnly(date1, date2) {
    var year1 = date1.getYear();
    var year2 = date2.getYear();
    var month1 = date1.getMonth();
    var month2 = date2.getMonth();
    var day1 = date1.getDate();
    var day2 = date2.getDate();

    if (year1 > year2) {
        return -1;
    }
    if (year2 > year1) {
        return 1;
    }

    if (month1 > month2) {
        return -1;
    }
    if (month2 > month1) {
        return 1;
    }

    if (day1 > day2) {
        return -1;
    }
    if (day2 > day1) {
        return 1;
    }

    return 0;

}

function filterDates1(cal) {
    startDate = cal.date;
    if (endDate == null) { 
        Zapatec.Calendar.setup({
             inputField     :    "startDate",     // id of the input field
               doubleClick    :     true,      // require two clicks to submit
               ifFormat       :    '%d/%m/%Y',     // format of the input field
               showsTime      :     false,     // show time as well as date
               weekNumbers    :      false,
               dateStatusFunc :    dateInRange1, //the function to call
               onUpdate       :    filterDates1
        });
    }
}

function filterDates2(cal) {
    endDate = cal.date;
}

function dateInRange1(date) {

    if (endDate != null) {

        var compareEnd = compareDatesOnly(date, endDate);
        if  (compareEnd < 0) {
            return (true);
        }

        if  (compareEnd == 0) {
            {return "edges";}
        }

        if (startDate != null){
            var compareStart = compareDatesOnly(date, startDate);
            if  (compareStart > 0) {
                return "between";
            } 
        } 
    }

    var today = new Date();
    var compareToday = compareDatesOnly(date, today);
    if (compareToday < 0) {
        return(true);
    }

    return false;
    return(ret);
}

function dateInRange2(date) {
    if (startDate != null) {
        var compareDays = compareDatesOnly(startDate, date);
        if  (compareDays < 0) {
            return (true);
        }

        if  (compareDays == 0) {
            {return "edges";}
        }

        if ((endDate != null) && (date > startDate) && (date < endDate)) {
            return "between";
        } 
    } 

    var now = new Date();
    if (compareDatesOnly(now, date) > 0) {
        return (true);
    }

    return false;
}
</pre>
All the best!