bootstraplaydate日期组件使用详解_laydate.render参数资源-CSDN文库

107 浏览量 2020-08-31 18:47:05 上传评论收藏 167KB PDF 举报

Bootstrap Laydate日期组件是一个在网页开发中常用的日期选择工具，它的设计简洁、易于使用，并且提供了丰富的功能。这个组件特别适合那些希望在网页中添加日期选择功能，同时又追求高效开发的开发者。Laydate由贤心开发，其API强大，可以满足多种定制需求。我们来看一下Laydate的基本使用。在HTML文件中，我们需要引入laydate.js和相关的CSS样式文件。例如，在`<head>`标签内，我们可以看到如下引入： ```html <script type="text/javascript" src="laydate/laydate.js"></script> <link rel="stylesheet" type="text/css" href="css/page.css" /> ``` 这确保了Laydate的JavaScript库和样式文件能够正确加载。然后，我们可以直接在HTML元素上触发Laydate。在本例中，使用一个`<input>`标签并添加一个`onclick`事件来调用laydate，如： ```html <input placeholder="请输入日期" class="laydate-icon" onclick="laydate()"> ``` 这会在用户点击输入框时弹出日期选择器。 Laydate的核心方法是`laydate(options)`，其中`options`是一个包含各种配置选项的对象。例如，我们可以设置日期格式、是否开启时间选择、最小和最大日期等。下面是一些常见的选项： - `elem`: 指定日期显示元素的选择器。 - `format`: 定义日期的显示格式，如`'YYYY-MM-DD hh:mm:ss'`。 - `istime`: 如果设置为`true`，则开启时间选择功能。 - `isclear`: 设置是否显示清除按钮。 - `istoday`: 是否显示今天按钮。 - `issure`: 是否显示确认按钮。 - `min` 和 `max`: 分别设定可选的最小和最大日期。除了核心方法，Laydate还提供了其他辅助方法，如： - `laydate.v`: 获取Laydate的版本号。 - `laydate.skin(lib)`: 加载指定的皮肤。 - `laydate.now(timestamp, format)`: 提供当前日期和时间的处理，可以返回指定时间戳或日期差值对应的日期。 - `laydate.reset()`: 重新定位日历控件，适用于页面DOM结构改变时。通过这些配置和方法，我们可以实现各种自定义的日期选择功能，以适应不同的项目需求。例如，你可以通过设置`choose`回调函数来处理用户选择日期后的操作。 Bootstrap Laydate是一个功能强大、易于集成的日期组件，它简化了网页中的日期选择功能的实现，提高了开发效率。无论是简单的日期输入还是复杂的日期范围选择，Laydate都能轻松应对。通过深入理解和熟练运用Laydate的API，开发者可以创建出用户体验优秀的网页应用。

资源推荐

资源详情

资源评论

bootstrap laydate日期组件使用详解日期组件使用详解

主要为大家详细介绍了bootstrap laydate日期组件使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

在日常的网页开发过程中，日期组件已经成为不可或缺的组件之一。同时，随着广大杰出攻城狮的不懈努力，也出现了很多优

秀的日期组件，其中我个人觉得 layDate 日期组件是一个非常不错的组件，简洁易用，样式清爽。

此文主要以贤心所作的 layDate 组件进行日期选择的演示，敬请各位小主们参阅，若有不足之处，敬请大神指正，不胜感激！

闲不多言，直接上码。

演示文档的工程目录如下图所示：

laydate-demo.html 对应的源代码为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>laydate 日期插件演示示例</title>

</head>

<body>

<h3>laydate API：</h3>

<pre>

一、核心方法：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结构改变时。无参

</pre>

</div>

<h3>演示一：直接调用 laydate，无参调用</h3>

</div>

<h3>演示二：js外部调用</h3>

</div>

<h3>演示三：图标触发日期</h3>

</div>

<h3>演示四：自定义日期格式</h3>

</div>

<h3>演示五：基于当前日期控制日期范围</h3>

</div>

<h3>演示六：显示日期和时间</h3>

</div>

<h3>演示七：双日期范围显示限制</h3>

有效时间：<input id="time_start" class="laydate-icon"></input> --- <input id="time_end" class="laydate-icon"></input>

</div>

<p>

以上，就是我基于贤心所作日期插件 layDate 进行的日期组件演示。<br>

个人觉得，其是一款非常不错的日期插件，对其皮肤样式，我个人比较倾向选择淡蓝的样式，简洁明快。<br>

以下为相应的参考链接以及 layDate 插件下载的目录（内含所需的皮肤）。

</p>

<a href="http://www.w3school.com.cn/jsref/jsref_obj_date.asp" target="_blank">JavaScript Date 对象</a>

<a href="http://yunpan.cn/ccMrbLZbZgMQC" target="_blank">layDate 插件（提取码：a36a）</a>

</div>

;!function(){

laydate.skin('danlan');

// 演示二：js外部调用

laydate({

elem: '#demo'

})

}();

* 演示四：自定义日期格式

laydate({

elem: '#custom_date_format',

format: 'YYYY-MM', // 分隔符可以任意定义，该例子表示只显示年月

festival: true, // 显示节日

choose: function(datas){ // 选择日期完毕的回调

alert('您选择的日期为：'+datas);

}

});

* 演示五：基于当前日期控制日期范围

laydate({

elem: '#custom_date_scope',

min: laydate.now(-7), // -1代表昨天，-2代表前天，以此类推

max: laydate.now(+7) // +1代表明天，+2代表后天，以此类推

});

剩余6页未读，继续阅读

评论收藏

内容反馈

weixin_38558655

粉丝: 4
资源: 957

bootstrap laydate日期组件使用详解

bootstrap-datetimepicker时间组件

bootstrap的datagrid组件

只显示年份月份的时间控件

layDate多款日期时间控件

laydate时间控件及触发时间校验事件

laydate时间日历插件使用方法详解

laydate日历控件使用方法详解

详解easyui基于 layui.laydate日期扩展组件

BootStrap五星评分插件使用详解

bootstrap 相关web组件库

Bootstrap Blazor Table 组件（四）自定义列生成.doc

Bootstrap按钮组件详解

bootstrap switch开关组件使用方法详解

使用laydate日期输入弹框

日期控件laydate 天蓝色皮肤 需要和laydate js结合使用

使用layui日期控件laydate对开始和结束时间进行联动控制的方法

Bootstrap常用组件封装BootstrapQ.zip

Bootstrap风格的组件源码.zip

bootstrap4日期时间选择器插件

Bootstrap分页组件的设计

Bootstrap3分页组件rPage.zip

layui-laydate时间日历控件使用方法详解

laydate:一款被广泛使用的高级Web日历组件，完全开放无偿且颜值与功能兼备，克服应对日期相关的各种业务场景

Bootstrap输入框组件使用详解

最新资源

日期控件laydate 天蓝色皮肤需要和laydate js结合使用