2016-07-28 10 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!" 
     ); 
    }); 
関連する問題