帶日期範圍過濾器的兩個zapatec日曆

Question

我正在使用Zapatec DHTML日曆(its manual here)。

在我的頁面中，我有兩個日曆，一個用於選擇事件的startDate，另一個用於選擇endDate。

因此，我需要在選擇時添加過濾器，比如，startDate不能小於當前的Date和end Date應該小於startDate。

誰能請幫助我實現這個使用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!