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

news2024/11/16 7:51:00

目录

一：基本用法

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代码中初始化日期选择器组件，并设置相应的参数，如：

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 类型，即表示开启范围选，且开始日期和结束日期分别赋值在两个目标选择器中，如：
 
    
  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
 

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

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>
 

 

三：多类型选择器
 

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

 
 

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

 

五：直接静态显示
 

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

 

六：更多功能示例
 

 
 

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


                

        

        

            

            

            

              

                本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1019085.html
              

              如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！
            

            
            

              
            

          


            
相关文章

          
            
                  

                    

                      

                        

                          
                            Vue入门--vue的生命周期
                        

                      

                      

                        

                          Vue入门--vue的生命周期
                        

                        

                          一.什么是Vue 
二.Vue的简介 
官方网址 
特点 三. 前后端的分离 
重大问题 
优势 
4.Vue入门 
定义一个管理边界 
​编辑 测试结果 
vue的优势 
​编辑 测试结果 
5.Vue的生命周期 
vue的生命周期图 
​编辑建立一个html 测试结果 一.什么是Vue Vue是一种流行的JavaScript前端框…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            华为云云耀云服务器L实例评测｜使用宝塔10分钟部署一个围猫猫小游戏
                        

                      

                      

                        

                          华为云云耀云服务器L实例评测｜使用宝塔10分钟部署一个围猫猫小游戏
                        

                        

                          目录 前言一、选择华为云云耀云服务器L实例的原因二、华为云云耀云服务器的优势三、快速部署一个小游戏&#xff08;1&#xff09;终端部署1、使用Termius工具连接终端2、安装Nginx3、上传打包文件 &#xff08;2&#xff09;宝塔可视化面板部署1、进入宝塔2、宝塔菜单3、上传代…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            【实训项目】你好，教练-校园私教平台的设计与开发
                        

                      

                      

                        

                          【实训项目】你好，教练-校园私教平台的设计与开发
                        

                        

                          1.设计摘要 
随着社会的进步&#xff0c;人们的健康意识逐渐提高&#xff0c;越来越多的人选择在闲暇时间健身&#xff0c;在大学生群体中&#xff0c;这一现象犹为明显。在大学城内&#xff0c;有多家健身房供同学选择&#xff0c;也有许多同学选择在操场或者宿舍内自己健身&a…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            使用Seata实现分布式事务
                        

                      

                      

                        

                          使用Seata实现分布式事务
                        

                        

                          Seata 一&#xff1a;故事背景二&#xff1a;使用方法2.1 下载安装Seata2.4 修改对应配置文件。2.4.1 配置中心2.4.1 注册中心2.4.2 日志保存模式 2.3 启动Seata2.4 项目中集成2.5 数据库内新建undo_log 表进行日志记录2.6 编写代码测试Seata提供的分布式事务功能 三&#xff1…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            带你熟练使用list
                        

                      

                      

                        

                          带你熟练使用list
                        

                        

                          &#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;强烈推荐优质专栏: &#x1f354;&#x1f35f;&#x1f32f;C的世界(持续更新中) &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            EdgeX Foundry MQTT设备服务
                        

                      

                      

                        

                          EdgeX Foundry MQTT设备服务
                        

                        

                          一、部署edgex 1.运行命令行&#xff0c;进入放置docker-compose-fuji-no-secty.yml文件的路径下 下载到本地的docker-compose文件 执行&#xff1a; docker-compose -f docker-compose-fuji-no-secty.yml pull 拉取相关镜像&#xff0c;这里默认将文件中没有注释的服务镜像全部…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            企业注册版 ：ag-Grid Enterprise 30.1.0
                        

                      

                      

                        

                          企业注册版 ：ag-Grid Enterprise 30.1.0
                        

                        

                          Ag-Grid 被描述为一种商业产品&#xff0c;已根据 EULA 进行分发&#xff0c;并受到我们提供的技术团队的鼓励。它非常高级&#xff0c;具有与行分组一样的性能以及范围选择、主数据和案例、行的服务器端模型等等。Ag-Grid Enterprise 通常附带集成图表&#xff0c;允许用户和开…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            无涯教程-JavaScript - IFS函数
                        

                      

                      

                        

                          无涯教程-JavaScript - IFS函数
                        

                        

                          描述 
IFS函数检查是否满足一个或多个条件,并返回与第一个TRUE条件相对应的值。此功能已在Excel 2016中添加。 
语法 
IFS (logical_test1, value_if_true1, [logical_test2, value_if_true2], [logical_test3, value_if_true3]…) 争论 
Argument描述Required/Optionallogical…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            无涯教程-JavaScript - ATAN函数
                        

                      

                      

                        

                          无涯教程-JavaScript - ATAN函数
                        

                        

                          描述 
The ATAN function returns the arctangent, or inverse tangent, of a number. The returned angle is given in radians between -π/2 and π/2. The arctangent is the angle whose tangent is number. 
语法 
ATAN (number)争论 
Argument描述Required/OptionalNumb…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            springboot配置注入增强（二）属性注入的原理
                        

                      

                      

                        

                          springboot配置注入增强（二）属性注入的原理
                        

                        

                          一 原理 
1 配置的存储 
springboot在启动的时候会后构建一个org.springframework.core.env.Environment类型的对象&#xff0c;这个对象就是用于存储配置&#xff0c;如图springboot会在启动的最开始创建一个Environment对象 这个webApplicationType的枚举是在new SpringAppli…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            Learn Prompt-Midjourney 图片生成
                        

                      

                      

                        

                          Learn Prompt-Midjourney 图片生成
                        

                        

                          简介 
