mydate97时间插件集成jquery插件
1.初始化JS:
//把mydate97时间插件集成jquery插件 (function ($) { $.fn.mydatePicker = function (options) { return this.each(function (i, target) { var _fmt = $(target).data('fmt'); if (!_fmt) _fmt = 'yyyy-MM-dd'; var defaults = { autoUpdateOnChanged: true, autoPickDate: true, isShowClear: true, readOnly: true, isShowOK: true, dateFmt: _fmt, ychanged: function () { }, Mchanged: function () { }, dchanged: function () { }, Hchanged: function () { }, schanged: function () { }, onSelected: function () { }, oncleared: function () { } }; var optStr = $(target).data("options"), opt = {}; if (optStr) opt = eval("({" + optStr + "})"); var opts = $.extend(defaults, opt, options); opts.el = $(target).get(0); if ($(target).hasClass("ui-validatebox")) { $(target).off("focus").on("focus", function (e) { if ($(target).attr("readonly")) { setTimeout(function () { $(target).trigger("mouseenter"); }, 200); return; } var _d = $.data(e.target, "validatebox"); var _e = $(e.target); _d.validating = true; _d.value = undefined; (function () { if (_d.validating) { if (_d.value != _e.val()) { _d.value = _e.val(); if (_d.timer) { clearTimeout(_d.timer); } _d.timer = setTimeout(function () { $(e.target).validatebox("validate"); }, _d.options.delay); } else { //_f(e.target); } setTimeout(arguments.callee, 200); } })(); }); } ; opts.onpicked = opts.oncleared = function () { if ($(target).hasClass("ui-validatebox")) $(target).validatebox("validate"); opts.onSelected(); }; //WdatePicker.call(target, opts); $(target).prop("readonly", opts.readOnly); //绑定 $(target).unbind("click").bind("click", function (e) { e.preventDefault(); e.stopPropagation(); WdatePicker(opts); }); }) } })(jQuery);
$(document).ready(function () { $('.mydate').mydatePicker(); })
2.页面代码:
<label>报表类型:<input id="dayOrHour" class="textBox" name="p1" value=""></label> <label>时间:<input type="text" id="time" class="mydate readonly full-text" style="width:240px;height:24px;"></label>
3.页面联动js:
$('#dayOrHour').combobox({ method: ajaxConfig.reqMtd, url: pageConfig.json.reportType, width: 130, height: 32, panelHeight: 100, editable: false, onSelect:function(record){ var $time= $("#time"); if (record.text == "日报"){ $time.clone().insertAfter($time[0]).mydatePicker({dateFmt: 'yyyy-MM-dd'}); $time.remove(); } else { $time.clone().insertAfter($time[0]).mydatePicker({dateFmt: 'yyyy-MM-dd HH'}); $time.remove(); } } });
效果如下图: