js原生写时间日期选择

最新推荐文章于 2024-06-10 18:20:48 发布

时光0如瑾季微凉

最新推荐文章于 2024-06-10 18:20:48 发布

阅读量1.1k

点赞数

分类专栏： js原生写时间日期选择文章标签： js原生写时间日期选择

本文链接：https://blog.csdn.net/weixin_43972857/article/details/88061288

版权

本文介绍如何不依赖任何库，仅使用JavaScript原生代码创建一个时间日期选择器。通过HTML布局，JS逻辑处理，以及CSS样式设计，实现了一个完整的日期时间选择组件。

摘要由CSDN通过智能技术生成

js原生写时间日期选择
html代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日期插件</title>
<link type="text/css" rel="stylesheet" href="./dist/dol-datepicker.css">
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
body{background-color:#E3E3E3; font-size:14px; color:#333; font-family:'微软雅黑'}
.main{width: 1000px;margin: 0 auto;background: #fff;padding:50px}
#date1,.time{display: inline-block;width: 200px;height: 30px;border: 1px solid #ccc;vertical-align: middle;margin:20px 5px;line-height: 30px}
</style>
</head>
<body>
	<div class="main">
		<h1>示例1</h1>
		<input type="text" id="date1"/>
        （限制四天之前不可选）
		<h1>示例2</h1>
		<div class="box">
			<span>开始时间</span>
			<div class="time" id="date2"></div>
			<span>~</span>
			<span>结束时间</span>
			<div class="time" id="date3"></div>
			<span>（限制从开始时间的后两天开始）</span>
		</div>
	</div>
</body>
<script type="text/javascript" src="./js/dol-datepicker.js"></script>
<script type="text/javascript">
	// demo1
    var picker1 = new Datepicker({
        elemName: 'date1',
        format: 'YYYY-MM-DD hh:mm:ss',
        min: -4,
        callBack: function(a, b){
        	console.log(a, b)
        }
    });

    // demo2
    var picker2 = new Datepicker({
        elemName: 'date2',
        format: 'YYYY-MM-DD hh:mm',
        callBack: function(a, b){
        	picker3.setMinScope(b, 2);
        }
    });
    var picker3 = new Datepicker({
        elemName: 'date3',
        format: 'YYYY-MM-DD hh:mm',
        callBack: function(a, b){
        	picker2.setMaxScope(a);
        }
    });
</script>
</html>

js文件：


var Datepicker = (function(){
	// -- 核心工具方法 -- //
	var Utils = {};
	Utils.on = function(elem, even, target, fn){ //--事件监听器
		if(typeof target === 'string'){
			elem.addEventListener(even, function(e){
				if(e.target.tagName === target.toLocaleUpperCase()){
					fn.call(e.target, e);
					e.stopPropagation()
				}
			}, false);
		}else{
			fn = target;
	    	elem.addEventListener(even, function(e){
	    		fn.call(this, e);
	    		e.stopPropagation()
	    	}, false);
		}
	    return Utils;
	};

	Utils.extend = function(options, newoptions, deep){ // 扩展覆盖属性
		for (var key in newoptions){
			if(deep && (isPlainObject(newoptions[key]) || Array.isArray(newoptions[key]))){
				if(isPlainObject(newoptions[key]) && !isPlainObject(options[key]))
					options[key] = {}
				if(Array.isArray(newoptions[key]) && !Array.isArray(options[key]))
					options[key] = []
				Utils.extend(options[key], source[key], deep)
			} else if (newoptions[key] !== undefined) options[key] = newoptions[key]
		}
		function isPlainObject(obj){
			try{  
		        if(obj.constructor && !hasOwn.call(obj.constructor.prototype,"isPrototypeOf"))return false;
		    }  
		    catch(e){  
		        return false;  
		    }
		    return true;
		}
	}
	
	Utils.isShow = function(dom, bln){ // 显示隐藏
		dom.style.display = bln ? 'block' : 'none';
	}
	
	Utils.format = function(time, format){ // 时间戳转换指定format格式
		var oDate = new Date(time)
		return format.replace(/YYYY|MM|DD|hh|mm|ss/g, function(str, index){
	        var val = 0;
	        if (str === 'YYYY') {
	            val = oDate.getFullYear();
	        } else if (str === 'MM') {
	            val = oDate.getMonth()+1;
	        } else if (str === 'DD') {
	            val = oDate.getDate();
	        } else if (str === 'hh') {
	            val = oDate.getHours();
	        } else if (str === 'mm') {
	            val = oDate.getMinutes();
	        } else if (str === 'ss') {
	            val = oDate.getSeconds();
	        }
	        return Utils.repair(val);
	    });     
	}

	Utils.parse = function(type, ops){
		if (type === 1){ // 字符串转ymd
			var ymd = ops.value.match(/\d+/g);
			var aYmd = [];
			for(var i=0; i<ops.aYmdIndex.length; i++){
				aYmd.push(ymd[ops.aYmdIndex[i]]);
			}
			return aYmd;
		} else if(type === 2){ // 当前时间转ymd
			ops.value = Utils.format(ops.time, ops.format);
			return Utils.parse(1, ops);
		} else if(type === 3){ // ymd转时间
			// var _t = +new Date(ops.aYmd[0]?ops.aYmd[0]:1970, ops.aYmd[1]?ops.aYmd[1]:0, ops.aYmd[2]?ops.aYmd[2]:0, ops.aYmd[3]?ops.aYmd[3]:0, ops.aYmd[4]?ops.aYmd[4]:0, ops.aYmd[5]?ops.aYmd[5]:0);
			// return {'value':Utils.format(_t, ops.format), 'time':_t} 
		}
	};

	Utils.repair = function(num){ // 补0
		return (num < 10 ? '0' : '') + num;
	}

	Utils.each = function(list, fn){
		var i=0,len=list.length;
		for (; i<len; i++) {
			if(fn(i, list[i]) === false)break;
		};
	}

	Utils.check = function(_ymd, _minArr, _maxArr){
		return maketime(_ymd, _minArr) < maketime(_minArr) || maketime(_ymd, _maxArr) > maketime(_maxArr)
		function maketime(arr, _arr){
			if(!_arr) _arr = [1970, 1, 1, 0, 0, 0];
			return +new Date(n(arr[0], _arr[0]), n(arr[1], _arr[1])-1, n(arr[2], _arr[2]), n(arr[3], _arr[3]), n(arr[4], _arr[4]), n(arr[5], _arr[5]));
		}
		function n(a, b){
			return a === undefined ? (b === undefined ? 0 : b) : a;
		}
	}

	Utils.scroll = function(isLeft){
	    var type = isLeft ? 'scrollLeft' : 'scrollTop';
	    return document.body[type] | document.documentElement[type];
	};
	// -- 组件对象 -- //
    var dpdate = function(options){
    	var that = this;
    	this.config = {
		    format: 'YYYY-MM-DD', // 日期格式
		    min: '1970-01-01 00:00:00', // 最小日期
		    max: '2099-12-12 23:59:59', // 最大日期	
		    eventtype : '',
		    elemName: '',
		    hasTime: true, // 显示使用时间组件
		    hasClear: true, // 显示清空按钮
		    hasToday: true, // 显示今天按钮
		    hasConfirm: true, // 显示确认按钮
		    fixed: false, // 是否fixed浮动
		    callBack: null // 选时间回调

最低0.47元/天解锁文章

时光0如瑾季微凉

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js原生写时间日期选择

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
复制链接

扫一扫