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();
}
}
});
效果如下图: