自己二次封装了一个时间范围选择插件,可选范围与相对时间

  • A+

由于工作需要,二次封装时间选择插件 laydate5.0.7

相对绝对时间范围选择

包含功能:单周,双周,单月,季度,自定义范围选择

相对时间选择:最近7天,最近14天,最近30天,最近90天等功能

需要的可以git下来:传送门 

如果能给个star会更好奥

配置项:

  1. type: 'date' //控件类型,支持:year/month/date/time/datetime
  2.     , range: false //是否开启范围选择,即双控件
  3.     , format: 'yyyy-MM-dd' //默认日期格式
  4.     , value: null //默认日期,支持传入new Date(),或者符合format参数设定的日期格式字符
  5.     , min: '1900-1-1//有效最小日期,年月日必须用“-”分割,时分秒必须用“:”分割。注意:它并不 是遵循 format 设定的格式。
  6.     , max: '2199-12-31//有效最大日期,同上
  7.     , trigger: 'focus' //呼出控件的事件
  8.     , show: false //是否直接显示,如果设置true,则默认直接显示控件
  9.     , showBottom: true //是否显示底部栏
  10.     , btns: ['clear', 'confirm'] //右下角显示的按钮,会按照数组顺序排列
  11.     , lang: 'cn' //语言,只支持cn/en,即中文和英文
  12.     , theme: 'default//主题
  13.     , position: null //控件定位方式定位, 默认absolute,支持:fixed/absolute/static
  14.     , calendar: false //是否开启公历重要节日,仅支持中文版
  15.     , mark: {} //日期备注,如重要事件或活动标记
  16.     , zIndex: null //控件层叠顺序
  17.     , done: null //控件选择完毕后的回调,点击清空/现在/确定也均会触发
  18.     , change: null //日期时间改变后的回调
  19.     , Interval: true //开启区间范围
  20.     , time:'absolute' //默认绝对时间 relative 相对时间
  21.     , cycle:'week' //默认选择单周:week,双周:double-week,自然月:month,自然季度:quarterly,自定义:self

 

使用方式

html:

  1. <input  type="text" placeholder="选择时间段" id="userTime">

js:

  1. laydate.render({
  2.                    elem: '#userTime'
  3.                    ,range: true
  4.                    ,type:'month'
  5.                    ,cycle:'month'
  6.                });

更多配置项的使用,可以参考laydate官网:http://www.layui.com/laydate/

单周选择

自己二次封装了一个时间范围选择插件,可选范围与相对时间

双周选择

自己二次封装了一个时间范围选择插件,可选范围与相对时间

自然月

自己二次封装了一个时间范围选择插件,可选范围与相对时间

自然季度

自己二次封装了一个时间范围选择插件,可选范围与相对时间

自定义

自己二次封装了一个时间范围选择插件,可选范围与相对时间

相对时间

自己二次封装了一个时间范围选择插件,可选范围与相对时间

weinxin
我的微信
这是我的微信扫一扫
kiven

发表评论取消回复

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:6   其中:访客  3   博主  3

    • avatar 布宜诺斯 1

      很欣赏你的网站 :cool:

      • avatar 肥佬 0

        很好的网站

        • avatar 小猪麦兜 0

          很好

          • avatar kiven Admin

            很好的分享

              • avatar kiven Admin

                @kiven 谢谢

              • avatar kiven Admin

                很不错