HTML5の検証日付ピッカー

私は部屋予約システムのプロジェクトでHtml5日付ピッカーを使用していますので、この日付ピッカーの検証を手伝ってください。バリデーションには、部屋の初期に選択された今日の無効日よりも前の日を無効にする必要があります。HTML5の検証日付ピッカー

<html> 
 
<body> 
 
<form name="f2" action="payment.jsp" method="get" > 
 
      <label> Date:</label><br> 
 
      From:<input type="date" name="from" id="myDate" value="demo"> 
 
      Till:<input type="date" name="till" id="myDate1" value="demo1"><br> 
 
    
 
<input type="submit" onclick="myFunction()"> 
 
<script> 
 
    function myFunction() { 
 
    var x = document.getElementById("myDate").value; 
 
    document.getElementById("demo").innerHTML = x; 
 
    var y = document.getElementById("myDate1").value; 
 
    document.getElementById("demo1").innerHTML = y; 
 
}  
 
</script> 
 
    </body> 
 
    </html>

出典

2016-10-17 Saquib Ali

は 'demo'と' demo1'値は、実際の日付ではないでしょうか？ 2016-10-17のような？ – andrew

また、この投稿を見て：http://stackoverflow.com/questions/8574442/how-to-add-validation-restrictions-for-html5-date-field-without-jquery-javascrip。それはあなたが使用できるいくつかのヒントを持っています – andrew

これはすでにスタックで議論されています。[参照]（http://stackoverflow.com/questions/22335120/jquery-validator-and-datepicker-click-not-validating） – Thala

あなたはそれを達成するためにJSを必要としません：attrのminはHTML5にあります：

<input type="date" name="from" id="myDate" value="demo" min="2016-10-13">

現在の日付にそれを更新するには、私はtodayDate()使用：

を

$(document).ready(function(){ 
    $('#myDate').attr('min', todayDate()); 
});

function todayDate() { 
 
    var today = new Date(); // get the current date 
 
    var dd = today.getDate(); //get the day from today. 
 
    var mm = today.getMonth()+1; //get the month from today +1 because january is 0! 
 
    var yyyy = today.getFullYear(); //get the year from today 
 

 
    //if day is below 10, add a zero before (ex: 9 -> 09) 
 
    if(dd<10) { 
 
     dd='0'+dd 
 
    } 
 

 
    //like the day, do the same to month (3->03) 
 
    if(mm<10) { 
 
     mm='0'+mm 
 
    } 
 

 
    //finally join yyyy mm and dd with a "-" between then 
 
    return yyyy+'-'+mm+'-'+dd; 
 
} 
 
$(document).ready(function(){ 
 
    $('#myDate').attr('min', todayDate()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
<form name="f2" action="payment.jsp" method="get" > 
 
      <label> Date:</label><br> 
 
      From:<input type="date" name="from" id="myDate" value="demo" min="2016-10-13"> 
 
      Till:<input type="date" name="till" id="myDate1" value="demo1"><br> 
 
    
 
    </body> 
 
    </html>

出典

2016-10-17 11:30:09

ありがとうサンドリーナありがとう..毎日変更する今日の日付として分属性を設定するために私を助けてください... –

私の更新された答えを確認してください –

あなたの貴重なヘルプのために多くの砂利に感謝..私はちょうどあなたのスニペットをコピーし、私はより新鮮な私としては私のために働いた私はそれを理解するのは難しいです。 –

HTML5の検証日付ピッカー

答えて

関連する問題