代码之家  ›  专栏  ›  技术社区  ›  Adidev

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

  •  1
  • Adidev  · 技术社区  · 12 年前

    我正在使用Zapatec DHTML日历 (its manual here) .

    在我的页面中,我有两个日历,一个用于为事件选择startDate,另一个用于选择endDate。

    因此,我需要在选择时添加过滤器,比如startDate不应小于当前日期,end Date不应低于startDate。

    有人能帮助我使用Zapatec日历实现这一点吗

    1 回复  |  直到 12 年前
        1
  •  2
  •   Megha QB    12 年前
    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!