詳解easyui基于 layui.laydate日期擴(kuò)展組件
本人后端開(kāi)發(fā)碼農(nóng)一個(gè),公司前端忙的一逼,項(xiàng)目使用的是easyui組件,其自帶的datebox組件使用起來(lái)非常不爽,主要表現(xiàn)在
1、自定義顯示格式很麻煩
2、選擇年份和月份用戶(hù)體驗(yàn)也不好
網(wǎng)上有關(guān)于和 My97DatePicker 結(jié)合的例子,但感覺(jué)也用的不是很爽。
發(fā)現(xiàn)國(guó)內(nèi)的layDate體驗(yàn)非常滿(mǎn)意,所以萌生出想把這兩個(gè)組件組合起來(lái)的想法,具體代碼如下,本人非前端,所以只是實(shí)現(xiàn)了基本功能,大神勿噴哦。
easyUI版本:V1.5.2
layDate版本:V5.0
/*
基于laydate日期擴(kuò)展組件
*/
(function ($) {
function createBox(target) {
var state = $.data(target, 'laydate');
var opts = state.options;
$(target).addClass('datebox-f').textbox($.extend({}, opts, {
editable: false,
icons: [{ iconCls: 'combo-arrow' }]
}));
$(target).next("span.textbox").addClass('datebox');
laydate.render({
elem: '#' + $(target).next("span.textbox").children(":text").attr("id"), //指定元素,
format: opts.format,
type: opts.datetype,
min: opts.min,
max: opts.max,
zIndex :opts.zIndex ,
range :opts.range ,
theme: opts.theme,
calendar: opts.calendar,
mark: opts.mark,
done: function (value, date, endDate) {
$(target).textbox('setValue', value);
opts.onSelect.call(target, value, date, endDate);
},
change: function(value, date, endDate) {
opts.onChange.call(target, value, date, endDate);
}
});
}
$.parser.plugins.push("laydate");//注冊(cè)擴(kuò)展組件
$.fn.laydate = function (options, param) {
if (typeof options == 'string') {
var method = $.fn.laydate.methods[options];
if (method) {
return method(this, param);
} else {
return this.textbox(options, param);
}
}
options = options || {};
return this.each(function () {
var state = $.data(this, 'laydate');
if (state) {
$.extend(state.options, options);
} else {
$.data(this, 'laydate', {
options: $.extend({}, $.fn.laydate.defaults, $.fn.laydate.parseOptions(this), options)
});
}
createBox(this);
});
};
$.fn.laydate.methods = {
options: function (jq) {
var copts = jq.textbox('options');
return $.extend($.data(jq[0], 'laydate').options, {
width: copts.width,
height: copts.height,
originalValue: copts.originalValue,
disabled: copts.disabled,
readonly: copts.readonly
});
}
};
$.fn.laydate.parseOptions = function (target) {
return $.extend({}, $.fn.textbox.parseOptions(target));
};
$.fn.laydate.defaults = $.extend({}, $.fn.textbox.defaults,
{
//laydate 參數(shù)說(shuō)明:http://www.layui.com/doc/modules/laydate.html#type
theme: "#0099cc",
datetype: "date",//控件選擇類(lèi)型 year month date time datetime
range: false,//開(kāi)啟左右面板范圍選擇 或 range: '~' 來(lái)自定義分割字符
//最小/大范圍內(nèi)的日期時(shí)間值
//如果值為字符類(lèi)型,則:年月日必須用 -(中劃線(xiàn))分割、時(shí)分秒必須用 :(半角冒號(hào))號(hào)分割。這里并非遵循 format 設(shè)定的格式
//如果值為整數(shù)類(lèi)型,且數(shù)字<86400000,則數(shù)字代表天數(shù),如:min: -7,即代表最小日期在7天前,正數(shù)代表若干天后
//如果值為整數(shù)類(lèi)型,且數(shù)字 ≥ 86400000,則數(shù)字代表時(shí)間戳,如:max: 4073558400000,即代表最大日期在:公元3000年1月1日
min: '1900-1-1',
max: '2099-12-31',
format: "yyyy-MM-dd",//自定義格式
zIndex: 66666666,//層疊順序
calendar: false,//是否顯示公歷節(jié)日
//標(biāo)注重要日子
//每年的日期 {'0-9-18': '國(guó)恥'} 0 即代表每一年
//每月的日期 {'0-0-15': '中旬'} 0-0 即代表每年每月(layui 2.1.1/layDate 5.0.4 新增)
//特定的日期 {'2017-8-21': '發(fā)布')
mark: {},
onSelect: function (value, date, endDate) { },
onChange: function (value, date, endDate) { }
});
})(jQuery);
使用方法一:
<input name="BYXX" type="text" id="BYXX" class="easyui-laydate" data-options="width:200,datetype:'month'" />
使用方法二:
<input type="text" id="BYXX" />
<script type="text/javascript">
$(function () {
$("#BYXX").laydate({ width: 200, datetype: 'month' });
});
</script>
別忘記引用jquery、easyui和laydate的js文件了哦
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
基于jquery 的一個(gè)progressbar widge
這個(gè)widget是包含在wijmo 項(xiàng)目中的一個(gè)widget。目前此widget已經(jīng)開(kāi)源基于mit和gpl雙協(xié)議,目前是beta版,可能存在bug。2010-10-10
實(shí)現(xiàn)點(diǎn)擊下箭頭變上箭頭來(lái)回切換的兩種方法【推薦】
本文主要介紹了實(shí)現(xiàn)點(diǎn)擊下箭頭變上箭頭來(lái)回切換的兩種方法,具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12
jQuery實(shí)現(xiàn)表格顏色交替顯示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格顏色交替顯示的方法,涉及jQuery操作表格樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
jQuery探測(cè)位置的提示彈窗(toolTip box)詳細(xì)解析
提示彈窗(toolTip box)經(jīng)常會(huì)被用到,但是本文總要的不是彈,也不是窗,而是探測(cè)位置,在適當(dāng)?shù)牡胤綇棿?。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11
jquery 單引號(hào)和雙引號(hào)的區(qū)別及使用注意
在js中單引號(hào)和雙引號(hào)都是一樣的,平時(shí)使用的時(shí)候盡量用單引號(hào),只有碰到嵌套的時(shí)候才會(huì)同時(shí)用兩種引號(hào),感興趣的朋友可以了解下2013-07-07

