现在的位置: 首页 > easyui > 正文
小 中 大
将my97日期控件集成到easyui框架中
2013年02月28日 ⁄ easyui, My97 ⁄ 共 10652字 ⁄ 评论数 17 ⁄ 被围观 25,043 views+
文章目录
[隐藏]

My97DatePicker控件的大名很多人都听过了，作为一款国产的日期时间控件，它的功能和性能各方面都是数一数二的。相对而言，jQuery Easyui的datebox和datetimebox的功能就有点捉襟见肘了。也因为如此，很多使用了Easyui框架的童鞋依旧会选择my97作为日期控件使用。

通常情况下，我们只要导入My97DatePicker的核心javascript文件就能在Easyui框架中使用my97了，而且用法也比较简单，比如以下代码就能轻松使用my97以及Easyui的validatebox组件：

  1. <input id="d411" class="Wdate easyui-validatebox" type="text" onfocus="WdatePicker({skin:'whyGreen',minDate:'2006-09-10',maxDate:'2008-12-20'})"/>

既然直接使用也很简单，为何还要集成？本文就针对直接使用my97的弊端以及如何集成my97到Easyui框架中做较为全面的描述。

直接使用my97的缺点：

my97编码方式与Easyui存在点差异

在Easyui的世界中，我们习惯了使用class来注册组件，或者是用jQuery来注册组件，而my97无法通过class注册。这一点很多人可能觉得吹毛求疵，不过对于我个人而已，同一项目中存在不同的组件编码风格总归让人觉得不舒服。

my97的DOM结构样式跟Easyui存在差异

这一点是毋庸置疑的了，my97的结构简单，只有一个文本框，其日期图标实际上只是文本框的背景图片。而easyui的对应组件却是一个文本框和一个span元素组成的。当然了，要解决这个问题也很简单，my97自身也是可以灵活设置触发点的，DOM结构可以模拟得跟easyui对应组件一样，然后再加以CSS就可基本解决问题。

my97样式与validatabox组件样式冲突

my97与validatebox样式的冲突的根本原因依然是DOM结构的差异，也可以通过问题二的同样方式去解决，而这样做的代价除了写css文件外，还要每个组件都要自己手动写较复杂的DOM，比如my97用以下DOM模拟datebox：

  1. <span class="my97-wrap">
  2.     <input id="my97_2" type="text" class="easyui-validatebox my97-text" data-options="required:true" onclick="WdatePicker();">
  3.     <span>
  4.         <span class="my97-arrow" onclick="WdatePicker({el:'my97_2'});"></span>
  5.     </span>
  6. </span>

我们来看一下我最终模拟的效果：
http://www.easyui.info/easyui/demo/my97/062.html

实现my97与EasyUI的集成：

集成二者其实也就是为了解决直接使用my97的不足之处，而我们做集成的思路也就是前面用my97模拟databox的思路，只不过我们把这种零碎的操场封装成为EasyUI的插件更为方便罢了，直接上代码：

