JQuery驗證日期範圍之間的日期

我有一個輸入字段，用戶可以在日期範圍之間插入日期。JQuery驗證日期範圍之間的日期

所以我加入jQuery的驗證對象的新方法：

$.validator.addMethod("dateRange", function(value, element, from, to){ 
    try { 
     var date = new Date(value); 
     if(date >= from && date <= to) 
      return true; 
    } catch(e) { 
    } 
    return false; 
}

然後我添加了一個新的班規：

$.validator.addClassRules({ 
    myDateFieldRangeValidate: { 
     dateRange: {fromDate, toDate} 
    } 
});

最後我加入了類輸入：

$("#myField").addClass("myDateFieldRangeValidate");

那麼，如何能通過兩個日期，以驗證功能？

更新：增加了一個代碼片段

$.validator.addMethod("dateRange", function(value, element, from, to){ 
 
    try { 
 
     var date = new Date(value); 
 
     if(date >= from && date <= to) 
 
      return true; 
 
    } catch(e) { 
 
    } 
 
    return false; 
 
}); 
 

 
var fromDate = new Date("2017-02-01"); 
 
var toDate = new Date("2017-12-31"); 
 

 
$.validator.addClassRules({ 
 
    myDateFieldRangeValidate: { 
 
     dateRange: {fromDate, toDate} 
 
    } 
 
}); 
 

 
$("#myField").addClass("myDateFieldRangeValidate"); 
 

 
$("#btnValidate").click(function(){ 
 
    $("#frm1").validate(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
 
<form id="frm1"> 
 
    Date <input type="text" id="myField"> 
 
    <input type="button" id="btnValidate" value="Validate"> 
 
</form>

來源

2017-04-07 Alessandro

看到http://stackoverflow.com/questions/833997/validate-that-end-date-is -greater超開始日期與 - jQuery的 – user3441151

您可以將元素添加爲數據屬性，起始日期和結束日期，並把他們從元件 – geo

對不起，我聽不懂...... – Alessandro

感謝阿倫P約翰尼拉，我張貼在這裏他的小提琴：

$.validator.addMethod("dateRange", function(value, element, params) { 
 
    try { 
 
    var date = new Date(value); 
 
    if (date >= params.from && date <= params.to) { 
 
     return true; 
 
    } 
 
    } catch (e) {} 
 
    return false; 
 
}, 'message'); 
 

 
var fromDate = new Date("2017-02-01"); 
 
var toDate = new Date("2017-12-31"); 
 

 
$.validator.addClassRules({ 
 
    myDateFieldRangeValidate: { 
 
    dateRange: { 
 
     from: fromDate, 
 
     to: toDate 
 
    } 
 
    } 
 
}); 
 

 
$("#myField").addClass("myDateFieldRangeValidate"); 
 
$("#frm1").validate(); 
 
$("#btnValidate").click(function() { 
 
    console.log($("#frm1").valid()) 
 
}); 
 

 
jQuery(function($) { 
 
    var validator = $('#myform').validate({ 
 
    rules: {}, 
 
    messages: {} 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script> 
 
<form id="frm1"> 
 
    Date 
 
    <input type="text" id="myField" value="16 Feb 2017"> 
 
    <input type="button" id="btnValidate" value="Validate"> 
 
</form>

來源

2017-04-07 14:15:05 Alessandro

這裏是一個辦法讓jQuery的驗證與功能給開始日期和結束日期

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.js"></script> 
<script> 
$(document).ready(function() { 
// add a method. calls one built-in method, too. 
jQuery.validator.addMethod("optdate", function(value, element) { 
    var startDate= new Date(jQuery(element)[0].attributes['data-rule-startDate'].value); 
    var endDate= new Date(jQuery(element)[0].attributes['data-rule-endDate'].value); 
    var d = new Date(value); 
    console.log(d) 
    return (d.getTime() <= endDate.getTime() && d.getTime() >= startDate.getTime()) 
}, "Please enter a valid date." 
); 



$('#frm1').validate(); 



}); 
</script> 
<html> 
<form id="frm1"> 
    Date <input type="text" id="myField" name="myField" data-rule-optdate="true" data-rule-startDate="2017-12-12" data-rule-endDate="2018-12-12"> 
</form> 
</html>

來源

2017-04-07 14:25:26 geo

JQuery驗證日期範圍之間的日期

回答

相關問題