EasyUI datetimebox月份和按钮实现中文显示以及格式化处理

缘如风

于 2020-08-05 13:43:10 发布

阅读量944

点赞数 2

分类专栏： EasyUI框架

本文链接：https://blog.csdn.net/chyuanrufeng/article/details/107813255

版权

EasyUI框架专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、实现月份和按钮中文显示

EasyUI默认calendar、datebox、datetimebox的组件显示都是英文的。如下。实现月份和按钮是实现中文显示，效果如下。

具体实现如下。重点是script里面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="./jquery-easyui/demo.css">
		<script type="text/javascript" src="./jquery-easyui/jquery.min.js"></script>
		<script type="text/javascript" src="./jquery-easyui/jquery.easyui.min.js"></script>
	</head>
	<body>
		<div>
			<input id="datetimebox" class="easyui-datetimebox" name="birthday" data-options="required:true,showSeconds:false"
			 value="3/4/2010 2:3" style="width:150px">
		</div>
		<div>
			<input id="datebox" type="text" class="easyui-datebox">
		</div>
		<div id="calendar" class="easyui-calendar" style="width:220px;height:220px;"></div> 
	</body>

	<script>
		$(function() {
			let cfg = {
				okText: "确定",
				closeText: "关闭",
				currentText: "今天",
			}
			
			let cfg_calendar = {
				firstDay: 1,
				weeks: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
				months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
			};
				
			$("#datetimebox").datetimebox(cfg)
			$('#datetimebox').datebox('calendar').calendar(cfg_calendar);
			let c2 = $("#datebox").datetimebox("calendar");
			c2.calendar(cfg_calendar);
			
			$("#calendar").calendar(cfg_calendar);
            //格式化输出
			$("#datetimebox").datetimebox({formatter:function(date){
					    let datestr = date.toJSON().replace("T"," ");
						datestr = datestr.substring(0,datestr.lastIndexOf("."));
						return datestr;
				},
				parser: function(s){
					var t = Date.parse(s);
					if (!isNaN(t)){
						return new Date(t);
					} else {
						return new Date();
					}
				},
			})
		})
	</script>
</html>

2、格式化日期

EasyUi提供了formatter实现格式化输出。但是不能随便格式化，最好配置parser（解析日期字符串的函数）配合使用。不然可能会显示的时间不对。或者点击日历的确定按钮之后，日期显示错误。这个以为你格式化的日期字符串，对于默认的parser函数可能不认，导致的时间错误。

官网参考http://www.jeasyui.net/plugins/173.html

缘如风

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
EasyUI datetimebox月份和按钮实现中文显示以及格式化处理

EasyUI默认calendar、datebox、datetimebox的组件显示都是英文的。如下。修改为显示中文结果如下。具体实现如下。重点是script里面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" hr...
复制链接

扫一扫

专栏目录