jquery.my97.js文件：
  1. /**  
  2.  * my97 - jQuery EasyUI  
  3.  * Licensed under the GPL:  
  4.  * http://www.gnu.org/licenses/gpl.txt  
  5.  * Copyright 2013 小雪转中雪 [ caoguanghuicgh@163.com ] [http://www.easyui.info]  
  6.  */
  7. (function ($) {
  8.     //如果没有my97控件，则添加之。   
  9.     (function () {
  10.         var hasmy97 = false;
  11.         var plugins = $.parser.plugins;
  12.         for (var i = plugins.length - 1; i > -1; i--) {
  13.             if (plugins[i] === "my97") {
  14.                 hasmy97 = true;
  15.                 break;
  16.             }
  17.         }
  18.         if (hasmy97 == false) {
  19.             $.parser.plugins[$.parser.plugins.length] = "my97";
  20.         }
  21.     })();
  23.     function init(target) {
  24.         $(target).addClass("my97-text")
  25.         var wrap = $("<span class=\"my97-wrap\"></span>").insertBefore(target);
  26.         wrap[0].appendChild(target);
  27.         var arrow = $("<span class=\"my97-arrow\"></span>").insertAfter(target);
  28.         return wrap;
  29.     };
  31.     /**
  32.      * 绑定事件用以触发原生的my97控件  
  33.      * @param  {[type]} target [description]  
  34.      * @return {[type]}        [description]  
  35.      */
  37.     function bindEvents(target) {
  38.         var data = $.data(target, "my97");
  39.         var opts = data.options;
  40.         var wrap = $.data(target, "my97").my97;
  41.         var input = wrap.find(".my97-text");
  42.         var arrow = wrap.find(".my97-arrow");
  44.         input.unbind(".my97");
  45.         arrow.unbind(".my97");
  46.         if (!opts.disabled) {
  47.             input.bind("click.my97", function (e) {
  48.                 //TODO 触发my97   
  49.                 WdatePicker(opts);
  50.             });
  51.             arrow.bind("click.my97",function () {
  52.                 //TODO 触发my97   
  53.                 WdatePicker($.extend({}, opts, {el:opts.id}));
  54.             }).bind('mouseenter.my97',
  55.                 function (e) {
  56.                     $(this).addClass('my97-arrow-hover');
  57.                 }).bind('mouseout.my97',
  58.                 function (e) {
  59.                     $(this).removeClass('my97-arrow-hover');
  60.                 }
  61.             );
  62.         }
  63.     };
  65.     /**
  66.      * 销毁组件  
  67.      * @param  {document object} target 承载组件的输入框  
  68.      * @return {[type]}        [description]  
  69.      */
  70.     function destroy(target) {
  71.         var input = $.data(target, "my97").my97.find("input.my97-text");
  72.         input.validatebox("destroy");
  73.         $.data(target, "my97").my97.remove();
  74.         $(target).remove();
  75.     };
  77.     function validate(target, doit) {
  78.         var opts = $.data(target, "my97").options;
  79.         var input = $.data(target, "my97").my97.find("input.my97-text");
  80.         input.validatebox(opts);
  81.         if (doit) {
  82.             input.validatebox("validate");
  83.         }
  84.     };
  86.     function initValue(target) {
  87.         var opts = $.data(target, "my97").options;
  88.         var input = $.data(target, "my97").my97.find("input.my97-text");
  89.         input.val(opts.value);
  90.     }
  92.     function setDisabled(target, disabled) {
  93.         var ops = $.data(target, "my97").options;
  94.         var my97 = $.data(target, "my97").my97;
  95.         var arrow = my97.find('.my97-arrow');
  96.         if (disabled) {
  97.             ops.disabled = true;
  98.             $(target).attr("disabled", true);
  99.             arrow.unbind('click.my97');
  100.             arrow.unbind('hover.my97');
  101.         } else {
  102.             ops.disabled = false;
  103.             $(target).removeAttr("disabled");
  104.             arrow.unbind('click.my97').bind('click.my97', function () {
  105.                 WdatePicker(opts);
  106.             });
  107.             arrow.unbind('mouseenter.my97').unbind('mouseout').bind('mouseenter.my97',
  108.                 function (e) {
  109.                     this.addClass('my97-arrow-hover');
  110.                 }).bind('mouseenter.my97',
  111.                 function (e) {
  112.                     this.removeClass('my97-arrow-hover');
  113.                 }
  114.             );
  115.         }
  116.     };
  118.     /**
  119.      * 设置输入框宽度，主要这里是指box模型的width  
  120.      * @param {document object} target 承载控件的输入框  
  121.      * @param {number} width  宽度  
  122.      */
  123.     function setWidth(target, width) {
  124.         var opts = $.data(target, "my97").options;
  125.         opts.width = width;
  126.         $(target).width(width);
  127.     }
  129.     function setValue(target, value) {
  130.         $(target).val(value);
  131.     }
  133.     function getValue(target) {
  134.         return $(target).val();
  135.     }
  137.     /**
  138.      * 因为my97图片触发方式，必要id，所以在没有设置id的情况下，设置一个唯一ID  
  139.      * @param {[type]} target [description]  
  140.      */
  141.     function setId(target) {
  142.         var pre = "_easyui_my97_id_";
  143.         var opts = $.data(target, "my97").options;
  144.         opts.id = pre + $.fn.my97.defaults.count;
  145.         $(target).attr("id", opts.id);
  146.         $.fn.my97.defaults.count++;
  147.     }
  149.     $.fn.my97 = function (options, param) {
  150.         if (typeof options == 'string') {
  151.             return $.fn.my97.methods[options](this, param);
  152.         }
  153.         options = options || {};
  154.         return this.each(function () {
  155.             var state = $.data(this, 'my97');
  156.             var opts;
  157.             if (state) {
  158.                 opts = $.extend(state.options, options);
  159.             } else {
  160.                 opts = $.extend({}, $.fn.my97.defaults, $.fn.my97.parseOptions(this), options);
  161.                 var wrap = init(this);
  162.                 state = $.data(this, 'my97', {
  163.                     options:opts,
  164.                     my97:wrap
  165.                 });
  166.             }
  167.             if (opts.id == undefined) {
  168.                 setId(this);
  169.             }
  170.             setWidth(this, state.options.width);
  171.             setDisabled(this, state.options.disabled);
  172.             bindEvents(this);
  173.             validate(this);
  174.             initValue(this);
  175.         });
  176.     };
  177.     $.fn.my97.methods = {
  178.         options:function (jq) {
  179.             return $.data(jq[0], 'my97').options;
  180.         },
  181.         destroy:function (jq, param) {
  182.             return jq.each(function () {
  183.                 destroy(this, param);
  184.             });
  185.         },
  186.         setWidth:function (jq, param) {
  187.             return jq.each(function () {
  188.                 setWidth(this, param);
  189.             });
  190.         },
  191.         setValue:function (jq, param) {
  192.             setValue(jq[0], param);
  193.         },
  194.         getValue:function (jq, param) {
  195.             return getValue(jq[0]);
  196.         }
  197.     };
  198.     /**
  199.      * 属性转换器，继承validatebox组件属性  
  200.      * @param  {document object} target 承载my97的输入框  
  201.      * @return {object}        属性列表  
  202.      */
  203.     $.fn.my97.parseOptions = function (target) {
  204.         var t = $(target);
  205.         return $.extend({}, $.fn.validatebox.parseOptions(target), $.parser.parseOptions(target, ["width", "height", "weekMethod", "lang", "skin", "dateFmt", "realDateFmt", 'realTimeFmt', 'realFullFmt', 'minDate', 'maxDate', 'startDate',
  206.             {
  207.                 doubleCalendar:"boolean",
  208.                 enableKeyboard:"boolean",
  209.                 enableInputMask:"boolean",
  210.                 isShowWeek:"boolean",
  211.                 highLineWeekDay:"boolean",
  212.                 isShowClear:"boolean",
  213.                 isShowOthers:"boolean",
  214.                 readOnly:"boolean",
  215.                 qsEnabled:"boolean",
  216.                 autoShowQS:"boolean",
  217.                 opposite:"boolean"
  218.             }, {
  219.                 firstDayOfWeek:"number",
  220.                 errDealMode:"number"
  221.             }]),
  222.             {
  223.                 value:(t.val() || undefined),
  224.                 disabled:(t.attr("disabled") ? true : undefined),
  225.                 id:(t.attr("id") || undefined)
  226.             });
  227.     };
  228.     $.fn.my97.defaults = {
  229.         id:null,
  230.         count:0,
  231.         value:'',
  232.         width:109,
  233.         height:22,
  234.         disabled:false,
  235.         doubleCalendar:false,
  236.         enableKeyboard:true,
  237.         enableInputMask:true,
  238.         weekMethod:'ISO8601',
  239.         position:{},
  240.         lang:'auto',
  241.         skin:'default',
  242.         dateFmt:'yyyy-MM-dd',
  243.         realDateFmt:'yyyy-MM-dd',
  244.         realTimeFmt:'HH:mm:ss',
  245.         realFullFmt:'%Date %Time',
  246.         minDate:'1900-01-01 00:00:00',
  247.         maxDate:'2099-12-31 23:59:59',
  248.         startDate:'',
  249.         firstDayOfWeek:0,
  250.         isShowWeek:false,
  251.         highLineWeekDay:true,
  252.         isShowClear:true,
  253.         isShowOthers:true,
  254.         readOnly:false,
  255.         errDealMode:0,
  256.         qsEnabled:true,
  257.         autoShowQS:false,
  258.         opposite:false,
  259.         quickSel:[],
  260.         disabledDays:null,
  261.         disabledDates:null,
  262.         specialDates:null,
  263.         specialDays:null,
  264.         onpicking:function () {
  265.         },
  266.         onpicked:function () {
  267.         },
  268.         onclearing:function () {
  269.         },
  270.         oncleared:function () {
  271.         }
  272.     };
  273. })(jQuery);

