Jquery-WeUI 日期时间选择器（自定义时间）

最新推荐文章于 2024-04-13 00:31:38 发布

ZCF1024

最新推荐文章于 2024-04-13 00:31:38 发布

阅读量4.4k

点赞数 1

分类专栏：前端文章标签： Weui 日期时间选择器 Jquery-Weui

本文链接：https://blog.csdn.net/zcf980/article/details/83902524

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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>

ZCF1024

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Jquery-WeUI 日期时间选择器（自定义时间）

Juqery-WeUI日期选择控件： Jquery-WeUI日期选择控件只能限制日期，对于时间部分的限制方法不明确，此博客主要研究时间部分的限制（时，分，秒，时-分分隔符，分-秒分隔符）通过查看jquery-weui.js的源码：https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.js ...
复制链接

扫一扫