菜单

laydate日期扩展组件_jquery_脚本之家

2020年3月30日 - 新闻中心

本人后端开发码农一个,公司前端忙的一逼,项目使用的是easyui组件,其自带的datebox组件使用起来非常不爽,主要表现在

laydate日期扩展组件_jquery_脚本之家。1、自定义显示格式很麻烦

2、选择年份和月份用户体验也不好

网上有关于和 My97DatePicker 结合的例子,但感觉也用的不是很爽。

发现国内的layDate体验非常满意,所以萌生出想把这两个组件组合起来的想法,具体代码如下,本人非前端,所以只是实现了基本功能,大神勿喷哦。

easyUI版本:V1.5.2

layDate版本:V5.0

/*基于laydate日期扩展组件*/ { function createBox { var state = $.data; var opts = state.options; $.addClass.textbox($.extend({}, opts, { editable: false, icons: [{ iconCls: 'combo-arrow' }] })); $.next.addClass; laydate.render({ elem: '#' + $.next.children, //指定元素, 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  { $.textbox; opts.onSelect.call(target, value, date, endDate); }, change: function { opts.onChange.call(target, value, date, endDate); } }); } $.parser.plugins.push;//注册扩展组件 $.fn.laydate = function  { if (typeof options == 'string') { var method = $.fn.laydate.methods[options]; if  { return method; } else { return this.textbox; } } options = options || {}; return this.each { var state = $.data; if  { $.extend(state.options, options); } else { $.data(this, 'laydate', { options: $.extend({}, $.fn.laydate.defaults, $.fn.laydate.parseOptions; } createBox; }; $.fn.laydate.methods = { options: function  { var copts = jq.textbox; return $.extend($.data.options, { width: copts.width, height: copts.height, originalValue: copts.originalValue, disabled: copts.disabled, readonly: copts.readonly }); } }; $.fn.laydate.parseOptions = function  { return $.extend({}, $.fn.textbox.parseOptions; }; $.fn.laydate.defaults = $.extend({}, $.fn.textbox.defaults, { //laydate 参数说明:http://www.layui.com/doc/modules/laydate.html#type theme: "#0099cc", datetype: "date",//控件选择类型 year month date time datetime range: false,//开启左右面板范围选择 或 range: '~' 来自定义分割字符 //最小/大范围内的日期时间值 //如果值为字符类型,则:年月日必须用 -号分割。这里并非遵循 format 设定的格式 //如果值为整数类型,且数字<86400000,则数字代表天数,如:min: -7,即代表最小日期在7天前,正数代表若干天后 //如果值为整数类型,且数字 ≥ 86400000,则数字代表时间戳,如:max: 4073558400000,即代表最大日期在:公元3000年1月1日 min: '1900-1-1', max: '2099-12-31', format: "yyyy-MM-dd",//自定义格式 zIndex: 66666666,//层叠顺序 calendar: false,//是否显示公历节日 //标注重要日子 //每年的日期 {'0-9-18': '国耻'} 0 即代表每一年 //每月的日期 {'0-0-15': '中旬'} 0-0 即代表每年每月(layui 2.1.1/layDate 5.0.4 新增) //特定的日期 {'2017-8-21': '发布') mark: {}, onSelect: function  { }, onChange: function  { } });});

  $ { $.laydate({ width: 200, datetype: 'month' }); }); 

别忘记引用jquery、easyui和laydate的js文件了哦

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图