laydate 显示结束时间不小于开始时间的实例
jsp:
1
2
3
4
5
|
<
div
class
=
"form-group"
>
<
label
>交易时间:</
label
>
<
input
placeholder
=
"开始日期"
class
=
"form-control layer-date"
id
=
"startDate"
name
=
"startDate"
>
<
input
placeholder
=
"结束日期"
class
=
"form-control layer-date"
id
=
"endDate"
name
=
"endDate"
>
</
div
>
|
js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<
script
type
=
"text/javascript"
>
var start = {
elem: '#startDate',
format: 'YYYY-MM-DD',
max: laydate.now(),
istime: false,
istoday: false,
choose: function (datas) {
end.min = datas; //开始日选好后,重置结束日的最小日期
end.start = datas //将结束日的初始值设定为开始日
}
};
var end = {
elem: '#endDate',
format: 'YYYY-MM-DD',
max: laydate.now(),
istime: false, //是否开启时间选择
istoday: false,
isclear: true, //是否显示清空
issure: true, //是否显示确认
choose: function (datas) {
start.max = datas; //结束日选好后,重置开始日的最大日期
}
};
laydate(start);
laydate(end);
//给input赋值
$('#startDate').val(laydate.now(-30, 'YYYY-MM-DD'));
$('#endDate').val(laydate.now(0, 'YYYY-MM-DD'));
</
script
>
|
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>
![](http://upload-images.jianshu.io/upload_images/7426643-3045079aec63744e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/304)
date.png
<script>
//format 自定义格式
//默认格式 yyyy-MM-dd
laydate.render({
elem:'#test1'
,type:'date'//默认为date
,format:'yyyy年MM月dd日'
})
</script>
![](http://upload-images.jianshu.io/upload_images/7426643-6d70015684edd16d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/283)
�format.png
<script>
//value 初始值
//默认值 new Date()
laydate.render({
elem:'#test1'
,type:'date'//默认为date
//,value:new Date(2555677741)//括号中的为毫秒数
,value:2019-08-13' //value 的格式必须与设置的format的格式相同
})
</script>
![](http://upload-images.jianshu.io/upload_images/7426643-70be2225903c715d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/284)
valuepng
// range - 开启左右面板范围选择,一般默认为false
//当设置为true时,可以选择范围
laydate.render({
elem: '#test1'
,range:'~'//range: '~' 来自定义分割字符
,min:-7
,max:7
});
![](http://upload-images.jianshu.io/upload_images/7426643-987c8ea9123ec7e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/554)
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//当前日期的未来七天
});
![](http://upload-images.jianshu.io/upload_images/7426643-895106249b3e50cf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/551)
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'
});
![](http://upload-images.jianshu.io/upload_images/7426643-b038d14298d5aacc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/280)
cn.png
![](http://upload-images.jianshu.io/upload_images/7426643-25c03c78906a08b5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/283)
en.png
//mark 标记
//可以标出特殊日子,建立备忘录
laydate.render({
elem: '#test1'
,lang:'en'
,mark:{
,'0-6-1':'儿童节'
,'0-11-11':'光棍节'
}
});
![](http://upload-images.jianshu.io/upload_images/7426643-bcfd24ffc05e09bb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/282)
67D32D78-B588-4519-9F88-F7B4F3A83F11.png
//theme �主题
//类型:String,默认值:default
//theme的可选值有:default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)
laydate.render({
elem: '#test1'
,lang:'en'
,theme:'molv'
});