注意：该文件放在themes下你要用到的皮肤下即可。

如何使用？

先引入javascript和css文件

javascript文件之间是有依赖关系的，先要引入EasyUi和my97的核心文件，然后再引入我扩展的名为"my97"的EasyUI组件的javascript文件，至于css文件，先后顺序则无影响，比如：

  1. <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
  2. <link rel="stylesheet" type="text/css" href="../../themes/default/my97.css">
  3. <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
  4. <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
  5. <script type="text/javascript" src="../../../third/My97DatePicker/WdatePicker.js"></script>
  6. <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
  7. <script type="text/javascript" src="../../plugins/jquery.my97.js"></script>
像EasyUI的其它组件一样使用

到这里，你就可以跟使用EasyUI的datebox组件一样，用class或者jQuery注册my97组件了，例如使用class注册：

  1. <input type="text" class="easyui-my97" data-options="required:true,disabled:false,value:'2012-12-13',minDate:'2012-12-12',maxDate:'2012-12-25'">

又或者是使用jQuery注册：

  1. $('#dd').my97({});

使用场景：

暂未整理

效果演示：

http://www.easyui.info/easyui/demo/my97/061.html

接口文档：

暂未整理，属性基本与原生的my97属性一致，请查看my97官方的API文档

更新说明：

