Easyui easyui-datebox日期控件格式设置

最新推荐文章于 2024-05-27 12:07:42 发布

漫天雪_昆仑巅

最新推荐文章于 2024-05-27 12:07:42 发布

阅读量1.4w

点赞数 3

分类专栏： JavaScript 文章标签： easyui日期控件格式设置 easyui-datebox格式化 datebox日期格式化设置 datebox年月格式

本文链接：https://blog.csdn.net/vtopqx/article/details/82867554

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

easyui-datebox默认格式为 10/12/2018

1、设置格式化月份，

将easyui-datebox日期控件格式设置为自定义形式，如：2018-09，只显示年月，如下：

html如下：

<input id="st_mouth" editable="false"  class="easyui-datebox" name="name" data-options="label:'月份：'" />

JS设置:

$(document).ready(function(){	
	$('#st_mouth').datebox({
	       //显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层
	       onShowPanel: function () {
	          //触发click事件弹出月份层
	          span.trigger('click'); 
	          if (!tds)
	            //延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔
	            setTimeout(function() { 
	                tds = p.find('div.calendar-menu-month-inner td');
	                tds.click(function(e) {
	                //禁止冒泡执行easyui给月份绑定的事件
	                e.stopPropagation(); 
	                //得到年份
	                var year = /\d{4}/.exec(span.html())[0] ,
	                //月份
	                //之前是这样的month = parseInt($(this).attr('abbr'), 10) + 1; 
	                month = parseInt($(this).attr('abbr'), 10);  

					//隐藏日期对象                     
					$('#st_mouth').datebox('hidePanel') 
					//设置日期的值
					.datebox('setValue', year + '-' + month); 
	                });
	            }, 0);
	    },
	    //配置parser，返回选择的日期
	    parser: function (s) {
	        if (!s) return new Date();
	        var arr = s.split('-');
	        return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
	    },
	    //配置formatter，只返回年月 之前是这样的d.getFullYear() + '-' +(d.getMonth()); 
	    formatter: function (d) { 
	        var currentMonth = (d.getMonth()+1);
	        var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');
	        return d.getFullYear() + '-' + currentMonthStr; 
	    }
	});

	//日期选择对象
	var p = $('#st_mouth').datebox('panel'), 
	//日期选择对象中月份
	tds = false, 
	//显示月份层的触发控件
	span = p.find('span.calendar-text'); 
	var curr_time = new Date();

	//设置默认值为当前月
	$("#st_mouth").datebox("setValue", formatter(curr_time));	
		
});

完成！

2、设置格式化年-月-日

参考官网例子：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Date Format - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>Date Format</h2>
	<p>Different date formats are applied to different DateBox components.</p>
	<div style="margin:20px 0;"></div>
	<input class="easyui-datebox"></input>
	<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser"></input>
	<script type="text/javascript">
		function myformatter(date){
			var y = date.getFullYear();
			var m = date.getMonth()+1;
			var d = date.getDate();
			return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
		}
		function myparser(s){
			if (!s) return new Date();
			var ss = (s.split('-'));
			var y = parseInt(ss[0],10);
			var m = parseInt(ss[1],10);
			var d = parseInt(ss[2],10);
			if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
				return new Date(y,m-1,d);
			} else {
				return new Date();
			}
		}
	</script>
</body>
</html>

完成！

漫天雪_昆仑巅

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
Easyui easyui-datebox日期控件格式设置

easyui-datebox默认格式为 10/12/2018 1、设置格式化月份，将easyui-datebox日期控件格式设置为自定义形式，如：2018-09，只显示年月，如下：html如下：&lt;input id="st_mouth" editable="false" class="easyui-datebox" name="name" data-options="l...
复制链接

扫一扫

专栏目录