Question

请帮助解决这个问题，我想验证“FROM（DATE）”是否大于“TO（DATE）”而不禁用Date else我会提示用户。所有答案都表示赞赏。我已经搜索了可能的解决方案谷歌，但我找不到。

Below is the screenshot and my code .

    <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script>
$(document).ready(function(){
    $( ".datepicker" ).datepicker();
  })
  </script>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
 <table>
   <tr>
    <th>SPORTS</th> 
    <th>FROM</th>
    <th>TO</th>
   </tr>
   <tr>
    <td>BASKET BALL</td>    
    <td><input type="text" class="datepicker"></td>
    <td><input type="text" class="datepicker"></td>
   </tr>
   <tr>
    <td>VOLLEY BALL</td>    
    <td><input type="text" class="datepicker"></td>
    <td><input type="text" class="datepicker"></td>
   </tr>
   <tr>
    <td>TENNIS</td> 
    <td><input type="text" class="datepicker"></td>
    <td><input type="text" class="datepicker"></td>
   </tr>
   <tr>
    <td>BASE BALL</td>  
    <td><input type="text" class="datepicker"></td>
    <td><input type="text" class="datepicker"></td>
   </tr>

</table>
</body>
</html>

Screenshots

非常感谢，

Answer 1

我想我已经解决了你的问题。我只为篮球做过，你可以做其余的希望。

CHEERS !!

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script>
$(document).ready(function(){
    $( ".basketball_datepicker_start" ).datepicker();
    $( ".basketball_datepicker_end" ).datepicker(
    {
    onSelect: function(selected) {
                   var fromDate = $('.basketball_datepicker_start').datepicker().val();
                   var toDate = $(this).datepicker().val();
                   if(fromDate > toDate) {
                    alert('Buddy, FromDate has to be greater than ToDate !!!');
                   }
               }
    }
    );
})
  </script>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
 <table>
   <tr>
    <th>SPORTS</th> 
    <th>FROM</th>
    <th>TO</th>
   </tr>
   <tr>
    <td>BASKET BALL</td>    
    <td><input type="text" class="basketball_datepicker_start"></td>
    <td><input type="text" class="basketball_datepicker_end"></td>
   </tr>
</table>
</body>
</html>

Answer 2

我已经根据您的需要编写了简化代码。通过将minDate日期设置为大约From日期到To日期，您无需验证日期。

以下是代码：

$(".datepicker").datepicker({
    onSelect: function (selected, inst) {
        var minDate = new Date(Date.parse(selected));
        minDate.setDate(minDate.getDate() + 1);
        $(this).parent().next().find('input').datepicker("option", "minDate", minDate);
    }
});

FIDDLE DEMO

表格验证中的Datepicker

2 个答案: