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

渊婉2023-09-25 16:08

目录

一：基本用法

API

渲染

属性

[弹出提示 2.8+](#弹出提示 2.8+)

[获取实例 2.8+](#获取实例 2.8+)

[解除实例绑定 2.8+](#解除实例绑定 2.8+)

[关闭日期面板 2.7+](#关闭日期面板 2.7+)

获取某月的最后一天

二：常规用法

三：多类型选择器

四：范围选择

五：直接静态显示

六：更多功能示例

一：基本用法

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

html 复制代码 
<input type="text" class="layui-input" id="test-date" placeholder="请选择日期">

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

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="{}" 属性中。
html 复制代码 
<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 类型，即表示开启范围选，且开始日期和结束日期分别赋值在两个目标选择器中，如： 1. 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。 其格式符规则如下： 格式符 描述
value 初始值。值支持以下类型： * 若为 string 类型，则必须和 format 属性的格式对应。 1. value: '2018-08-18' * 若为 date 对象类型，则赋值 new Date() 的实例即可。 1. value: new Date(1534766888000) // 参数即为：2018-08-20 20:08:08 的毫秒数 string date new Date()
isInitValue 是否将初始值填充在目标元素中，一般配合 value 属性使用 boolean false
shortcuts 2.8+ 用于开启面板左侧的快捷选择栏。其值配置规则如下： 1. shortcuts: [ 2. { 3. text: "快捷选项文本", 4. value: '快捷选项值' 5. }, 6. // 更多选项 ... 7. ] 其中 value 支持以下类型： * 若为 string 类型，必须和 format 设置的格式对应； * 若为 date 对象类型，则可通过操作 new Date() 来对选项值进行相应的返回计算； * 若为 array 类型，则数组成员可填写开始日期和结束日期。 详细用法可参考： #示例 string date array -
weekStart 2.7+ 设置起始周。 支持 0-6 的数字，0 即代表从周日开始。 1. weekStart: 1 // 设置周一为起始周 number 0
isPreview 用于是否在面板左下角显示当前结果的预览。当 type:datetime 时强制为 false。 boolean true
min / max 限制可供选择的最小或最大日期时间值。默认值： * min: '1900-1-1' * max: '2099-12-31' 属性值支持以下可选类型： * 若值为字符类型，则：年月日必须用 - 连接，且时分秒必须用 : 连接。 此处无需遵循 format 设定的格式； * 若值为整数类型，且数字 ＜ 86400000，则数字代表天数，如： min: -7 即代表最小日期在 7 天前，正数代表若干天后； * 若值为整数类型，且数字 ≥ 86400000，则数字代表毫秒数，如：max: 4073558400000 即代表最大日期在公元 3000年1月1日。 示例： 1. min: '2017-1-1 00:00:00' // 最小日期时间值 2. min: -7 // 最小日期为 7 天前 3. max: 7 // 最大日期为 7 天后 相关效果可参考： #示例
trigger 自定义弹出组件面板的事件 string click
show 是否在渲染时默认显示组件面板。组件在执行渲染时，默认需通过触发目标元素的事件，方可显示组件面板，而该属性可跳过目标元素的事件，直接显示组件面板。 boolean false
position 设置组件面板的定位方式。支持以下可选值： * absolute 绝对定位，始终吸附在绑定元素周围。 * fixed 固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。 * static 静态定位，控件将直接嵌套显示在指定容器中。用法详见：#示例 string absolute
zIndex 设置组件面板的层叠顺序。一般用于解决与其它元素的互相被遮掩的问题。若 positio: 'tatic' 时，则该属性无效。 number 99999999
shade 2.8+ 用于开启弹出日期面板时的遮罩。值支持以下可选类型： * 若为 number 类型，则表示遮罩透明度。如： 1. shade: 0.5 * 若为 array 类型，则可设置遮罩颜色和透明度，如： 1. shade: [0.5, '#000'] // 遮罩的透明度和背景色 效果详见： #示例 number array -
showBottom 是否显示组件面板的底部栏 boolean true
btns 自定义排版组件面板底部栏中的按钮，按钮将按照数组顺序排列。内置按钮名称：clear,now,confirm 。 1. // 显示清空、确认按钮 2. btns: ['clear', 'confirm'] array -
autoConfirm 2.8+ 是否在选中目标值时即自动确认。 boolean true
lang 设置组件的语言版本。可选值如下： * cn 中文版 * en 英文版 string cn
theme 设置组件面板主题。除了默认主题，还内置主题： molv grid ，且支持直接传入自定义的主题色。 1. theme: '#FF5722' 注 2.8+ : 多个主题可用数组格式，如： 1. theme: ['grid', '#FF5722'] 效果及用法详见： #示例 string array -
calendar 是否显示我国常见的公历节日。当 lang: 'en' 时无效。 boolean true
mark 自定义日期标记。该属性是对 `calendar` 属性的进一步延伸，灵活度更高。属性可批量设置多个日期标记，如： 1. mark: { 2. '0-10-14': '生日', //每年每月的某一天 3. '0-0-10': '工资', // 每月 10 号 4. '2008-8-8': '开幕', // 指定的日期 5. } 前缀 0- 即代表每年，0-0- 即代表每年每月。 效果详见： #示例 object -
holidays 2.7+ 用于标注节假日及补班日。值是一个二维数组，如： 1. holidays: [ 2. // 2023 年的节假日 3. ['2023-1-1','2023-1-2','2023-1-3'], 4. // 2023 年的补班日 5. ['2023-1-28','2023-1-29'] 6. ] 相关日期值可详细参考国家每年公布的法定节假日安排 效果详见： #示例 array -
回调函数
ready 组件面板初始打开的回调函数。返回的参数如下： 1. ready: function(date){ 2. /* 得到初始的日期时间对象，date 参数格式如下： 3. { 4. year: 2017, // 年 5. month: 8, // 月 6. date: 18, // 日 7. hours: 0, // 时 8. minutes: 0, // 分 9. seconds: 0 // 秒 10. } 11. */ 12. console.log(date); 13. }
change 日期时间被切换后的回调函数。返回的参数如下： 1. change: function(value, date, endDate){ 2. console.log(value); // 日期字符，如： 2017-08-18 3. console.log(date); // 包含年月日时分秒各项值的对象 4. console.log(endDate); // 结束日期时间对象，当设置 range 时才会返回。对象成员同上。 5. }
done 日期时间选择完毕的回调函数，点击清空、现在、确定也均会触发。返回的参数如下： 1. done: function(value, date, endDate){ 2. console.log(value); // 日期字符，如： 2017-08-18 3. console.log(date); // 包含年月日时分秒各项值的对象 4. console.log(endDate); // 结束日期时间对象，当设置 range 时才会返回。对象成员同上。 5. }
onConfirm 2.8+ 点击底部栏「确定」按钮时的回调函数。返回的参数同 done。
onNow 2.8+ 点击底部栏「现在」按钮时的回调函数。返回的参数同 done。
onClear 2.8+ 点击底部栏「清空」按钮时的回调函数。返回的参数同 done。
close 2.7+ 组件面板被关闭（移除）后的回调函数。无返回参数。

弹出提示 2.8+

laydate.hint(id, opts);

  • 参数 id : 组件渲染时定义的 id 属性值
  • 参数 opts : 该方法支持的属性可选项，详见下表
opts 描述 类型 默认值
content 提示内容 string -
ms 提示层自动消失所需的毫秒数 number 3000

该方法用于在指定的日期面板弹出一个提示层

javascript 复制代码 
var laydate = layui.laydate;
// 渲染
laydate.render({
elem: '', // 绑定元素选择器
id: 'test', // 自定义 id
// 其他属性 ...
});
// 弹出提示
laydate.hint('test', {
content: '提示内容'
});

获取实例 2.8+

laydate.getInst(id);

  • 参数 id : 组件渲染时定义的 id 属性值

该方法用于在获取 laydate 对应 id 的渲染实例，以获得该实例对应的成员属性

java 复制代码 
var laydate = layui.laydate;
// 渲染
laydate.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 ...
});
// 获取对应的实例
var inst = laydate.getInst('test');
console.log(inst); // 实例对象

解除实例绑定 2.8+

laydate.unbind(id);

  • 参数 id : 组件渲染时定义的 id 属性值

该方法用于对目标元素对应的实例的完全解除，即触发元素事件时，不再执行组件渲染

javascript 复制代码 
var laydate = layui.laydate;
// 渲染
laydate.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 ...
});
// 解除对应的实例绑定
laydate.unbind('test');

关闭日期面板 2.7+

laydate.close(id);

  • 参数 id : 组件渲染时定义的 id 属性值。 若 id 参数不填，则关闭当前打开的日期面板

该方法用于关闭对应的日期面板

javascript 复制代码 
ar laydate = layui.laydate;
// 渲染
laydate.render({
  elem: '', // 绑定元素选择器
  id: 'test', // 自定义 id 
  // 其他属性 ...
});
// 关闭对应的日期面板
laydate.cllose('test');

获取某月的最后一天

laydate.getEndDate(month, year);

  • 参数 month : 月份，默认为当前月。
  • 参数 year : 年份，默认为今年。

该方法用于获取某个月份的最后一天

javascript 复制代码 
var days1 = laydate.getEndDate(10); // 获得 10 月的最后一天为 31 号
var days2 = laydate.getEndDate(2, 2080); // 获得 2080 年 2 月的最后一天为 29 号

二：常规用法

html 复制代码 
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">中文版</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-demo" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">国际版</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-demo-en" placeholder="yyyy-MM-dd">
      </div>
    </div>
  </div>
</div>
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 渲染
  laydate.render({
    elem: '#ID-laydate-demo'
  });
  // 英文版
  laydate.render({
    elem: '#ID-laydate-demo-en',
    lang: 'en'
  });
});
</script>

三：多类型选择器

默认为日期选择器，即上文「常规用法」示例中的效果。以下主要呈现其他类型选择器：

html 复制代码 
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">年选择器</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-type-year" placeholder="yyyy">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">年月选择器</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-type-month" placeholder="yyyy-MM">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">时间选择器</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-type-time" placeholder="HH:mm:ss">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">日期时间选择器</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-type-datetime" placeholder="yyyy-MM-dd HH:mm:ss">
      </div>
    </div>
  </div>
  <hr>
  <h5 style="margin-bottom: 16px;">
    同时显示日期和时间选择器（全面板） <sup>2.8+</sup> :
  </h5>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期时间选择器</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-type-datetime-1" placeholder="yyyy-MM-dd HH:mm:ss">
      </div>
    </div>
  </div>
</div>
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 年选择器
  laydate.render({
    elem: '#ID-laydate-type-year',
    type: 'year'
  });
  
  // 年月选择器
  laydate.render({
    elem: '#ID-laydate-type-month',
    type: 'month'
  });
  
  // 时间选择器
  laydate.render({
    elem: '#ID-laydate-type-time',
    type: 'time'
  });
  
  // 日期时间选择器
  laydate.render({
    elem: '#ID-laydate-type-datetime',
    type: 'datetime'
  });
  // 日期时间选择器 - 日期和时间选择器同时显示（全面板）
  laydate.render({
    elem: '#ID-laydate-type-datetime-1',
    type: 'datetime',
    fullPanel: true // 2.8+
  });
});
</script>

四：范围选择

html 复制代码 
<div class="layui-form">
  <h5 style="margin-bottom: 16px;">
    左右面板<strong class="layui-font-red">独立</strong>选择模式（默认） :
  </h5>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期范围</label>
      <div class="layui-inline" id="ID-laydate-range">
        <div class="layui-input-inline">
          <input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline">
          <input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期">
        </div>
      </div>
    </div>
  </div>
  <h5 style="margin-bottom: 16px;">
    左右面板<strong class="layui-font-red">联动</strong>选择模式 <sup>2.8+</sup> :
  </h5>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期范围</label>
      <div class="layui-inline" id="ID-laydate-rangeLinked">
        <div class="layui-input-inline">
          <input type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input" placeholder="开始日期">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline">
          <input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" placeholder="结束日期">
        </div>
      </div>
    </div>
  </div>
  <h5 style="margin-bottom: 16px;">其他类型的范围选择 :</h5>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">年范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-range-year" placeholder=" - ">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">年月范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-range-month" placeholder=" - ">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">时间范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-range-time" placeholder=" - ">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">日期时间范围</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-range-datetime" placeholder=" - ">
      </div>
    </div>
  </div>
</div>
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 日期范围 - 左右面板独立选择模式
  laydate.render({
    elem: '#ID-laydate-range',
    range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
  });
  // 日期范围 - 左右面板联动选择模式
  laydate.render({
    elem: '#ID-laydate-rangeLinked',
    range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
    rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
  });
  
  // 年范围
  laydate.render({
    elem: '#ID-laydate-range-year',
    type: 'year',
    range: true
  });
  
  // 年月范围
  laydate.render({
    elem: '#ID-laydate-range-month',
    type: 'month',
    range: true
  });
  
  // 时间范围
  laydate.render({
    elem: '#ID-laydate-range-time',
    type: 'time',
    range: true
  });
  
  // 日期时间范围
  laydate.render({
    elem: '#ID-laydate-range-datetime',
    type: 'datetime',
    range: true
  });
});
</script>

