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

爱被打了一巴掌 2024-03-02 08:21 46阅读 0赞

**目录**

一：基本用法

API

渲染

属性

弹出提示 2.8+

获取实例 2.8+

解除实例绑定 2.8+

关闭日期面板 2.7+

获取某月的最后一天

二：常规用法

三：多类型选择器

四：范围选择

五：直接静态显示

六：更多功能示例

--------------------

### 一：基本用法 ###

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

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

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

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

#### API ####

<table> 
 <thead> 
  <tr> 
   <th>API</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>var laydate = layui.laydate</td> 
   <td>获得&nbsp;<code>laydate</code>&nbsp;模块。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/laydate/laydate.html#render" title="laydate.render(options)" rel="nofollow">laydate.render(options)</a></td> 
   <td>laydate 组件渲染，核心方法。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/laydate/laydate.html#hint" title="laydate.hint(id, opts)" rel="nofollow">laydate.hint(id, opts)</a>&nbsp;2.8+</td> 
   <td>在对应的 laydate 组件面板上弹出提示层。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/laydate/laydate.html#getInst" title="laydate.getInst(id)" rel="nofollow">laydate.getInst(id)</a>&nbsp;2.8+</td> 
   <td>获取组件对应的渲染实例。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/laydate/laydate.html#close" title="laydate.unbind(id)" rel="nofollow">laydate.unbind(id)</a>&nbsp;2.8+</td> 
   <td>对目标元素解除当前实例的绑定。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/laydate/laydate.html#close" title="laydate.close(id)" rel="nofollow">laydate.close(id)</a>&nbsp;2.7+</td> 
   <td>关闭日期面板。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layui.org.cn/docs/laydate/laydate.html#getEndDate" title="laydate.getEndDate(month, year)" rel="nofollow">laydate.getEndDate(month, year)</a></td> 
   <td>获取某月的最后一天</td> 
  </tr> 
 </tbody> 
</table>

#### 渲染 ####

`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>

#### 属性 ####

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

#### 弹出提示 2.8+ ####

`laydate.hint(id, opts);`

*  参数 `id` : 组件渲染时定义的 `id` 属性值
 *  参数 `opts` : 该方法支持的属性可选项，详见下表

<table> 
 <thead> 
  <tr> 
   <th>opts</th> 
   <th>描述</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>content</td> 
   <td>提示内容</td> 
   <td>string</td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>ms</td> 
   <td>提示层自动消失所需的毫秒数</td> 
   <td>number</td> 
   <td>3000</td> 
  </tr> 
 </tbody> 
</table>

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

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

#### 获取实例 2.8+ ####

`laydate.getInst(id);`

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

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

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` 属性值

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

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

#### 关闭日期面板 2.7+ ####

`laydate.close(id);`

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

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

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

#### 获取某月的最后一天 ####

`laydate.getEndDate(month, year);`

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

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

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

### 二：常规用法 ###

<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>

![1710f74393e74765bc0b1ff688435e4b.jpeg][]

### 三：多类型选择器 ###

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

<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>

### 四：范围选择 ###

<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>

![0616b17f013b4fe6b4a3c016958c04cb.jpeg][]

### 五：直接静态显示 ###

<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>

![0f61ff9746b34d43beacb3c994ec30e7.jpeg][]

### 六：更多功能示例 ###

<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>

![ebee035b0ec645b49364c62440777873.jpeg][]

[1710f74393e74765bc0b1ff688435e4b.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/daf6ae5079d5421097de4dfcfbbb84f9.png
[0616b17f013b4fe6b4a3c016958c04cb.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/ab9740ea494b4d2694d72725c88a377c.png
[0f61ff9746b34d43beacb3c994ec30e7.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/c2cc0b97b4474bf787296593d1d5055c.png
[ebee035b0ec645b49364c62440777873.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/3e66fda3ca0a484d80f7735e5aec2562.png