EasyUI修改DateBox和DateTimeBox的默认日期格式示例

下面是针对EasyUI修改DateBox和DateTimeBox的默认日期格式的完整攻略。

需求分析

在使用EasyUI组件的时候，DateBox和DateTimeBox组件默认展示的日期格式可能并不符合我们的需求，需要修改默认展示的日期格式。

解决方案

EasyUI的DateBox和DateTimeBox组件在初始化时都会有一个options参数，其中包含了很多选项可以配置，我们可以通过修改这些选项来实现修改默认日期格式的目的。

修改DateBox的默认日期格式

$(function(){
  $('#datebox').datebox({
    formatter:function(date){
      return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
    }
  });
});

在上面的代码中，我们通过给formatter选项配置一个函数来实现修改DateBox的默认日期格式。在这个例子中，我们将返回一个形如YYYY-MM-DD的日期字符串作为展示结果。

修改DateTimeBox的默认日期格式

$(function(){
  $('#datetimebox').datetimebox({
    formatter:function(date){
      return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
    }
  });
});

和修改DateBox的方式类似，我们通过给DateTimeBox的formatter选项配置一个函数来实现修改DateTimeBox的默认日期格式。在这个例子中，我们将返回一个形如YYYY-MM-DD HH:mm:ss的日期字符串作为展示结果。

总结

通过修改DateBox和DateTimeBox组件的formatter选项，我们可以很容易地修改它们的默认日期格式。具体来说，可以给formatter选项配置一个函数，这个函数接收Date类型的参数，返回一个格式化后的日期字符串作为展示结果。