五：直接静态显示

html 复制代码 
<div class="ws-demo-static">
  <div class="layui-inline" id="ID-laydate-static-1"></div>
  <div class="layui-inline" id="ID-laydate-static-2"></div>
  <div class="layui-inline" id="ID-laydate-static-3"></div>
  <div class="layui-inline" id="ID-laydate-static-4"></div>
</div>
<script>
layui.use(function(){
  var laydate = layui.laydate;
  // 直接嵌套显示
  laydate.render({
    elem: '#ID-laydate-static-1',
    position: 'static'
  });
  laydate.render({
    elem: '#ID-laydate-static-2',
    position: 'static',
    lang: 'en'
  });
  laydate.render({
    elem: '#ID-laydate-static-3',
    type: 'month',
    position: 'static'
  });
  laydate.render({
    elem: '#ID-laydate-static-4',
    type: 'time',
    position: 'static'
  });
});
</script>

六：更多功能示例

html 复制代码 
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">初始赋值</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-value" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">选中后的回调</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-done" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">日期切换的回调</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-change" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">不出现底部栏</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-bottom" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">只出现确定按钮</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-btns" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">自定义事件</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-trigger" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" id="ID-laydate-more-event-1">点我触发</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-event" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label" id="ID-laydate-more-dblclick">双击我触发</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-dblclick-input" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">日期只读</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-readonly" readonly placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">非 input 元素</label>
      <div class="layui-input-inline">
        <div id="ID-laydate-more-div" style="height: 38px; line-height: 38px; cursor: pointer; border-bottom: 1px solid #e2e2e2;"></div>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">开启遮罩</label>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-shade" readonly placeholder="yyyy-MM-dd">
      </div>
      <div class="layui-form-mid layui-text-em">
        <sup>2.8+</sup>
      </div>
    </div>
  </div>
