2.5 快速输入日期
在之前的章节中已经简单介绍了部分EasyUI中的日期控件，如时间微调器、日期微调器等。本节将向读者介绍EasyUI中功能更加强大的日期控件，使用这些日期控件非常简单，但是如果要完全掌握它们却非常困难。在学习本节的过程中读者应该牢牢把握住存储值和展示值这一核心概念。
2.5.1 日历（Calendar）
在前面的章节中我们学习了日期微调器控件，这个控件尽管也可以设置日期，但是使用起来却比较麻烦，例如无法快速地选择一个日期。日历提供了一个可供用户单击选择日期的界面，用户可以使用日历控件快速选择日期，日历控件默认星期天为每周的第一天。
日历的默认配置定义在$.fn.calendar.defaults中。
1. 创建日历
使用标记创建日历的方法如下：
<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div>
使用JavaScript创建日历的方法如下：
01 <div id="cc" style="width:180px;height:180px;"></div>
02 $('#cc').calendar({
03 current:new Date()
04 });
2. 日历属性
日历常用属性的说明见表2.37。
表2.37 日历的常用属性
在详细讲解日历的属性前，先简单介绍JavaScript中的Date对象。Date对象是JavaScript语言中内置的数据类型，用于提供日期和时间的操作接口。Date类型使用自UTC 1970年1月1日0点开始经过的毫秒数来保存日期。Date默认输出值格式为：
Tue Feb 13 2018 09:33:27 GMT+0800 (中国标准时间)
Date对象的常用方法如下：
- 创建Date对象：var date = new Date()
- 从Date对象以四位数字返回年份：date.getFullYear()
- 从Date对象返回月份(0～11)：date.getMonth()
- 从Date对象返回一个月中的某一天(1～31)：date.getDate()
- 从Date对象返回一周中的某一天(0～6)：date.getDay()
- 返回Date对象的小时(0～23)：date.getHours()
- 返回Date对象的分钟(0～59)：date.getMinutes()
- 返回Date对象的秒数(0～59)：date.getSeconds()
- 返回Date对象的毫秒(0～999)：date.getMilliseconds()
- 返回1970年1月1日至今的毫秒数：date.getTime()?返回1970年1月1日午夜到指定日期（字符串）的毫秒数：date.parse()
提示
Data对象是以毫秒数进行创建的，它以毫秒数返回当前的日期，但是一些后台语言（如PHP等）是通过秒数创建日期对象的，读者要注意两者之间的转换。Date对象也可以通过日期格式进行创建，如new Date('2018/1/1')，但是无法使用中文格式进行创建，例如new Date('2018年1月1日')是非法的。
日历默认以英文符号来标注月份以及星期，下面我们将对日历控件进行一次汉化，并演示日历属性的用法，部分代码如下：
01 $('#cc').calendar({
02 /*初始化为当前日期，Date对象可以通过毫秒数以及日期格式进行创建，如果不填写
03 创建条件的话默认以当前日期进行创建*/
04 current:new Date(),
05 width:400,//日历控件宽度
06 height:300,//日历控件的高度
07 showWeek:true,//在日历控件的最左侧显示当前星期是当年的第几个星期
08 weekNumberHeader:"星期数",
09 firstDay:"1",//设置星期一为每周的第一天
10 months:['1月', '2月', '3月', '4月', '5月','6月','7月','8月','9月','10
月','11月','12月'],
11 //使用中文标注月份
12 weeks:['周日','周一','周二','周三','周四','周五','周六'],
13 //设置每一天的展示值
14 formatter:function(date){
15 return date.getDate()+"日";
16 },
17 //为展示值添加一个风格
18 styler:function(date){
19 if (date.getDay() == 6){
20 return 'color:red';//将日历上周六的日期设置成红色
21 }
22 if (date.getDay() == 0){
23 return 'color:blue';//将日历上周日的日期设置成蓝色
24 }
25 }
26 });
最终运行结果如图2.20所示。
图2.20 日历演示
3. 日历事件
日历常用事件说明见表2.38。
表2.38 日历的常用事件说明
4. 日历方法
日历常用方法说明见表2.39所示。
表2.39 日历的常用方法说明
2.5.2 日期框（DateBox）
日期框由组合和日历组成，用户在编辑框中输入的字符串被转换成有效的日期显示在日历面板上，在日历上选中的日期也将被转换成字符串显示在编辑文本框内。
日期框的依赖关系如下：
- combo
- calendar
日期框扩展于：
- combo
日期框的默认配置定义在$.fn.datebox.defaults中。
1. 日期框的用法
使用标记创建日期框的方法如下：
<input id="db" type="text" class="easyui-datebox" required="required">
使用JavaScript创建日期框的方法如下：
01 <input id="db" type="text">
02 $('#db').datebox({
03 required:true
04 });
2. 日期框属性
日期框常用属性的说明见表2.40。
表2.40 日期框常用属性
下面我们先创建一个日期框，并将日期框的按钮进行相应汉化，部分代码如下：
01 <input id="db" type="text" class="easyui-datebox" required="required">
02 <script>
03 $(function(){
04 $('#db').datebox({
05 currentText:" 今天 ",
06 closeText:" 关闭 ",
07 });
08 });
09 </script>
最终运行结果如图2.21所示。
图2.21 日期框演示
此时我们已经将按钮的默认名称改为对应的中文名称。EasyUI允许开发者自由地改变按钮数量以及按钮的消息响应（消息响应简单的来说就是按下该按钮后所运行的一段程序，一般使用handler函数来处理，开发者可以在handler函数体内编写相应的响应程序），下面我们在“今天”和“关闭”两个按钮之间添加一个“确定”按钮，部分代码如下：
01 <input id="db" type="text" class="easyui-datebox" required="required">
02 <script>
03 $(function(){
04 $('#db').datebox({
05 currentText:"今天",
06 closeText:"关闭",
07 });
08 var buttons = $.extend([], $.fn.datebox.defaults.buttons);
09 buttons.splice(1, 0, {
10 text: '确定',
11 handler: function(target){
12 alert('当前选择的日期是'+$(target).val());
13 }
14 });
15 $('#db').datebox({
16 buttons: buttons
17 });
18 });
19 </script>
该例我们创建了一个带“确定”按钮的日期框，并且在单击“确定”按钮时显示当前选择的时间，最终运行结果如图2.22所示。
图2.22 设置日期框按钮
对按钮的操作在实际开发中十分常用，上述改变日期框按钮的操作是一个十分通用的方法，下面将对上述代码进行详细解析。
先看这段代码：
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
这段代码的含义是获取日期框控件的默认按钮对象并以数组形式返回。在这里指定控件是日期框（datebox），日期框的默认按钮是'Today'和'Close'按钮，因此buttons的值也就是数组['Today按钮对象','Close按钮对象']。
提示
所谓的按钮对象，读者可以简单地理解为包含按钮名称、消息响应函数等属性的集合。
接下来看这段代码：
01 buttons.splice(1, 0, {
02 text: '确定',
03 handler: function(target){
04 alert('当前选择的日期是'+$(target).val());
05 }
06 });
我们先简单地学习一下splice函数的用法，splice是JavaScript的一个方法，用于向数组添加或者删除元素，它的基本语法是：
arrayObject.splice(index,howmany,item1,.....,itemX)
- index：规定添加／删除元素的位置，使用负数可从数组结尾处规定位置。
- howmany：规定要删除的元素数量。如果设置为0，则不会删除元素。
- item1：向数组添加的新元素。
- arrayObject：需要被进行添加／删除的数组。
提示
index规定的元素位置是从0开始计数的，本例中的位置顺序是['0'=>'Today按钮对象','1'=>'Close按钮对象']
设置index参数值为1, howmany参数值为0意味着在第二个元素的位置上新增一个item1元素，原先位置上的Close按钮对象保留并向后退一位，此时buttons.数组的值就变成了['Today按钮对象'，'新增的按钮对象'，'Close按钮对象']。如果设置howmany的值为1，就会删除原先位置上的Close按钮对象，此时buttons.数组的值就变成了['Today按钮对象'，'新增的按钮对象']。在本例中新增的按钮对象为：
01 {
02 text: '确定',
03 handler: function(target){
04 alert('当前选择的日期是'+$(target).val());
05 }
06 }
提示
在JavaScript中使用{}来表示一个对象。
其中text表示按钮的名称，handler为按钮单击消息的响应函数，参数target为日期框中的编辑框对象，这样通过jQuery的取值方法就能轻松获取当前选中的日期。
图2.21中在文本框内显示的日期格式为X（月）/X（日）/X（年），这并不符合中国人的阅读模式，我们更希望将日期格式改为X年X月X日，此时需要使用formatter和parser属性来设置，许多初学者可能会写下如下代码：
01 <input id="db" type="text" class="easyui-datebox" required="required">
02 <script>
03 $(function(){
04 $('#db').datebox({
05 parser:function(s){
06 var t =Date.parse(s);
07 if (!isNaN(t)){
08 return new Date(t);
09 } else {
10 return new Date();
11 }
12 },
13 formatter:function(date){
14 var y = date.getFullYear();
15 var m = date.getMonth()+1;
16 var d = date.getDate();
17 return y+'年'+m+'月'+d+'日';
18 }
19 });
20 });
21 </script>
最终运行结果如图2.23所示。
图2.23 设置日期框的展示值
此时会发现日期的格式虽然显示正常，但是无论单击哪一天总是会显示当前日期，这是因为parser属性是对初始值以及输入值进行解析的。我们在数字框章节中讲到，parser属性是将初始值以及输入值解析成合法的存储值。例如，上述代码中通过if(!isNaN(t))来判断输入框中的值是否是一个合法的日期格式，如果不是合法日期格式就将当前的日期作为存储值返回。Date对象的parse方法无法解析中文格式的日期，始终返回当前的日期对象，所以我们会发现无论在日历中选中哪一天，文本框中始终显示当前的日期。解决这个问题的方法就是，在parser属性中将中文格式的日期转化成Date对象的parse方法所接收的日期格式，例如X（月）/X（日）/X（年）。
使用中文格式日期还存在一个问题，我们无法限制用户在文本框中按照我们规定的格式输入日期。例如，我们使用parser属性的方法对X年X月X日格式日期进行解析，此时如果用户输入X（年）/X（月）/X日），那么日期框仍然无法正常运作。解决这个问题的方法就是在对用户输入进行解析时判断多种情况，相关代码如下：
01 parser: function(s){
02 //使用正则表达式解析用户输入
03 //第一种解析的格式X年X月X日
04 var m1 = /\d年\d月\d日/;
05 //第二种解析的格式X/X/X;
06 var m2 = /\d\/\d\/\d/;
07 //第三种解析的格式X.X.X
08 var m3 = /\d\.\d\.\d/;
09 if (m1.test(s)){
10 var tmp1 = s.split("年");
11 var year = tmp1[0];
12 var tmp2 = tmp1[1].split("月");
13 var month= tmp2[0];
14 var tmp3 = tmp2[1].split("日");
15 var day = tmp3[0]
16 return new Date(year+"/"+month+"/"+day);
17 }else if(m2.test(s)){
18 return new Date(s);
19 } else if(m3.test(s)){
20 return new Date(s);
21 }
22 else {
23 return new Date();
24 }
25 },
26 formatter:function(date){
27 var y = date.getFullYear();
28 var m = date.getMonth()+1;
29 var d = date.getDate();
30 return y+'年'+m+'月'+d+"日";
31 }
最终运行结果如图2.24所示。
图2.24 设置中文格式的日期框
【本节详细代码参见随书源码：\源码\easyui\example\c2\dateboxCHN.html】
3. 日期框事件
日期框常用事件说明见表2.41。
表2.41 日期框常用事件
4. 日期框方法
日期框常用方法说明见表2.42。
表2.42 日期框常用方法
5. 日历的共用
在网站开发中经常会遇到一个页面中用到多个日期时间框的情况，通常情况下需要通过日期框的calendar方法获取其日历对象，然后对日历对象进行汉化，但是对每个日期框都使用这种方式会使开发变得十分烦琐，因此我们可以采用多个日期框共用一个日历的方法来减少开发的难度。日期框可以通过sharedCalendar属性和cloneFrom方法来共用日历。其中sharedCalendar属性是对日历进行复用，使用方法如下：
01 <input id="dt1" type="text">
02 <input id="dt2" type="text">
03 <div id="cc"></div>
04 <script>
05 $(function(){
06 $('#dt1').datebox({
07 sharedCalendar:"#cc"
08 });
09 $('#dt2').datebox({
10 sharedCalendar:"#cc"
11 });
12 $('#cc').calendar({
13 current:new Date(),
14 width:400,
15 height:300,
16 firstDay:"1",
17 months:['1月','2月','3月','4月','5月','6月','7月','8月',
18 '9月','10月','11月', '12月'],
19 weeks:['周日','周一','周二','周三','周四','周五','周六'],
20 });
21 });
22 </script>
使用该方法时需要先初始化一个日历，然后使用sharedCalendar属性使两个日期框共同使用这个日历。
使用日期框的cloneFrom方法也可以完成日历的共享，与sharedCalendar属性不同的是，cloneFrom方法会共用指定日期框的全部属性，也可以称它是完成日期框的复制操作，例如：
01 <input id="dt1" type="text">
02 <input id="dt2" type="text">
03 <script>
04 $(function(){
05 $('#dt1').datebox({
06 width:300,
07 currentText:"今天",
08 closeText:"关闭",
09
10 });
11 $('#dt1').datebox('calendar').calendar({
12 current:new Date(),
13 width:400,
14 height:300,
15 firstDay:"1",
16 months:['1月','2月','3月','4月','5月','6月','7月','8月',
17 '9月','10月', 17 '11月', '12月'],
18 weeks:['周日','周一','周二','周三','周四','周五','周六'],
19 });
20 $('#dt2').datebox("cloneFrom","#dt1");
21 });
22 </script>
最终运行结果如图2.25所示。
图2.25 日期框的复制
【本节详细代码参见随书源码：\源码\easyui\example\c2\shareCalendar.html】
2.5.3 日期时间框（DateTimeBox）
日期时间框的使用与日期框一样，与日期框不同的是日期时间框增加了一个时间微调器用于显示时间。
日期时间框的依赖关系如下：
- datebox
- timespinner
日期时间框扩展于：
- datebox
日期时间框的默认配置定义在$.fn.datetimebox.defaults中。
1. 日期时间框的用法
使用标记创建日期时间框的方法如下：
<input class="easyui-datetimebox" >
使用JavaScript创建日期时间框的方法如下：
01 <input id="dt" type="text">
02 $('#dt').datetimebox();
2. 日期时间框的属性
日期时间框常用属性见表2.43。
表2.43 日期时间框常用属性
3. 日期时间框的事件
日期时间框无新增和重写的事件。
4. 日期时间框的方法
日期时间框常用方法见表2.44。
表2.44 日期时间框常用方法
