input标签设置时间值
研究了两天javascript⽇期相关的内容，⼀句话总结：“浏览器可以⽤上⼗万年，因为javascript⽀持的时间范围就是这么长”。通过实验来看，⽐较好⽤的是type="date"，及type="datetime-local"
关于设置值的结论：
(1)2020-03-26格式可⽤于date、datetime
(2)2020-03-26 22:32:07格式仅可以⽤于datetime
(3)2020-03-26T22:33:03格式可以⽤于datetime、datetime-local
关于输⼊及校验⽇期的正确性：能输⼊不代表就能正确转换成⽇期
代码：没写过WEB程序，算是个练习，将就着看吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<style type="text/css">
font-family: verdana,arial,sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
text-align: center;
}
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<script src='assets/js/jquery-2.0.3.min.js'></script>
<br />
<script type="text/javascript">
function FormatDate() {
/
/var current = new Date();
var now = new Date();
var year = FullYear();
//month返回数组（0-11）
var month = ("0" + (Month() + 1)).slice(-2);
//getDate返回⽇期(1-31)
var day = ("0" + Date()).slice(-2);
var formatedDate = year + "-" + month + "-" + day;
//alert("系统时间:" + now + "\n格式化时间：" + formatedDate);
return formatedDate;
}
function FormatDate1() {
//var current = new Date();
var now = new Date();
var year = FullYear();
//month返回数组（0-11）
var month = ("0" + (Month() + 1)).slice(-2);
//getDate返回⽇期(1-31)
var day = ("0" + Date()).slice(-2);
var formatedDate = year + "/" + month + "/" + day;
//alert("系统时间:" + now + "\n格式化时间：" + formatedDate);
return formatedDate;
}
function FormatDateTime() {
//var current = new Date();
var now = new Date();
var year = FullYear();
//month返回数组（0-11）
var month = ("0" + (Month() + 1)).slice(-2);
//getDate返回⽇期(1-31)
var day = ("0" + Date()).slice(-2);
//
var hour = ("0" + Hours()).slice(-2);
var minute = ":" + ("0" + Minutes()).slice(-2);html input type属性
var second = ":" + ("0" + Seconds()).slice(-2);
var formatedDate = year + "-" + month + "-" + day + " " + hour + minute + second;
//alert("系统时间:" + now + "\n格式化时间：" + formatedDate);
return formatedDate;
}
function FormatDateTimeLocal() {
//var current = new Date();
var now = new Date();
var year = FullYear();
//month返回数组（0-11）
var month = ("0" + (Month() + 1)).slice(-2);
//getDate返回⽇期(1-31)
var day = ("0" + Date()).slice(-2);
//
var hour = ("0" + Hours()).slice(-2);
var minute = ":" + ("0" + Minutes()).slice(-2);
var second = ":" + ("0" + Seconds()).slice(-2);
var formatedDate = year + "-" + month + "-" + day + "T" + hour + minute + second;
return formatedDate;
}
</script>
<table class="gridtable">
<thead>
<tr>
<th>input标签type</th>
<th width="255px">input标签</th>
<th width="155px">输⼊格式</th>
<th>测试</th>
</tr>
</thead>
<tr>
<td>
input type="date"
</td>
<td>
<input type="date" id="mydate00001" value="2001-01-01"/>
</td>
<td>
<label id="lb00001"></label>
</td>
<td>
<input type="button" onclick="setDate1()" value="设置时间(格式1)"/>
</td>
</tr>
<tr>
<td>
input type="datetime"
</td>
<td>
<input type="datetime" id="mydate00002" value="2002-01-01"/>
</td>
<td>
<label id="lb00002"></label>
</td>
<td>
<input type="button" onclick="setDate2()" value="设置时间（格式2）"/>
</td>
</tr>
<tr>
<td>
input type="datetime-local"
</td>
<td>
<input type="datetime-local" id="mydate00003" value="2003-01-01T00:00:00"/> </td>
<td>
<label id="lb00003"></label>
</td>
<td>
<input type="button" onclick="setDate3()" value="设置时间（格式3）"/>
</td>
</tr>
</table>
<br />
<!--jquery中attr和prop的区别介绍：
•对于HTML元素本⾝就带有的固有属性，在处理时，使⽤prop⽅法。
•对于HTML元素我们⾃⼰⾃定义的DOM属性，在处理时，使⽤attr⽅法。-->
<script type="text/javascript">
function setDate1() {
var str = FormatDate();
$("#lb00001").prop("innerHTML", str);
$('#mydate00001').prop('value',str );
$('#mydate00002').prop('value', str);
$('#mydate00003').prop('value', str)
}
function setDate2() {
var str = FormatDateTime();
$("#lb00002").prop("innerHTML", str);
$('#mydate00001').prop('value', str);
$('#mydate00002').prop('value', str);
$('#mydate00003').prop('value', str);
}
function setDate3() {
var str = FormatDateTimeLocal();
$("#lb00003").prop("innerHTML", str);
$('#mydate00001').prop('value',str);
$('#mydate00002').prop('value', str);
$('#mydate00003').prop('value', str);
}
</script>
<br />
<hr />
<script type="text/javascript">
function dateTest() {
var result="";
$("input[type='date']")
.each(function () {
var v = new Date($(this).val());
result += "\ndate取值:" + $(this).val() + "\n⽇期时间转换后的值:" + v
}
)
;
$("input[type='datetime']")
.each(function () {
var v = new Date($(this).val());
result += "\ndatetime取值:" + $(this).val() + "\n⽇期时间转换后的值:" + v
}
);
$("input[type='datetime-local']")
.each(function () {
var v = new Date($(this).val());
result += "\ndatetime-local取值:" + $(this).val() + "\n⽇期时间转换后的值:" + v                }
)
;
alert(result);
};
</script>
<input type="button" onclick="dateTest()" value="校验⽇期"/>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。