datepicker jquery中的多个开始和结束日期验证

时间:2015-11-28 06:55:23

标签: jquery validation datepicker

我可以找到许多代码来验证开始日期和结束日期(结束日期不应小于开始日期),这是正常工作。考虑到我的页面有三个开始和结束日期要验证,在这种情况下如何用最少的代码行进行验证。如果有人可以帮助我,那么初学者会很棒。此外,如果用户手动尝试删除日期,则应重新启用日期。小提琴链接http://jsfiddle.net/7pxaqaju/2/

DateCheck($("#txtFromDate"),$("#txtToDate"));  
if($("#txtFromDate").change() || $("#txtToDate").change())
    stateChange($("#txtFromDate"),$("#txtToDate"));

DateCheck($("#txtFromDate1"),$("#txtToDate1"));
 if($("#txtFromDate1").change() || $("#txtToDate1").change())
    stateChange($("#txtFromDate1"),$("#txtToDate1"));  

DateCheck($("#txtFromDate2"),$("#txtToDate2"));
 if($("#txtFromDate2").change() || $("#txtToDate2").change())
    stateChange($("#txtFromDate2"),$("#txtToDate2"));  


function DateCheck(fromDate,toDate){
     fromDate.datepicker({
         showOn: "button",
         buttonImage: "Z.jpeg",
         buttonImageOnly: true,
         numberOfMonths: 1,        
         onSelect: function(selected) {
              toDate.datepicker("option",{minDate: selected });
         }        
     });   
     toDate.datepicker({ 
         showOn: "button",
         buttonImage: "Z.jpeg",
         buttonImageOnly: true,
         numberOfMonths: 1,                    
         onSelect: function(selected) {
             fromDate.datepicker("option",{maxDate: selected});
         }
     }); 
}

 function stateChange(fromDate,toDate){   
    fromDate.change(function(){
        if(fromDate.val() == "")
        toDate.datepicker("option",{minDate : null});       
    });
    toDate.change(function(){
        if(toDate.val() == "")            
        fromDate.datepicker("option",{maxDate : null});
    }); 
  }

});

1 个答案:

答案 0 :(得分:0)

您可以尝试以下代码: -

从input元素中为每个元素添加类,如下所示: -

From: <input type="text" id="txtFromDate1" class="datetimepicker from"  />

现在更改你的jQuery代码: -

$( ".datetimepicker" ).datepicker({
  showOn: "button",
  buttonImage: "/Z.jpeg",
  buttonImageOnly: true,
   onSelect: function(date) {           
       if($(this).hasClass('from')){
         $(this).next().next().datepicker("option",{minDate: date });
       }
    },
}); 

Demo