layDate.js插件

今天学了layDate.js独立插件的使用，layDate.js的使用避免了我们在写万年历等日历的操作，只需引入layDate.js即可

//引入layDate.js
//src要改为自己的路径

html代码

js代码

date.png

�format.png

valuepng

// range - 开启左右面板范围选择,一般默认为false
//当设置为true时，可以选择范围
laydate.render({
  elem: '#test1'
  ,range:'~'//range: '~' 来自定义分割字符
  ,min:-7
  ,max:7
});

A05FA884-837F-4CF0-B924-252ED0998239.png

//min/max 设置选择日期的最小值和最大值
// 类型：string，默认值：min: '1900-1-1'、max: '2099-12-31'
// 设定有限范围内的日期或时间值，不在范围内的将不可选中。这两个参数的赋值非常灵活，主要有以下几种情况：
// 1.  如果值为字符类型，则：年月日必须用 -（中划线）分割、时分秒必须用 :（半角冒号）号分割。这里并非遵循 format 设定的格式
// 2.  如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后
// 3.  如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日

laydate.render({
  elem: '#test1'
  ,range:'~'//range: '~' 来自定义分割字符
  ,min:-7//当前日期的过去七天
  ,max:7//当前日期的未来七天
});

min/max.png

// trigger - 自定义弹出控件的事件
// 类型：String，默认值：focus，如果绑定的元素非输入框，则默认事件为：click
laydate.render({
  elem: '#test1'
  ,range:'~'//range: '~' 来自定义
  ,trigger:'mouseenter'//鼠标移入日历表出现
});

//lang 语言
// 类型：String，默认值：cn
// 我们内置了两种语言版本：cn（中文版）、en（国际版，即英文版）。这里并没有开放自定义文字，是为了避免繁琐的配置。
laydate.render({
  elem: '#test1'
  ,lang:'en'
});

cn.png

en.png

//mark 标记
//可以标出特殊日子，建立备忘录
laydate.render({
  elem: '#test1'
  ,lang:'en'
  ,mark:{
      ,'0-6-1':'儿童节'
      ,'0-11-11':'光棍节'
}
});

67D32D78-B588-4519-9F88-F7B4F3A83F11.png

//theme  �主题
//类型：String，默认值：default
//theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）
laydate.render({
  elem: '#test1'
  ,lang:'en'
  ,theme:'molv'
});

2578004E-84B5-4607-A099-ABFC59EBFF17.png