浅谈jQuery.easyui的datebox格式化时间

下面是详细讲解“浅谈jQuery.easyui的datebox格式化时间”的完整攻略：

1. jQuery.easyui的datebox介绍

jQuery.easyui是一套基于jQuery框架，提供简单易用的UI组件和插件的库。其中，datebox是该库中的一个常用组件。

datebox组件用于日期选择器，可以让用户通过日历来选择日期和时间。同时，datebox组件还支持自定义的日期格式化，可以满足不同需求下的使用。

2. datebox的格式化函数

在datebox中，可以通过formatter和parser属性自定义日期的显示与解析格式。具体来说，formatter属性用于将日期对象格式化为字符串，而parser属性则用于将字符串解析为日期对象。下面是一个简单的例子：

<input class="easyui-datebox" data-options="
    formatter: function(date) {
        // 将日期对象格式化为yyyy-MM-dd的字符串
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        return year + '-' + (month<10?('0'+month):month) + '-' + (day<10?('0'+day):day);
    },
    parser: function(s) {
        // 将形如yyyy-MM-dd的字符串解析为日期对象
        if (!s) return new Date();
        var ss = s.split('-');
        var year = parseInt(ss[0], 10);
        var month = parseInt(ss[1], 10);
        var day = parseInt(ss[2], 10);
        if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {
            return new Date(year, month-1, day);
        } else {
            return new Date();
        }
    }
">

上述例子中，我们通过formatter属性将日期对象格式化为了yyyy-MM-dd的字符串，同时通过parser属性将形如yyyy-MM-dd的字符串解析为日期对象。

3. datebox的格式化规则

下面是datebox支持的格式化规则：

代码	描述
yy	年份（两位数字）
yyyy	年份（四位数字）
M	月份，不带前导零
MM	月份，带前导零
d	日数，不带前导零
dd	日数，带前导零
H	小时数，不带前导零
HH	小时数，带前导零
m	分钟数，不带前导零
mm	分钟数，带前导零
s	秒数，不带前导零
ss	秒数，带前导零
S	毫秒数，不带前导零
SS	毫秒数，带前导零
A	上午/下午（大写字母）

4. 示例说明

示例1

假设我们需要将日期格式化为yyyy.MM.dd HH:mm:ss形式，并且在选择时显示"请选择日期"，在未选择时显示"未选择"。可以如下进行设置：

<input class="easyui-datebox" data-options="
    formatter: function(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        return year + '.' + (month<10?('0'+month):month) + '.' + (day<10?('0'+day):day) + ' ' + (hour<10?('0'+hour):hour) + ':' + (minute<10?('0'+minute):minute) + ':' + (second<10?('0'+second):second);
    },
    parser: function(s) {
        if (!s) return new Date();
        var ss = s.split(' ');
        var datePart = ss[0].split('.');
        var timePart = ss[1].split(':');
        var year = parseInt(datePart[0], 10);
        var month = parseInt(datePart[1], 10);
        var day = parseInt(datePart[2], 10);
        var hour = parseInt(timePart[0], 10);
        var minute = parseInt(timePart[1], 10);
        var second = parseInt(timePart[2], 10);
        if (!isNaN(year) && !isNaN(month) && !isNaN(day) && !isNaN(hour) && !isNaN(minute) && !isNaN(second)) {
            return new Date(year, month-1, day, hour, minute, second);
        } else {
            return new Date();
        }
    },
    editable: false, // 禁用手动输入
    prompt: '请选择日期', // 选择器的提示信息
    value: '' // 初始化的值为空
">

在上述代码中，我们将日期格式化为了yyyy.MM.dd HH:mm:ss的形式，并且限制了用户手动输入。同时，我们通过editable、prompt和value属性实现了在未选择时显示"未选择"的效果。

示例2

假设我们需要将日期格式化为yyyy年M月d日 H:m形式，并且在选择时自动关闭日历框并且将焦点转移至下一个输入框。可以如下进行设置：

<input class="easyui-datebox" data-options="
    formatter: function(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        return year + '年' + month + '月' + day + '日 ' + hour + ':' + minute;
    },
    parser: function(s) {
        if (!s) return new Date();
        var ss = s.split(' ');
        var datePart = ss[0].split('年');
        var timePart = ss[1].split(':');
        var year = parseInt(datePart[0], 10);
        var month = parseInt(datePart[1], 10);
        var day = parseInt(datePart[2], 10);
        var hour = parseInt(timePart[0], 10);
        var minute = parseInt(timePart[1], 10);
        if (!isNaN(year) && !isNaN(month) && !isNaN(day) && !isNaN(hour) && !isNaN(minute)) {
            return new Date(year, month-1, day, hour, minute);
        } else {
            return new Date();
        }
    },
    panelClosedHandler: function() {
        // 当日期选择器面板关闭时，将焦点转移至下一个输入框
        $(this).next().focus();
    }
">

在上述代码中，我们通过parser和formatter属性将日期格式化为了yyyy年M月d日 H:m的形式，并且设置了panelClosedHandler属性实现了选择时自动关闭日历框并且将焦点转移至下一个输入框的效果。