博客

EasyUI的jQuery时间选取器小部件

  • Post category:jquery

下面是“EasyUI的jQuery时间选取器小部件”的完整攻略，希望对你有帮助。

1. 了解 EasyUI datetimebox 组件

datetimebox 组件是 EasyUI 中的一个日期时间选择器，根据用户设置的格式显示日期和时间。可以通过一些属性参数自定义日期时间格式、最小值、最大值、是否只读等。在使用前需要先引入 EasyUI 和对应的主题样式。

2. 构建基本的 datetimebox

在 HTML 文件中添加如下代码可以实现一个基本的 datetimebox：

<input class="easyui-datetimebox">

然后在 JS 文件中初始化 datetimebox：

$(function(){
    $('.easyui-datetimebox').datetimebox();
});

这段代码使用 jQuery 的选择器选中 HTML 文件中所有 class 名为 “easyui-datetimebox” 的元素，并将它们初始化为 datetimebox 组件。

默认情况下，datetimebox 采用 “yyyy-MM-dd HH:mm:ss” 格式展示时间，如需要自定义显示格式，可以更改属性参数，例如：

<input class="easyui-datetimebox" data-options="formatter:myformatter,parser:myparser">

在上面的代码中，data-options 属性中的 formatter 和 parser 属性是自定义的函数，用于分别将日期时间格式化为字符串和将字符串解析为日期时间格式。

3. 添加 EasyUI 主题样式

在使用 datetimebox 组件前，需要先引入 EasyUI 主题样式。可以到 EasyUI 官方网站下载所需的 CSS 样式，并将其放置在 HTML 文件的头部。

例如，使用 “bootstrap” 主题样式可以按以下方式引入：

<head>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/easyui/themes/icon.css">
</head>

4. 示例1：自定义日期时间格式

下面展示如何使用 datetimebox 组件实现只显示日期（年月日）的功能：

HTML：

<input class="easyui-datetimebox" data-options="showTime:false">

JS：

$(function(){
    $.extend($.fn.datagrid.defaults, {
        formatter:function(date){
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            var d = date.getDate();
            return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
        },
        parser:function(s){
            if (!s) return new Date();
            var ss = (s.split('-'));
            var y = parseInt(ss[0],10);
            var m = parseInt(ss[1],10);
            var d = parseInt(ss[2],10);
            if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
                return new Date(y,m-1,d);
            } else {
                return new Date();
            }
        }
    });
});

在这段代码中，我们首先将 data-options 属性中的 showTime 属性设置为 false 以仅显示日期，然后分别定义了 formatter 和 parser 两个函数，它们分别用于将日期格式化为字符串和将字符串解析为日期格式。

5. 示例2：自定义最小值、最大值

下面展示如何使用 datetimebox 组件自定义最小值和最大值。在这个例子中，我们将最小值设置为 2021-07-01，最大值设置为 2021-08-01。

HTML:

<input class="easyui-datetimebox" data-options="min:'2021-07-01',max:'2021-08-01'">

JS:

$(function(){
    $('.easyui-datetimebox').datetimebox({
        onSelect:function(date){
            console.log(date);
        },
        parser:function(s){
            if (!s) return new Date();
            var ss = s.split('-');
            var y = parseInt(ss[0],10);
            var m = parseInt(ss[1],10);
            var d = parseInt(ss[2],10);
            if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
                return new Date(y,m-1,d);
            } else {
                return new Date();
            }
        },
        formatter:function(date){
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            var d = date.getDate();
            return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
        }
    });
});

在这段代码中，我们首先在 HTML 中定义了 data-options 属性指定最小值和最大值，然后在初始化 datetimebox 时传入了 onSelect、parser 和 formatter 函数，其中 onSelect 函数用于在用户选择时间后打印选定的日期，parser 和 formatter 函数用于将日期格式化为字符串和将字符串解析为日期格式。

以上就是“EasyUI的jQuery时间选取器小部件”的完整攻略，希望对你有所帮助。

Tags: