Deux calendriers zapatec avec filtres de plages de dates

Question

J'utilise le calendrier Zapatec DHTML (its manual here).

Dans ma page j'ai deux de ces calendriers un pour sélectionner startDate pour un événement et d'autres pour sélectionner endDate.

Par conséquent, j'ai besoin d'ajouter des filtres tout en sélectionnant, comme, startDate ne doit pas être inférieur à Date et date de fin actuelles ne doit pas être inférieur à startDate.

Quelqu'un peut me aider pls à mettre en œuvre ce calendrier en utilisant Zapatec

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!