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函数可能不认,导致的时间错误。