本篇文章写的扩展不适合1.4版本，适合1.4版本的扩展抽空会在此处补上！

返回

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. jQuery Easyui timespinner组件值只能调到8的Bug(IE6
  2. combobox扩展:增加追加数据和删除数据的方法
  3. jQuery EasyUI Datagrid 列属性函数中如何获取当前列
  4. jQuery EasyUI datagrid列名包含特殊字符会导致表格错
  5. jQuery EasyUI 1.4 layout组件面板resize事件在IE6-
  6. 浅析jQuery EasyUI响应式布局的实现方案
  7. textbox组件输入后,点击文本框会造成文本丢失的问题
  8. tabs扩展:按照标签页ID进行检索
combo扩展:禁止手工改变输入框的值
编写CodeMirror Modes详解
My97DatePicker与easyui共用问题

目前有 17 条留言 其中：访客:11 条, 博主:6 条

  1. 蚂蚁哥哥 : 2013年06月25日16:44:01  -49楼 @回复 回复

    jquery.my97.js这个在ie中报”对象不支持此属性或方法”,我查看对应位置,是$.fn.my97 = function(options, param) { }中的return this.each(function() {});

    js文件引入顺序和你的要求一下,另外,你的示例在ie中也有问题

    我测试的欢迎是ie8

    希望能解释一下,另外解决一下


    • 管理员       世纪之光 : 2013年06月26日09:16:45  地下1层 @回复 回复

      我的演示我用IE8再次测试了一下，没有发现任何问题啊，你能说得清楚一点吗？

  2. carry : 2013年08月04日15:29:32  -48楼 @回复 回复

    第195行 少了 return


    • 管理员       世纪之光 : 2013年08月06日18:20:13  地下1层 @回复 回复

      谢谢提醒呀，已经更正了。

      • GLAN : 2013年12月11日20:23:45  地下2层 @回复 回复

        在easyui-dialog弹出窗口中加

        无法显示日期选择框

      • damon : 2015年06月25日15:15:01  地下2层 @回复 回复

        楼主 啥时候1.4的搞出来 不太会前端


        • 管理员           世纪之光 : 2015年06月26日17:02:20  地下3层 @回复 回复

          尽量六月份做完，看来需要的人还是蛮多的。

  3. dengyong : 2014年10月13日14:05:04  -47楼 @回复 回复

    在data-options中设置required:true,并设置value值，初始时间控件背景显示为验证不通过的红色背景，希望能给予解答~

    代码：<input type=”text” class=”easyui-my97″ data-options=”value:’2014-10-13′, required:true, disabled:false” style=”width:160px;”>

    版本：
    easyui：1.4
    my97: 4.8 Beta4


    • 管理员       世纪之光 : 2014年10月13日20:08:45  地下1层 @回复 回复

      你好，1.4版本除了新的组件textbox，本篇文章写的扩展已经不适合1.4，应该基于textbox去扩展。
      我周末抽空会重写一遍适合1.4的扩展。

    • 向阳 : 2015年11月25日11:49:01  地下1层 @回复 回复

      楼主，这个1.4以上的版本可以用了，现在继续这个

  4. 222 : 2015年01月08日11:03:14  -46楼 @回复 回复

    示例4-3-1 前面的日期不能大于后面的日期且两个日期都不能大于 2020-10-01

    这个怎么实现？


    • 管理员       世纪之光 : 2015年01月08日12:33:47  地下1层 @回复 回复

      后面的日期设置maxDate为2020-10-01，前面的日期maxDate设置请参见my97官网demo和文档的“脚本自定义限制”

  5. 333 : 2015年02月04日17:30:48  -45楼 @回复 回复

    这个可编辑GRID里面怎么用不了啊！


    • 管理员       世纪之光 : 2015年02月05日21:00:24  地下1层 @回复 回复

      你好，这个扩展不支持1.4以及更高的版本。如果是低版本的，用在可编辑表格中最好是扩展一个对应的编辑器类型使用。

  6. 向阳xlt : 2016年01月08日10:29:39  -44楼 @回复 回复

    支持easyui1.4.3版本的时候出来啊，现在有急用，谢谢

  7. 11 : 2017年03月31日16:54:33  -43楼 @回复 回复

    一步一步做得，出不来啊？求指教

  8. smf : 2017年04月24日09:32:40  -42楼 @回复 回复

    支持easyui1.4版本的在datagrid生成的表格内使用的啥时候出来啊，现在有急用，谢谢

给我留言

留言无头像?


插入图片

返回首页

Copyright © 2012-2017 WebUI框架使用参考  保留所有权利.   Theme by Robin
×