Layui快速入门之第十三节日期与时间选择器

最新推荐文章于 2024-06-29 11:37:12 发布

渊婉

最新推荐文章于 2024-06-29 11:37:12 发布

阅读量3.1k

点赞数 1

分类专栏： Layui 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/qq_61313896/article/details/132965672

版权

本文档介绍了Layui前端框架中日期选择器的使用，包括基本用法、API、属性设置、弹出提示、获取实例、解除绑定、关闭面板等功能，并通过实例展示了常规用法、多类型选择器、范围选择、静态显示等应用场景。

摘要由CSDN通过智能技术生成

一：基本用法

Layui 是一个基于 jQuery 的前端UI框架，它提供了众多的组件和工具，其中包括日期选择器组件。在 Layui 中使用日期选择器组件非常简单，只需要引入 Layui 的CSS和JS文件，然后在HTML代码中添加一个元素，如：

<input type="text" class="layui-input" id="test-date" placeholder="请选择日期">

接下来在JavaScript代码中初始化日期选择器组件，并设置相应的参数，如：

layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#test-date' //指定元素
  });
});

其中，laydate.render方法用于初始化日期选择器，elem参数指定要绑定日期选择器的元素

API

API	描述
var laydate = layui.laydate	获得 `laydate` 模块。
laydate.render(options)	laydate 组件渲染，核心方法。
laydate.hint(id, opts) 2.8+	在对应的 laydate 组件面板上弹出提示层。
laydate.getInst(id) 2.8+	获取组件对应的渲染实例。
laydate.unbind(id) 2.8+	对目标元素解除当前实例的绑定。
laydate.close(id) 2.7+	关闭日期面板。
laydate.getEndDate(month, year)	获取某月的最后一天

渲染

laydate.render(options);

参数 options : 基础属性配置项。
注 2.8+ : 除 elem 属性外，其他基础属性也可以直接写在元素的 lay-options="{}" 属性中。

<input type="text" id="ID-test-laydate">
<input type="text" class="class-test-laydate" lay-options="{value: '2016-10-14'}">
<input type="text" class="class-test-laydate" lay-options="{value: '2017-08-21'}">
 
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 单个渲染
  laydate.render({
    elem: '#ID-test-laydate'
  });
  // 批量渲染
  laydate.render({
    elem: '.class-test-laydate'
  });
});
</script>

属性

属性名描述类型默认值

elem

绑定元素选择器或 DOM 对象

string/DOM

type

组件面板选择类型。支持以下可选值：

year 年选择器，只提供年列表选择
month 年月选择器，只提供年、月选择
date 日期选择器（默认），可选择：年、月、日选择
time 时间选择器，只提供时、分、秒选择
datetime 日期时间选择器，可选择：年月日、时分秒

效果详见： #示例

string

date

range

开启左右面板的范围选择，将会根据 type 类型呈现对应的范围选择面板。该属性值支持以下类型：

若为 boolean 类型，即表示是否开启范围选择，若设为 true，则开始日期与结束日期默认采用 - 连接符
若为 string 类型，则表示开启范围选择，且自定义开始日期与结束日期的连接符。如： range: '~'
若为 boolean 类型，即表示开启范围选，且开始日期和结束日期分别赋值在两个目标选择器中，如：

range: ['#start', '#end']

详细用法可参考： #示例

boolean
string
array

false

rangeLinked 2.8+

是否开启日期范围选择时的区间联动标注模式，该必须开启 range 属性后生效。日期范围默认采用的是左右面板独立选择模式，设置该属性后，将采用左右面板联动选择模式。
效果详见： #示例

boolean

false

fullPanel 2.8+

是否开启全面板，即日期和时间显示在同一面板。当 type: 'datetime' 且未设置 range 属性时生效。
效果详见： #示例

boolean

false

format

自定义日期和时间值的返回格式,默认值： yyyy-MM-dd。其格式符规则如下：

格式符	描述
yyyy	年份，输出四个字符。若不足四位，则前置补零
y	年份，允许一位
MM	月份，输出两个字符。若不足两位，则前置补零
M	月份，允许一位
dd	日期，输出两个字符。若不足两位，则前置补零
d	日期，允许一位
HH	小时，输出两个字符。若不足两位，则前面补零
H	小时，允许一位
mm	分钟，输出两个字符。若不足两位，则前面补零
m	分钟，允许一位
ss	秒数，输出两个字符。若不足两位，则前面补零
s	秒数，允许一位