您的位置:首页 > 其它

laydate 插件 基本使用及开始及结束时间限制

2017-05-06 17:07 961 查看
页面工作中,时间日期插件必不可少,最近用了 layDate 日期组件,简洁易用,样式清爽,记录下。
核心方法:laydate(options);
options是一个对象,它包含了以下key: '默认值'
elem: '#id', // 日期显示元素选择器,laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
event: 'click', // 触发事件。如果没有传入event,则按照默认的click
format: 'YYYY-MM-DD hh:mm:ss', // 日期格式
istime: false, // 是否开启时间选择
isclear: true, // 是否显示清空
istoday: true, // 是否显示今天
issure: true, // 是否显示确认
festival: true, // 是否显示节日
min: '1900-01-01 00:00:00', // 最小日期
max: '2099-12-31 23:59:59', // 最大日期
start: '2014-6-15 23:00:00', // 开始日期
fixed: false, // 是否固定在可视区域
zIndex: 99999999, // css z-index
choose: function(dates){ // 选择好日期的回调
}
二、其它方法/属性
laydate.v // 获取laydate版本号
laydate.skin(lib); // 加载皮肤,参数lib为皮肤名
/*
layer.now支持多类型参数。timestamp可以是前后若干天,也可以是一个时间戳。format为日期格式,为空时则采用默认的“-”分割。
如laydate.now(-2)将返回前天,laydate.now(3999634079890)将返回2096-09-28
*/
layer.now(timestamp, format); // 该方法提供了丰富的功能,推荐灵活使用。
laydate.reset(); // 重设日历控件坐标,一般用于页面dom结构改变时。无参

初始化方法:

可以直接在input中使用 

<input onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">

也可以直接在外部js中调用

<input id="hello" class="laydate-icon">
<script>
laydate({
elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎,因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
event: 'focus' //响应事件。如果没有传入event,则按照默认的click
});
如果需要input框默认显示当前时间 可以设置value=laydate.now();

通常我们在做时间搜索的时候会要求做起始时间限制,网上比较常见的一个方法是

$(function(){
var start = {
elem: '#start', //选择ID为START的input
format: 'YYYY/MM/DD hh:mm:ss', //自动生成的时间格式
min: laydate.now(), //设定最小日期为当前日期
max: '2099-06-16 23:59:59', //最大日期
istime: true, //必须填入时间
istoday: false, //是否是当天
start: laydate.now(0,"YYYY/MM/DD hh:mm:ss"), //设置开始时间为当前时间
choose: function(datas){
end.min = datas; //开始日选好后,重置结束日的最小日期
end.start = datas //将结束日的初始值设定为开始日
}
};
var end = {
elem: '#end',
format: 'YYYY/MM/DD hh:mm:ss',
min: laydate.now(),
max: '2099-06-16 23:59:59',
istime: true,
istoday: false,
start: laydate.now(0,"YYYY/MM/DD hh:mm:ss"),
choose: function(datas){
start.max = datas; //结束日选好后,重置开始日的最大日期
}
};
laydate(start);
laydate(end);
})
但是这个方法会有一个问题,就是点击 组件自带的“清除”时,并没有触发choose事件,另一个时间的限制没有解除
所以放弃组件本身choosen方法使用原生点击时间限制,这样就解决了上一个问题

$("#startDate").click(function(){
var end=$("#endDate").val();
var obj={
elem: '#startDate'
};
end&&(obj.max=end);
laydate(obj);
});
$("#endDate").click(function(){
var start=$("#startDate").val();
var obj={
elem: '#endDate'
};
start&&(obj.min=start);
laydate(obj);
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