今天学了layDate.js独立插件的使用，layDate.js的使用避免了我们在写万年历等日历的操作，只需引入layDate.js即可
//引入layDate.js
<script type="text/javascript" src="laydate/laydate.js"></script>//src要改为自己的路径
html代码
<input type="text" id="test1" placeholder="请选择日期">
js代码
<script>
//type 控件选择器 默认值为date
// year 年份选择器 只提供年列表选择
// month（年月选择器）只提供年、月选择
// date（日期选择器）可选择：年、月、日。type默认值，一般可不填
// time （时间选择器）只提供时、分、秒选择
// datetime（日期时间选择器）可选择：年、月、日、时、分、秒
laydate.render({
elem:'#test1'
,type:'date'//默认为date
,trigger:'click'//默认为click，即点击后出现日历框
})
</script>
date.png
<script>
//format 自定义格式
//默认格式 yyyy-MM-dd
laydate.render({
elem:'#test1'
,type:'date'//默认为date
,format:'yyyy年MM月dd日'
})
</script>
�format.png
<script>
//value 初始值
//默认值 new Date()
laydate.render({
elem:'#test1'
,type:'date'//默认为date
//,value:new Date(2555677741)//括号中的为毫秒数
,value:2019-08-13' //value 的格式必须与设置的format的格式相同
})
</script>
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
