让我们像使用easyui组件一样使用My97DatePicker

jQuery easyuiWrapMy97DatePicker Plugin DOC & Dome

功能：
使 My97DatePicker 能够像easyui组件那样可以通过css类名(.easyui-pluginName)进行组件注册，以及通过data-options进行组件配置

说明：
只是借鉴了easyui组件的注册方式和配置方式，其实跟easyui没任何关系；此外本插件并没有劫持或修改My97DatePicker，如果需要，你仍可以采用原生的方式来使用My97DatePicker；说白了，本插件就只是提供了一种“语法糖”，使你可以像使用easyui组件一样来使用My97DatePicker。

使用方法

引入依赖和插件：

<script src="http://cdn.staticfile.org/jquery/1.11.0/jquery.min.js"></script><!-- jQuery 1.7+ -->

<script src="My97DatePicker/WdatePicker.js"></script>

<script src="jquery.easyuiWrapMy97DatePicker.js"></script>

示例零：

<input class="easyui-My97DatePicker" type="text" />

示例一：

<input class="easyui-My97DatePicker" data-options="dateFmt:'yyyy年M月d日'" type="text" />

示例二：

<input id="datePicker" type="text" />

<script>     $('#datePicker').easyuiWrapMy97DatePicker({ startDate: '1949-10-01' }) ; </script>

示例三：

<input class="easyui-My97DatePicker Wdate" data-options="dateFmt:'yyyy年M月d日', onpicked: handlePicked" type="text" />

<script>     function handlePicked() { alert('呵呵') } </script>

进阶

My97DatePicker的官方文档中关于全局配置的说明：

通过配置WdatePicker.js的属性可以避免每次调用都传入配置值,为编程带来很多方便. 在默认情况下My97为每个属性都配置了默认值,这些默认值都可以在WdatePicker.js中修改的 你可以根据你个人的喜好更改这些值

比如你比较不喜欢默认的皮肤default 而更喜欢 whyGreen 这个皮肤, 你可以直接在WdatePicker.js把skin值改为 whyGreen 这样,你就不必每次调用控件的时候都传入 skin:'whyGreen' 了

可见My97DatePicker的全局配置需要通过修改源码才能实现！为此本插件提供了一种无害的方式来实现My97的全局配置，无需修改源码。如，本页面就使用了如下全局配置：

$.My97DatePickerSetup = { skin: 'twoer', dateFmt: 'yyyy-MM-dd' }

最后

因为插件绑定采用了事件委托的方式，所以无论元素是通过js创建的还是ajax载入的只要其拥有类名 easyui-My97DatePicker 都可以被注册成为时间选择控件；另外，全局配置在引入了jQuery之后的页面中的任何地方进行设置都会是有效的。

 

插件源码

/*!
 * jQuery easyuiWrapMy97DatePicker Plugin v1.0
 * 功能：使 My97DatePicker 能够像easyui组件那样
         可以通过css类名(.easyui-pluginName)实现组件注册，
         以及通过data-options进行组件配置；
         说白了就是提供一种“语法糖”，仅此而已
 * Author: Jim
 * Date: 2014-04-15
 * Doc & Deme: http://www.cnblogs.com/MyNameIsJim/p/easyui-my97datepicker.html
 */

;(function($, datePicker){


// 全局配置
$.My97DatePickerSetup = null;    

// 获取控件自身配置
function parseOptions($target) {
    var options = null,
        s = $.trim( $target.attr('data-options') );

    if (s !== ''){
        if (s.substring(0, 1) != '{'){
            s = '{' + s + '}';
        }
        options = (new Function('return ' + s))();
    }

    return options;
}


/**
 * @options    {Object}    将作为实参传递给WdatePicker：WdatePicker(options)，API参照My97DatePicker：http://www.my97.net/
 * @config     {Object}    插件的配置[可选]
 */
$.fn.easyuiWrapMy97DatePicker = function(options, config) {
    var eventNamespaces = '._My97DatePicker',
        dataKey = '_My97DatePicker';

    var settings = $.extend({
        event: 'click'
    }, config);
    settings.event += eventNamespaces;

    this.each(function(){
        var elm = $(this),
            data = elm.data(dataKey),
            dataOpts = null;

        // 该元素是否已经注册成为 “时间控件”
        if (data && data.options) {
            $.extend(data.options, options);
        } else {
            dataOpts = $.extend({}, $.My97DatePickerSetup, parseOptions(elm), options); 

            elm.data(dataKey, {
                options: dataOpts
            })

            elm.on(settings.event, function(){
                datePicker( dataOpts );
            });
        }
    })

    return this;
};


}(jQuery, WdatePicker));


// parse
$(document).on('click', 'input.easyui-My97DatePicker', function(e){
    var elm = $(e.target),
        dataKey = '_My97DatePicker';

    // 已注册
    if (elm.data(dataKey)) return;

    // 注册成为时间控件
    elm.easyuiWrapMy97DatePicker();
    // 触发！
    WdatePicker.call(elm[0], elm.data(dataKey).options);
});