</div>
<h5 style="margin-bottom: 15px; font-weight: 700;">
  覆盖实例与解除实例 <sup>2.8+</sup> : 
</h5>
<div class="layui-form">
  <div class="layui-form-item">
    <div class="layui-inline">
      <div class="layui-form-label" style="padding: 0; text-align: left;">
        <select lay-filter="filter-demo-laydate-reset">
          <option value="year">年份</option>
          <option value="month">月份</option>
          <option value="date" selected>日期</option>
          <option value="time">时间</option>
          <option value="other">解除</option>
        </select>
      </div>
      <div class="layui-input-inline">
        <input type="text" class="layui-input" id="ID-laydate-more-reset" autocomplete="off">
      </div>
    </div>
  </div>
</div>
<script>
layui.use(function(){
  var laydate = layui.laydate;
  var form = layui.form;
  // 初始赋值
  laydate.render({
    elem: '#ID-laydate-more-value',
    value: '2016-10-14',
    isInitValue: true
  });
  
  // 选中后的回调
  laydate.render({
    elem: '#ID-laydate-more-done',
    done: function(value, date){
      layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
    }
  });
  
  // 日期切换的回调
  laydate.render({
    elem: '#ID-laydate-more-change',
    change: function(value, date){
      layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
    }
  });
  // 不出现底部栏
  laydate.render({
    elem: '#ID-laydate-more-bottom',
    showBottom: false
  });
  
  // 只出现确定按钮
  laydate.render({
    elem: '#ID-laydate-more-btns',
    btns: ['confirm']
  });
  
  // 自定义事件
  laydate.render({
    elem: '#ID-laydate-more-trigger',
    trigger: 'mousedown'
  });
  
  // 点我触发
  laydate.render({
    elem: '#ID-laydate-more-event',
    eventElem: '#ID-laydate-more-event-1',
    trigger: 'click'
  });
  
  // 双击我触发
  lay('#ID-laydate-more-dblclick').on('dblclick', function(){
    laydate.render({
      elem: '#ID-laydate-more-dblclick-input',
      show: true,
      closeStop: '#ID-laydate-more-dblclick',
    });
  });
  
  // 日期只读
  laydate.render({
    elem: '#ID-laydate-more-readonly',
    trigger: 'click',
  });
  
  // 非 input 元素
  laydate.render({
    elem: '#ID-laydate-more-div'
  });
  // 开启遮罩
  laydate.render({
    elem: '#ID-laydate-more-shade',
    triggdestroyer: 'click',
    shade: 0.8 // 遮罩透明度 --- 2.8+
  });
  // 覆盖实例与销毁实例
  var inst = laydate.render({
    elem: '#ID-laydate-more-reset'
  });
  form.on("select(filter-demo-laydate-reset)", function (obj) {
    var value = obj.value;
    var options = inst.config;
    var elem = options.elem[0];
    if (value === "other") {
      laydate.unbind(options.id); // 解绑实例 --- 2.8+
      elem.focus();
    } else {
      // 覆盖渲染
      laydate.render({
        elem: elem,
        type: value,
        show: true // 渲染即显示
      });
    }
  });
});
</script>
相关推荐
miss40 分钟前
AI 改完不敢上线？OpenSpec 规约驱动开发实战
前端·代码规范·前端工程化
AiMan1 小时前
腾讯ima还是不可以导出左侧所有对话，只能单条导出，方法不对吗
前端
去伪存真1 小时前
并发量一高就装死？Agent 全链路“防猝死”手册
前端·agent
Moment1 小时前
AI 编程时代，聊聊我的 Mac mini 双屏桌面
前端·后端
AiMan2 小时前
先确认能不能一次把Microsofat Copilot所有内容打包一个文件导出
前端
总要学点什么2 小时前
第97篇：三维数据加载-城市建筑白模自定义着色器——让一条光带沿高度扫上去，快慢却由帧率说了算
前端·gis·webgl·cesium·着色器·空间分析·白模
上海懒图科技2 小时前
工厂厂区电子地图定位导航：厂区人车精准定位，安全合规双保障
前端·arcgis·vue
西安小哥2 小时前
端侧跑大模型，真正的门槛不在参数量：一次 596 秒到 10 秒的压缩路径复盘
前端·人工智能
陈随易3 小时前
Cloudflare 出钱，Vite 团队挑人，44 个维护者分 30 万美元
前端·后端·程序员
恋猫de小郭3 小时前
Flutter THLC 的 WebView 滚动终于从 70 FPS 提升到 120 FPS
android·前端·flutter
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03历年考研数学一、数学二、数学三真题试卷及答案PDF04几个好用的ip纯净度检测网站05GitHub 镜像站点06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07苹果iPA游戏软件资源下载网站08昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战09蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接10Dify：一站式AI应用开发平台全解析与Windows部署指南