2016-07-28 71 views
-1

這是我的代碼如何限制日期和月份無效jQuery的/ JavaScript的

//Put our input DOM element into a jQuery Object 
 
var $jqDate = jQuery('input[name="jqueryDate"]'); 
 

 
//Bind keyup/keydown to the input 
 
$jqDate.bind('keyup','keydown', function(e){ 
 
\t 
 
    //To accomdate for backspacing, we detect which key was pressed - if backspace, do nothing: 
 
\t if(e.which !== 8) { \t 
 
\t \t var numChars = $jqDate.val().length; 
 
\t \t if(numChars === 2 || numChars === 5){ 
 
\t \t \t var thisVal = $jqDate.val(); 
 
\t \t \t thisVal += '/'; 
 
\t \t \t $jqDate.val(thisVal); 
 
\t \t } 
 
    } 
 
});
<div style="font-family: Helvetica,Arial,sans-serif; font-size: 12px; line-height: 150%;"> 
 
    <strong>HTML5 "date" input type:</strong> <input type="date" name="html5date"><br> 
 
    <strong>jQuery "date" input type mimic:</strong> <input type="text" name="jqueryDate" placeholder="dd/mm/yyyy"><br> 
 
    Key Input: <span id="keyP">null</span> 
 
</div>

在上面的代碼中,我有一個文本框。在該文本框中,用戶手動輸入日期。它需要日期格式的工作。但是用戶輸入的日期超過31日和12個月不接受。如何通過使用Jquery或Javascript限制日期和月份。

這是的jsfiddle: - https://jsfiddle.net/ChrisCoray/hLkjhsce/

+0

你嘗試過什麼? – nicael

+0

我輸入45/40/2016 –

+0

請顯示您嘗試解決問題。 – nicael

回答

0

你需要添加「datePicker'as類名

$(".datePicker").datepicker({ 
     dateFormat: 'd/mm/yy', 
     changeMonth: true, 
     changeYear: true, 
     firstDay: 1, 
     minDate: Date.parse("1900-01-01"), 
     maxDate: Date.parse("2100-01-01"), 
     yearRange: "c-90:c+150" 
    }); 

    // validation in case user types the date out of valid range from keyboard : To fix the bug with out of range date time while saving in sql 
    $(function() { 
     $.validator.addMethod(
      "date", 
      function (value, element) { 

       var minDate = Date.parse("1900-01-01"); 
       var maxDate = Date.parse("2100-01-01"); 
       var valueEntered = Date.parse(value); 

       if (valueEntered < minDate || valueEntered > maxDate) { 
        return false; 
       } 
       return !/Invalid|NaN/.test(new Date(minDate)); 
      }, 
      "Please enter a valid date!" 
     ); 
    }); 
相關問題