jquery - 两个带有日期范围过滤器的 zapatec 日历

Question

我正在使用 Zapatec DHTML 日历（它的手册在这里）。

在我的页面中，我有两个日历，一个用于为事件选择 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!