随着 ChatGPT 的爆火&#xff0c;越来越多的人开始关注并尝试 AI 相关的应用。而图片生成就是其中一个备受瞩目的领域。目前已经有许多图像生成工具&#xff0c;如 Midjourney&#xff0c;Stable Diffusion&#xff0c;DALL-E&#xff0c;Firefly等。本课程主要是以 Midj…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            Python 变量的类型注解
                        

                      

                      

                        

                          Python 变量的类型注解
                        

                        

                          视频版教程 Python3零基础7天入门实战视频教程 
类型注解 前面有个示例&#xff0c;我们函数参数是字符串类型&#xff0c;但是pycharm工具不知道&#xff0c;所以不会给我们提示s的方法&#xff0c;我们只能人工手写&#xff0c;效率大大降低。 
类型注解&#xff1a; 在代码中…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            心法利器[101] | 从大模型到大模型系统
                        

                      

                      

                        

                          心法利器[101] | 从大模型到大模型系统
                        

                        

                          心法利器 本栏目主要和大家一起讨论近期自己学习的心得和体会&#xff0c;与大家一起成长。具体介绍&#xff1a;仓颉专项&#xff1a;飞机大炮我都会&#xff0c;利器心法我还有。 2022年新一版的文章合集已经发布&#xff0c;累计已经60w字了&#xff0c;获取方式看这里&…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            使用ElementPlus实现内嵌表格和内嵌分页
                        

                      

                      

                        

                          使用ElementPlus实现内嵌表格和内嵌分页
                        

                        

                          前言 
有时遇到这样的需求&#xff0c;就是在表格里面嵌入一个表格&#xff0c;以及要求带有分页&#xff0c;这样在ElementPlus中很好实现。以下使用Vue2语法实现一个简单例子&#xff0c;毕竟Vue3兼容Vue2语法&#xff0c;若想要Vue3版本例子&#xff0c;简单改改就OK了。 
一…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            数据结构——图的应用
                        

                      

                      

                        

                          数据结构——图的应用
                        

                        

                          文章目录 前言一、图的应用1. 最小生成树普里姆&#xff08;Prim&#xff09;算法克鲁斯卡尔&#xff08;Kruskal&#xff09;算法 2. 最短路径Dijkstra算法求单源最短路径 3. 拓扑结构4. 关键路径 总结 前言 
图的应用 1.1 最小生成树 1.2 最短路径 1.3 拓扑结构 1.4 关键路径…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            【网络教程】揭秘Windows SSH服务端免密登录：告别繁琐，享受安全连接
                        

                      

                      

                        

                          【网络教程】揭秘Windows SSH服务端免密登录：告别繁琐，享受安全连接
                        

                        

                          文章目录 开启Windows下的SSH服务端图形界面安装手动下载安装Windows如何查看系统用户名Windows如何查看本机IP开启免密登录Window生成秘钥Linux下生成秘钥配置公钥视频讲解开启Windows下的SSH服务端 这篇文章演示的环境是Windows11Windows的SSH服务端默认情况下是没有安装的，…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            9.项目细节调整
                        

                      

                      

                        

                          9.项目细节调整
                        

                        

                          文章目录 学习资料项目整体细节调整处理首页 学习资料 
https://www.bilibili.com/video/BV13g411Y7GS/?p24&spm_id_frompageDriver&vd_sourceed09a620bf87401694f763818a31c91e 
项目整体细节调整 
处理首页 
默认的首页 肯定不能给人看。文件在这个位置。  可以删除…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            live555 BasicUsageEnvironment目录解读
                        

                      

                      

                        

                          live555 BasicUsageEnvironment目录解读
                        

                        

                          文章目录 BasicUsageEnvironmentBasicHashTable.cppBasicTaskScheduler.cppBasicTaskScheduler0.cppBasicUsageEnvironment.cppBasicUsageEnvironment0.cppDelayQueue.cpp后续会进行更新 BasicUsageEnvironment 
├── BasicHashTable.cpp ├── BasicTaskScheduler0.cpp ├─…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            类加载器 - 双亲委派模型
                        

                      

                      

                        

                          类加载器 - 双亲委派模型
                        

                        

                          文章目录 回顾一下类加载过程类加载器类加载器介绍类加载器加载规则类加载器总结自定义类加载器 双亲委派模型双亲委派模型介绍双亲委派模型的执行流程双亲委派模型的好处打破双亲委派模型方法 本文参考&#xff1a; 
类加载器详解&#xff08;重点&#xff09; | JavaGuide(Ja…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
                  

                    

                      

                        

                          
                            多目标优化算法：基于非支配排序的海象优化算法（NSWOA）MATLAB
                        

                      

                      

                        

                          多目标优化算法：基于非支配排序的海象优化算法（NSWOA）MATLAB
                        

                        

                          一、海象优化算法WOA 
海象优化算法&#xff08;Walrus Optimization Algorithm&#xff0c;WOA&#xff09;由Trojovsk等人于2023年提出&#xff0c;该算法模拟海象的进食&#xff0c;迁移&#xff0c;逃跑和对抗捕食者的过程&#xff0c;WOA包含探索、迁移和开发三个阶段&…
                        

                        

                          阅读更多...
                        

                      

                    

                  

                  
       
      
        

        

          

            



                
                
                

            

          

          

            



              
推荐文章

              
            

          


          

            


                
                
                
            

          

          

            

              
最新文章

              
            

          

          

            

            
            
            
            

          

        

      

    

    

      

        

                    Copyright @ 2022~2023