验证Html 5 Datepicker(Validation of Html 5 Datepicker)
我在我的房间预订系统项目中使用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>
I am using Html5 date picker in my project of room reservation system please anybody help me to validate this date picker. Validation must include disabling dates earlier than today's date disabling dates which have been selected earlier for rooms.
<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>
最满意答案
你不需要JS来实现这一点：html5上有attr min ：
<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>
You don't need JS to accomplish that: There is attr min on html5:
<input type="date" name="from" id="myDate" value="demo" min="2016-10-13">
To update it to the current date, I use 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>
更多推荐
发布评论