Juqery-WeUI日期选择控件:
Jquery-WeUI日期选择控件只能限制日期, 对于时间部分的限制方法不明确,此博客主要研究时间部分的限制(时,分,秒,时-分分隔符,分-秒分隔符)
通过查看jquery-weui.js的源码: https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.js 总结出自定义时间限制
直接上源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WeUI自定义时间格式</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css" rel="stylesheet">
</head>
<body>
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">选择时间</label></div>
<div class="weui-cell__bd">
<input type="text" id='deadline' class="weui-input" style="border: 0px;" readonly/>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script th:inline="javascript">
$(document).ready(function (){
initTimePicker();
});
/** 初始化时间 */
function initTimePicker(){
var deadline = $("#deadline");
deadline.val(getTime());
var start = {
'min': getDate(), // 设置最小日期为当前日期
'max': '2030-11-28',
'times': function () {
return [ // 自定义的时间
{
values: getHours()
},
{
divider: true, // 时与分之间的分隔符
content: ':'
},
{
values: getMinutes()
},
{
divider: true, // 分与秒之间的分隔符
content: ':'
},
{
values: ['00', '15', '30', '45']
}
];
}
};
deadline.datetimePicker(start);
}
function getHours(){
// 返回可选择的小时数
return ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'];
}
function getMinutes(){
// 返回可选择的分钟数
return ['00', '10', '20', '30', '40', '50'];
}
/** 获取当前日期格式化后的字符串:YYYY-MM-DD*/
function getDate(){
var now = new Date();
var nowStr = now.getFullYear() + "-"; // 获取年份(4位)
nowStr += formatNumber(now.getMonth() + 1) + "-"; // 获取月份(0-11)
nowStr += formatNumber(now.getDate()); // 获取日(1-31)
return nowStr;
}
/** 获取当前时间格式化后的字符串:YYYY-MM-DD hh:mm */
function getTime(){
var now = new Date();
// now.getDay(); //获取星期X(0-6,0代表星期天)
// now.getSeconds(); //获取秒数(0-59)
var nowStr = now.getFullYear() + "-"; // 获取年份(4位)
nowStr += formatNumber(now.getMonth() + 1) + "-"; // 获取月份(0-11)
nowStr += formatNumber(now.getDate()) + " "; // 获取日(1-31)
nowStr += formatNumber(now.getHours()) + ":"; // 获取小时数(0-23)
nowStr += formatNumber(now.getMinutes()); // 获取分钟数(0-59)
return nowStr;
}
/** 将一位字符格式化成两位:如 1-->01 2-->02 10-->10 */
function formatNumber(param){
return param < 10 ? "0" + param : param;
}
</script>
</html>