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

    目录

    一：基本用法

    API

    渲染

    属性

    弹出提示 2.8+

    获取实例 2.8+

    解除实例绑定 2.8+

    关闭日期面板 2.7+

    获取某月的最后一天

    二：常规用法

    三：多类型选择器

     四：范围选择

    五：直接静态显示

    六：更多功能示例

    一：基本用法

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

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

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

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

    其中，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="{}" 属性中。
    1. <input type="text" id="ID-test-laydate">
    2. <input type="text" class="class-test-laydate" lay-options="{value: '2016-10-14'}">
    3. <input type="text" class="class-test-laydate" lay-options="{value: '2017-08-21'}">
    4.  
    5. <script>
    6. layui.use(function(){
    7.   var laydate = layui.laydate;
    8.   // 单个渲染
    9.   laydate.render({
    10.     elem: '#ID-test-laydate'
    11.   });
    12.   // 批量渲染
    13.   laydate.render({
    14.     elem: '.class-test-laydate'
    15.   });
    16. });
    17. 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。 其格式符规则如下：
     
    
    格式符描述
    yyyy年份，输出四个字符。若不足四位，则前置补零
    y年份，允许一位
    MM月份，输出两个字符。若不足两位，则前置补零
    M月份，允许一位
    dd日期，输出两个字符。若不足两位，则前置补零
    d日期，允许一位
    HH小时，输出两个字符。若不足两位，则前面补零
    H小时，允许一位
    mm分钟，输出两个字符。若不足两位，则前面补零
    m分钟，允许一位
    ss秒数，输出两个字符。若不足两位，则前面补零
    s秒数，允许一位
    通过上述格式符组成日期时间字符串，如下所示：
     
     
    
    1. // 返回值示例： 2008-08-08 20:08:08
    2. format: 'yyyy-MM-dd HH:mm:ss'
    4. // 返回值示例： 北京时间 6 点 30 分
    5. format: '北京时间 H 点 m 分'
    相关用法可参考： #示例
     
     
    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提示层自动消失所需的毫秒数number3000
     

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

    1. var laydate = layui.laydate;
    2. // 渲染
    3. laydate.render({
    4. elem: '', // 绑定元素选择器
    5. id: 'test', // 自定义 id
    6. // 其他属性 …
    7. });
    8. // 弹出提示
    9. laydate.hint('test', {
    10. content: '提示内容'
    11. });
     

    获取实例 2.8+
     

    laydate.getInst(id);
     

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

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

    1. var laydate = layui.laydate;
    2. // 渲染
    3. laydate.render({
    4.   elem: '', // 绑定元素选择器
    5.   id: 'test', // 自定义 id 
    6.   // 其他属性 …
    7. });
    8. // 获取对应的实例
    9. var inst = laydate.getInst('test');
    10. console.log(inst); // 实例对象
     

    解除实例绑定 2.8+
     

    laydate.unbind(id);
     

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

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

    1. var laydate = layui.laydate;
    2. // 渲染
    3. laydate.render({
    4.   elem: '', // 绑定元素选择器
    5.   id: 'test', // 自定义 id 
    6.   // 其他属性 …
    7. });
    8. // 解除对应的实例绑定
    9. laydate.unbind('test');
     

    关闭日期面板 2.7+
     

    laydate.close(id);
     

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

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

    1. ar laydate = layui.laydate;
    2. // 渲染
    3. laydate.render({
    4.   elem: '', // 绑定元素选择器
    5.   id: 'test', // 自定义 id 
    6.   // 其他属性 …
    7. });
    8. // 关闭对应的日期面板
    9. laydate.cllose('test');
     

    获取某月的最后一天
     

    laydate.getEndDate(month, year);
     

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

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

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

    二：常规用法
     

    1. <div class="layui-form">
    2.   <div class="layui-form-item">
    3.     <div class="layui-inline">
    4.       <label class="layui-form-label">中文版label>
    5.       <div class="layui-input-inline">
    6.         <input type="text" class="layui-input" id="ID-laydate-demo" placeholder="yyyy-MM-dd">
    7.       div>
    8.     div>
    9.     <div class="layui-inline">
    10.       <label class="layui-form-label">国际版label>
    11.       <div class="layui-input-inline">
    12.         <input type="text" class="layui-input" id="ID-laydate-demo-en" placeholder="yyyy-MM-dd">
    13.       div>
    14.     div>
    15.   div>
    16. div>
    17. <script>
    18. layui.use(function(){
    19.   var laydate = layui.laydate;
    20.   // 渲染
    21.   laydate.render({
    22.     elem: '#ID-laydate-demo'
    23.   });
    24.   // 英文版
    25.   laydate.render({
    26.     elem: '#ID-laydate-demo-en',
    27.     lang: 'en'
    28.   });
    29. });
    30. script>
     

     

    三：多类型选择器
     

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

     
     

    1. <div class="layui-form">
    2.   <div class="layui-form-item">
    3.     <div class="layui-inline">
    4.       <label class="layui-form-label">年选择器label>
    5.       <div class="layui-input-inline">
    6.         <input type="text" class="layui-input" id="ID-laydate-type-year" placeholder="yyyy">
    7.       div>
    8.     div>
    9.     <div class="layui-inline">
    10.       <label class="layui-form-label">年月选择器label>
    11.       <div class="layui-input-inline">
    12.         <input type="text" class="layui-input" id="ID-laydate-type-month" placeholder="yyyy-MM">
    13.       div>
    14.     div>
    15.     <div class="layui-inline">
    16.       <label class="layui-form-label">时间选择器label>
    17.       <div class="layui-input-inline">
    18.         <input type="text" class="layui-input" id="ID-laydate-type-time" placeholder="HH:mm:ss">
    19.       div>
    20.     div>
    21.     <div class="layui-inline">
    22.       <label class="layui-form-label">日期时间选择器label>
    23.       <div class="layui-input-inline">
    24.         <input type="text" class="layui-input" id="ID-laydate-type-datetime" placeholder="yyyy-MM-dd HH:mm:ss">
    25.       div>
    26.     div>
    27.   div>
    28.   <hr>
    29.   <h5 style="margin-bottom: 16px;">
    30.     同时显示日期和时间选择器（全面板） <sup>2.8+sup> :
    31.   h5>
    32.   <div class="layui-form-item">
    33.     <div class="layui-inline">
    34.       <label class="layui-form-label">日期时间选择器label>
    35.       <div class="layui-input-inline">
    36.         <input type="text" class="layui-input" id="ID-laydate-type-datetime-1" placeholder="yyyy-MM-dd HH:mm:ss">
    37.       div>
    38.     div>
    39.   div>
    40. div>
    41. <script>
    42. layui.use(function(){
    43.   var laydate = layui.laydate;
    44.   // 年选择器
    45.   laydate.render({
    46.     elem: '#ID-laydate-type-year',
    47.     type: 'year'
    48.   });
    49.   
    50.   // 年月选择器
    51.   laydate.render({
    52.     elem: '#ID-laydate-type-month',
    53.     type: 'month'
    54.   });
    55.   
    56.   // 时间选择器
    57.   laydate.render({
    58.     elem: '#ID-laydate-type-time',
    59.     type: 'time'
    60.   });
    61.   
    62.   // 日期时间选择器
    63.   laydate.render({
    64.     elem: '#ID-laydate-type-datetime',
    65.     type: 'datetime'
    66.   });
    67.   // 日期时间选择器 - 日期和时间选择器同时显示（全面板）
    68.   laydate.render({
    69.     elem: '#ID-laydate-type-datetime-1',
    70.     type: 'datetime',
    71.     fullPanel: true // 2.8+
    72.   });
    73. });
    74. script>
     

     四：范围选择
     

    1. <div class="layui-form">
    2.   <h5 style="margin-bottom: 16px;">
    3.     左右面板<strong class="layui-font-red">独立strong>选择模式（默认） :
    4.   h5>
    5.   <div class="layui-form-item">
    6.     <div class="layui-inline">
    7.       <label class="layui-form-label">日期范围label>
    8.       <div class="layui-inline" id="ID-laydate-range">
    9.         <div class="layui-input-inline">
    10.           <input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input" placeholder="开始日期">
    11.         div>
    12.         <div class="layui-form-mid">-div>
    13.         <div class="layui-input-inline">
    14.           <input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input" placeholder="结束日期">
    15.         div>
    16.       div>
    17.     div>
    18.   div>
    19.   <h5 style="margin-bottom: 16px;">
    20.     左右面板<strong class="layui-font-red">联动strong>选择模式 <sup>2.8+sup> :
    21.   h5>
    22.   <div class="layui-form-item">
    23.     <div class="layui-inline">
    24.       <label class="layui-form-label">日期范围label>
    25.       <div class="layui-inline" id="ID-laydate-rangeLinked">
    26.         <div class="layui-input-inline">
    27.           <input type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input" placeholder="开始日期">
    28.         div>
    29.         <div class="layui-form-mid">-div>
    30.         <div class="layui-input-inline">
    31.           <input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input" placeholder="结束日期">
    32.         div>
    33.       div>
    34.     div>
    35.   div>
    36.   <h5 style="margin-bottom: 16px;">其他类型的范围选择 :h5>
    37.   <div class="layui-form-item">
    38.     <div class="layui-inline">
    39.       <label class="layui-form-label">年范围label>
    40.       <div class="layui-input-inline">
    41.         <input type="text" class="layui-input" id="ID-laydate-range-year" placeholder=" - ">
    42.       div>
    43.     div>
    44.     <div class="layui-inline">
    45.       <label class="layui-form-label">年月范围label>
    46.       <div class="layui-input-inline">
    47.         <input type="text" class="layui-input" id="ID-laydate-range-month" placeholder=" - ">
    48.       div>
    49.     div>
    50.     <div class="layui-inline">
    51.       <label class="layui-form-label">时间范围label>
    52.       <div class="layui-input-inline">
    53.         <input type="text" class="layui-input" id="ID-laydate-range-time" placeholder=" - ">
    54.       div>
    55.     div>
    56.     <div class="layui-inline">
    57.       <label class="layui-form-label">日期时间范围label>
    58.       <div class="layui-input-inline">
    59.         <input type="text" class="layui-input" id="ID-laydate-range-datetime" placeholder=" - ">
    60.       div>
    61.     div>
    62.   div>
    63. div>
    64. <script>
    65. layui.use(function(){
    66.   var laydate = layui.laydate;
    67.   // 日期范围 - 左右面板独立选择模式
    68.   laydate.render({
    69.     elem: '#ID-laydate-range',
    70.     range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
    71.   });
    72.   // 日期范围 - 左右面板联动选择模式
    73.   laydate.render({
    74.     elem: '#ID-laydate-rangeLinked',
    75.     range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
    76.     rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
    77.   });
    78.   
    79.   // 年范围
    80.   laydate.render({
    81.     elem: '#ID-laydate-range-year',
    82.     type: 'year',
    83.     range: true
    84.   });
    85.   
    86.   // 年月范围
    87.   laydate.render({
    88.     elem: '#ID-laydate-range-month',
    89.     type: 'month',
    90.     range: true
    91.   });
    92.   
    93.   // 时间范围
    94.   laydate.render({
    95.     elem: '#ID-laydate-range-time',
    96.     type: 'time',
    97.     range: true
    98.   });
    99.   
    100.   // 日期时间范围
    101.   laydate.render({
    102.     elem: '#ID-laydate-range-datetime',
    103.     type: 'datetime',
    104.     range: true
    105.   });
    106. });
    107. script>
     

     

    五：直接静态显示
     

    1. <div class="ws-demo-static">
    2.   <div class="layui-inline" id="ID-laydate-static-1">div>
    3.   <div class="layui-inline" id="ID-laydate-static-2">div>
    4.   <div class="layui-inline" id="ID-laydate-static-3">div>
    5.   <div class="layui-inline" id="ID-laydate-static-4">div>
    6. div>
    7. <script>
    8. layui.use(function(){
    9.   var laydate = layui.laydate;
    10.   // 直接嵌套显示
    11.   laydate.render({
    12.     elem: '#ID-laydate-static-1',
    13.     position: 'static'
    14.   });
    15.   laydate.render({
    16.     elem: '#ID-laydate-static-2',
    17.     position: 'static',
    18.     lang: 'en'
    19.   });
    20.   laydate.render({
    21.     elem: '#ID-laydate-static-3',
    22.     type: 'month',
    23.     position: 'static'
    24.   });
    25.   laydate.render({
    26.     elem: '#ID-laydate-static-4',
    27.     type: 'time',
    28.     position: 'static'
    29.   });
    30. });
    31. script>
     

     

    六：更多功能示例
     

     
     

    1. <div class="layui-form">
    2.   <div class="layui-form-item">
    3.     <div class="layui-inline">
    4.       <label class="layui-form-label">初始赋值label>
    5.       <div class="layui-input-inline">
    6.         <input type="text" class="layui-input" id="ID-laydate-more-value" placeholder="yyyy-MM-dd">
    7.       div>
    8.     div>
    9.     <div class="layui-inline">
    10.       <label class="layui-form-label">选中后的回调label>
    11.       <div class="layui-input-inline">
    12.         <input type="text" class="layui-input" id="ID-laydate-more-done" placeholder="yyyy-MM-dd">
    13.       div>
    14.     div>
    15.     <div class="layui-inline">
    16.       <label class="layui-form-label">日期切换的回调label>
    17.       <div class="layui-input-inline">
    18.         <input type="text" class="layui-input" id="ID-laydate-more-change" placeholder="yyyy-MM-dd">
    19.       div>
    20.     div>
    21.     <div class="layui-inline">
    22.       <label class="layui-form-label">不出现底部栏label>
    23.       <div class="layui-input-inline">
    24.         <input type="text" class="layui-input" id="ID-laydate-more-bottom" placeholder="yyyy-MM-dd">
    25.       div>
    26.     div>
    27.     <div class="layui-inline">
    28.       <label class="layui-form-label">只出现确定按钮label>
    29.       <div class="layui-input-inline">
    30.         <input type="text" class="layui-input" id="ID-laydate-more-btns" placeholder="yyyy-MM-dd">
    31.       div>
    32.     div>
    33.     <div class="layui-inline">
    34.       <label class="layui-form-label">自定义事件label>
    35.       <div class="layui-input-inline">
    36.         <input type="text" class="layui-input" id="ID-laydate-more-trigger" placeholder="yyyy-MM-dd">
    37.       div>
    38.     div>
    39.     <div class="layui-inline">
    40.       <label class="layui-form-label" id="ID-laydate-more-event-1">点我触发label>
    41.       <div class="layui-input-inline">
    42.         <input type="text" class="layui-input" id="ID-laydate-more-event" placeholder="yyyy-MM-dd">
    43.       div>
    44.     div>
    45.     <div class="layui-inline">
    46.       <label class="layui-form-label" id="ID-laydate-more-dblclick">双击我触发label>
    47.       <div class="layui-input-inline">
    48.         <input type="text" class="layui-input" id="ID-laydate-more-dblclick-input" placeholder="yyyy-MM-dd">
    49.       div>
    50.     div>
    51.     <div class="layui-inline">
    52.       <label class="layui-form-label">日期只读label>
    53.       <div class="layui-input-inline">
    54.         <input type="text" class="layui-input" id="ID-laydate-more-readonly" readonly placeholder="yyyy-MM-dd">
    55.       div>
    56.     div>
    57.     <div class="layui-inline">
    58.       <label class="layui-form-label">非 input 元素label>
    59.       <div class="layui-input-inline">
    60.         <div id="ID-laydate-more-div" style="height: 38px; line-height: 38px; cursor: pointer; border-bottom: 1px solid #e2e2e2;">div>
    61.       div>
    62.     div>
    63.     <div class="layui-inline">
    64.       <label class="layui-form-label">开启遮罩label>
    65.       <div class="layui-input-inline">
    66.         <input type="text" class="layui-input" id="ID-laydate-more-shade" readonly placeholder="yyyy-MM-dd">
    67.       div>
    68.       <div class="layui-form-mid layui-text-em">
    69.         <sup>2.8+sup>
    70.       div>
    71.     div>
    72.   div>
    73. div>
    74. <h5 style="margin-bottom: 15px; font-weight: 700;">
    75.   覆盖实例与解除实例 <sup>2.8+sup> : 
    76. h5>
    77. <div class="layui-form">
    78.   <div class="layui-form-item">
    79.     <div class="layui-inline">
    80.       <div class="layui-form-label" style="padding: 0; text-align: left;">
    81.         <select lay-filter="filter-demo-laydate-reset">
    82.           <option value="year">年份option>
    83.           <option value="month">月份option>
    84.           <option value="date" selected>日期option>
    85.           <option value="time">时间option>
    86.           <option value="other">解除option>
    87.         select>
    88.       div>
    89.       <div class="layui-input-inline">
    90.         <input type="text" class="layui-input" id="ID-laydate-more-reset" autocomplete="off">
    91.       div>
    92.     div>
    93.   div>
    94. div>
    95. <script>
    96. layui.use(function(){
    97.   var laydate = layui.laydate;
    98.   var form = layui.form;
    99.   // 初始赋值
    100.   laydate.render({
    101.     elem: '#ID-laydate-more-value',
    102.     value: '2016-10-14',
    103.     isInitValue: true
    104.   });
    105.   
    106.   // 选中后的回调
    107.   laydate.render({
    108.     elem: '#ID-laydate-more-done',
    109.     done: function(value, date){
    110.       layer.alert('你选择的日期是：' + value + '
      获得的对象是'       + JSON.stringify(date));
    111.     }
    112.   });
    113.   
    114.   // 日期切换的回调
    115.   laydate.render({
    116.     elem: '#ID-laydate-more-change',
    117.     change: function(value, date){
    118.       layer.msg('你选择的日期是：' + value + '

      获得的对象是'       + JSON.stringify(date));
    119.     }
    120.   });
    121.   // 不出现底部栏
    122.   laydate.render({
    123.     elem: '#ID-laydate-more-bottom',
    124.     showBottom: false
    125.   });
    126.   
    127.   // 只出现确定按钮
    128.   laydate.render({
    129.     elem: '#ID-laydate-more-btns',
    130.     btns: ['confirm']
    131.   });
    132.   
    133.   // 自定义事件
    134.   laydate.render({
    135.     elem: '#ID-laydate-more-trigger',
    136.     trigger: 'mousedown'
    137.   });
    138.   
    139.   // 点我触发
    140.   laydate.render({
    141.     elem: '#ID-laydate-more-event',
    142.     eventElem: '#ID-laydate-more-event-1',
    143.     trigger: 'click'
    144.   });
    145.   
    146.   // 双击我触发
    147.   lay('#ID-laydate-more-dblclick').on('dblclick', function(){
    148.     laydate.render({
    149.       elem: '#ID-laydate-more-dblclick-input',
    150.       show: true,
    151.       closeStop: '#ID-laydate-more-dblclick',
    152.     });
    153.   });
    154.   
    155.   // 日期只读
    156.   laydate.render({
    157.     elem: '#ID-laydate-more-readonly',
    158.     trigger: 'click',
    159.   });
    160.   
    161.   // 非 input 元素
    162.   laydate.render({
    163.     elem: '#ID-laydate-more-div'
    164.   });
    165.   // 开启遮罩
    166.   laydate.render({
    167.     elem: '#ID-laydate-more-shade',
    168.     triggdestroyer: 'click',
    169.     shade: 0.8 // 遮罩透明度 --- 2.8+
    170.   });
    171.   // 覆盖实例与销毁实例
    172.   var inst = laydate.render({
    173.     elem: '#ID-laydate-more-reset'
    174.   });
    175.   form.on("select(filter-demo-laydate-reset)", function (obj) {
    176.     var value = obj.value;
    177.     var options = inst.config;
    178.     var elem = options.elem[0];
    179.     if (value === "other") {
    180.       laydate.unbind(options.id); // 解绑实例 --- 2.8+
    181.       elem.focus();
    182.     } else {
    183.       // 覆盖渲染
    184.       laydate.render({
    185.         elem: elem,
    186.         type: value,
    187.         show: true // 渲染即显示
    188.       });
    189.     }
    190.   });
    191. });
    192. script>
     

    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
GaussDB向量数据库为盘古大模型再添助力                            
    
abc 329 e ( dfs                            
    
1年管理，涨薪70%，只因做好了这件常被忽略的事                            
    
今日多写一行注释，明日维护少掉一根头发                            
    
领域驱动设计——MDD                            
    
鲁大师10月新机性能/流畅/久用榜：骁龙8 Gen3一鸣惊人，双十一“6系”处理器成井喷状态                            
    
Kleopatra与MinGW64中gpg冲突                            
    
UGUI不规则响应区域（例如多个按钮重叠，避免点击错误）                            
    
ThinkPHP+基于ThinkPHP的图书馆管理系统 毕业设计-附源码311833                            
    
k8s核心概念Controller 基本操作和命令                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/qq_61313896/article/details/132965672
                
    •