LAYDATE日历插件使用

在工作中，我们难免会用到日历插件，我一般喜欢用layDate，因为它属性多，设置方便，还有回调函数可以自定义逻辑处理，挺不错的，现在我们就学习使用它~

html页面代码：

<!doctype html><html><head><meta charset=”utf-8″><title>js layDate日历控件代码 – 网站源码</title><script src=”laydate/laydate.js”></script></head><body><div>演示一：<input  onclick=”laydate()”><br /><br />演示二：<input  id=”demo” value=”2014-6-20发布日”></div><script>;!function(){laydate({elem: ‘#demo’})}();</script></body></html>

效果如下

点击文本框，效果如下

现在我们说说具体的使用方法步骤：

首先加载那个js进来，在头部那里加载，然后给你的文本框加个οnclick=”laydate()”就行了，如下

然后我想换个样式，在页面中头部或者尾部添加下面的代码，如下

<script>

laydate.skin(‘danlan’);

</script>

Danlan就是样式名称，有哪些样式，看看我们的skins文件夹就知道了，如下

更多方法如下

一、核心方法：laydate(options);

options是一个对象，它包含了以下key: ‘默认值’

elem: ‘#id’, //需显示日期的元素选择器

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结构改变时。无参

把点击的日期发送给后台，使用choose属性，定义回调方法，如下

开始日：<li class=”laydate-icon” id=”start” style=”width:200px; margin-right:10px;”></li>

结束日：<li class=”laydate-icon” id=”end” style=”width:200px;”></li>

<script>

var start = {

elem: ‘#start’,

format: ‘YYYY/MM/DD hh:mm:ss’,

min: laydate.now(), //设定最小日期为当前日期

max: ‘2099-06-16 23:59:59’, //最大日期

istime: true,

istoday: false,

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,

choose: function(datas){

start.max = datas; //结束日选好后，重置开始日的最大日期

}

};

laydate(start);

laydate(end);

</script>

完。

LAYDATE日历插件使用相关推荐

我是如何使用laydate日历插件更换掉老项目不好用的日历插件datepicker的
背景:最近整改了一个老项目系统,里面采用的是java+bootstrap+jsp写的,里面的日历插件datepicker特别不好用,容易点击失灵,我决定把它给替换了. layDate 官网:https ...
fullcalendar v5.3.2 日历插件+LayerUi弹窗，实现自定义HTML表格
fullcalendar官网:https://fullcalendar.io/ 插件下载地址(v5.3.2版本):https://github.com/fullcalendar/fullcalenda ...
超好用的js 日历插件日期插件日期日历选择控件
前情提要: 主要是目前项目较小,仅需要一个日历插件,就没有选择引用UI框架,单纯找了一个日历插件,外观相对简单大方,还不错,而且只需要2步就可以完成引入: 第一步(有2种方式引入,支持单独引入文件及n ...
年季度月周日控件html,基于bootstrap按年、季度、年月、年月日的日历插件(原创)...
插件描述:基于bootstrap按年.季度.年月.年月日的日历插件,作为bootstrapdatetimepicker的扩展更新时间:2020-07-02 22:02:19 更新说明:修改yk-da ...
仿iphone日历插件(beta)
前言小伙伴们好,很久不见了.最近工作进入正常期了,所以慢慢的悠闲的时间久没有了,所以不能每天水一篇了. 最近也在听师傅(http://home.cnblogs.com/u/aaronjs/)的教导开 ...
jquery日历插件途牛_jquery日历插件SimpleCalendar
插件描述:多功能日历插件SimpleCalendar,带农历.节假日. 更新时间:2019-07-30 16:36:32 更新说明:修复显示undefined Simple-Calendar作用方法 ...
记录-JQuery日历插件My97DatePicker日期范围限制
对于日期控件,有时会有不能选择今天以前的日期这种需求..... My97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制. 常规的调用比较简单,如下所示: 1 & ...
一款简洁大气的jquery日期日历插件
本jquery插件名为manhuaDate,暂时只支持jquery 1.9.0以下版本,比如jquery-1.8.3.min.js 查看效果网址: http://keleyi.com/a/bjad/e ...
jQuery插件实战之fullcalendar（日历插件）Demo
jQuery的插件许多,应用的场景也很丰富,今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar,眼下最新版本号是1.5.1,使用这款插件可以高速帮助你高速编程实现基于web ...

LAYDATE日历插件使用

LAYDATE日历插件使用相关推荐

最新文章

热门文章