让我们像使用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({ skin: 'default' }) ;    </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的全局配置，无需修改源码。具体用法就是将 【一个javascript对象字面量形式的配置】 置于 【引入本插件的script标签】中。示例：

<script src="jquery.easyuiWrapMy97DatePicker.js"> { skin: 'whyGreen', dateFmt: 'yyyy-MM-dd' } </script>

注意：获取配置嵌入的script标签，本插件是通过匹配该标签的src属性值来实现的，如果你修改了本插件的js文件名称，则需要修改本插件源码中用于匹配src的正则：

srcReg = /easyuiWrapMy97DatePicker\. js/

插件源码：

 

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

;(function($, datePicker){


// 全局配置
var setup = (function () {
    var scripts = document.getElementsByTagName('script'),
        script = null,
        srcReg = /easyuiWrapMy97DatePicker\.js/;

    for (var i = 0, len = scripts.length; i < len; i++) {
        var myScript = scripts[i];

        if ( srcReg.test(myScript.src) ) {
            script = myScript;
        }
    }

    /* 
     * 如果在页面中引入本插件时，路径没有包含 'easyuiWrapMy97DatePicker.js'，即文件被更名了，
     * 那么选择当前正在运行的js代码所属的script标签 (如果该js文件是采用模块化加载的，这不是有效的方法)
     */
    script || (script = scripts[len - 1]); 
    var config = (new Function('return ' + $.trim(script.text)))();

    return (config && config.toString() === '[object Object]') ? config : 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) {
            elm.off(eventNamespaces);
            dataOpts = $.extend(data.options, options);
        } else {
            dataOpts = $.extend({}, setup, parseOptions(elm), options); 

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

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

    return this;
};


}(jQuery, WdatePicker));


// parse
$(function(){
    $('.easyui-My97DatePicker, .easyui-my97DatePicker').easyuiWrapMy97DatePicker();   
});