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

【问题标题】：Multiple start and end date validation in datepicker jquerydatepicker jquery中的多个开始和结束日期验证
【发布时间】：2015-11-28 06:55:23
【问题描述】：

我可以找到许多代码来验证开始日期和结束日期（结束日期不应小于开始日期），这些代码工作正常。考虑到我的页面有三个开始和结束日期需要验证，在这种情况下我将如何用最少的代码行进行验证。如果有人可以帮助我，我只是一个初学者会很棒。此外，如果用户手动尝试删除日期，则应重新启用日期。小提琴链接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});
    }); 
  }

});

【问题讨论】：

标签： jquery validation datepicker

【解决方案1】：

你可以试试这个代码：-

为每个输入元素添加类，如下所示：-

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

【讨论】：

这似乎不起作用。我需要两个验证 1. 结束日期应使用相应的开始日期进行验证，并相应地禁用日期 2. 如果用户手动删除文本框中的日期，则重新启用日期。我在这里写了代码，但有点笨拙。我需要帮助来优化我的代码。 jsfiddle.net/7pxaqaju/2
是的，正确的第一次验证工作正常。但是如果所有的开始日期都组合在一起，那么结束日期会怎样。忽略对齐问题，但这就是它在正在处理的原始代码中的分组方式，所以只是出于好奇而询问。更像这样jsfiddle.net/coolram27123/7pxaqaju/7
谢谢两者都工作得很好:) 刚刚看到另一条评论我不好。只是关于我正在谈论的定位。如果我能弄清楚这一点会很有帮助。
嗨@Ramki 如果两者都工作正常，请标记为答案。 :)