《layui宇宙版教程》:日期和时间组件laydate

2023-05-16

《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:

 

1.19 日期和时间组件laydate

主要以年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器,这五种类型的选择方式为基本核心使用方式,并且均支持范围选择(即双控件)。内置强劲的自定义日期格式解析和合法校正机制,含中文版和国际版,主题简约却又不失灵活多样。由于内部采用的是零依赖的原生JavaScript编写,因此又可作为独立组件使用。

模块加载名称:laydate。

独立版本官方网址:

http://www.layui.com/laydate

1.19.1 使用方式

    laydate有两种使用方式,如图1-xx所示。

 

1.19.1.1 独立使用

当独立使用时,需要到官网:

http://www.layui.com/laydate/

下载laydate,并在项目中进行引用,官网提供了demo.html做为使用案例。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

        <title></title>

       <script src="laydate/laydate.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <!-- 注意:这一层元素并不是必须的 -->

           <input type="text" class="layui-input" id="test1">

       </div>

       <script>

           //执行一个laydate实例

           laydate.render({

              elem: '#test1' //指定元素

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.19.1.2 模块化使用

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

        <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <!-- 注意:这一层元素并不是必须的 -->

           <input type="text" class="layui-input" id="test1">

       </div>

       <script>

           var laydate = layui.laydate;

           //执行一个laydate实例

           laydate.render({

               elem: '#test1' //指定元素

           });

       </script>

 

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.19.2 基础参数选项

通过核心方法:

laydate.render(options);

来设置基础参数。

 

也可以通过方法:

laydate.set(options);

来设置全局基础参数。

1.19.3 elem绑定元素

类型:String/DOM,默认值:无

必填项,用于绑定执行日期渲染的元素,值一般为选择器或DOM对象。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

           <br />

           <input type="text" class="layui-input" id="test2">

       </div>

       <script>

           var laydate = layui.laydate;

           laydate.render({

               elem: '#test1'

           });

           laydate.render({

              elem: document.getElementById('test2')

           });

       </script>

    </body>

</html>

 

1.19.4 type控件选择类型

类型:String,默认值date。

用于单独提供不同的选择器类型,可选值如图1-xx所示。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

           <br />

           <input type="text" class="layui-input" id="test2">

           <br />

           <input type="text" class="layui-input" id="test3">

           <br />

           <input type="text" class="layui-input" id="test4">

           <br />

           <input type="text" class="layui-input" id="test5">

       </div>

 

        <script>

           var laydate = layui.laydate;

 

           //年选择器

           laydate.render({

              elem: '#test1',

              type: 'year'

           });

 

           //年月选择器

           laydate.render({

              elem: '#test2',

              type: 'month'

           });

 

           //日期选择器

           laydate.render({

              elem: '#test3'

              //,type: 'date' //默认,可不填

           });

 

           //时间选择器

           laydate.render({

              elem: '#test4',

              type: 'time'

           });

 

           //日期时间选择器

           laydate.render({

              elem: '#test5',

               type: 'datetime'

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

1.19.5 range开启左右面板范围选择

类型:Boolean/String,默认值false。

如果设置true,将默认采用“-”分割。 也可以直接设置分割字符。五种选择器类型均支持左右面板的范围选择。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

           <br />

           <input type="text" class="layui-input" id="test2">

           <br />

           <input type="text" class="layui-input" id="test3">

           <br />

           <input type="text" class="layui-input" id="test4">

           <br />

           <input type="text" class="layui-input" id="test5">

        </div>

       <script>

           var laydate = layui.laydate;

 

           //年范围选择

           laydate.render({

              elem: '#test1',

              type: 'year',

              range: true // range: '~' 来自定义分割字符

           });

 

           //年月范围选择

           laydate.render({

              elem: '#test2',

              type: 'month',

              range: '~' // range: '~' 来自定义分割字符

           });

 

           //日期范围选择

           laydate.render({

              elem: '#test3',

              range: '~' // range: '~' 来自定义分割字符

           });

 

           //时间范围选择

           laydate.render({

              elem: '#test4',

              type: 'time',

              range: '~' // range: '~' 来自定义分割字符

           });

 

           //日期时间范围选择

           laydate.render({

              elem: '#test5',

              type: 'datetime',

              range: '~' // range: '~' 来自定义分割字符

           });

       </script>

    </body>

</html>

 

1.19.6 format自定义格式

类型:String,默认值yyyy-MM-dd。

通过日期时间各自的格式符和长度来设置一个所需要的日期格式。layDate支持的格式如图1-xx所示。

 

通过上述不同的格式符组合成一段日期时间字符串,可任意排版,如图1-xx所示。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

        <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

       </div>

 

       <script>

           var laydate = layui.laydate;

           //自定义日期格式

           laydate.render({

               elem: '#test1',

              format: 'yyyyMMdd' //可任意组合

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.19.7 value初始值

类型:String,默认值new Date()。

支持传入符合format参数设置的日期格式字符,或者new Date()。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

           <br />

           <input type="text" class="layui-input" id="test2">

       </div>

 

       <script>

           var laydate = layui.laydate;

 

           //传入符合format格式的字符给初始值

           laydate.render({

              elem: '#test1',

               value: '2018-08-18' //必须遵循format参数设置的格式

           });

 

           //传入Date对象给初始值

           laydate.render({

               elem: '#test2',

              value: new Date(1534766888000) //参数即为:2018-08-20 20:08:08 的时间戳

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.19.8 isInitValue初始值填充

类型:Boolean,默认值true。

用于控制是否自动向元素填充初始值(需配合value参数使用)。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

           <br />

           <input type="text" class="layui-input" id="test2">

       </div>

 

       <script>

           var laydate = layui.laydate;

 

           //传入符合format格式的字符给初始值

           laydate.render({

              elem: '#test1',

              value: '2018-08-18', //必须遵循format参数设置的格式

              isInitValue: false

           });

 

           //传入Date对象给初始值

           laydate.render({

              elem: '#test2',

              value: new Date(1534766888000), //参数即为:2018-08-20 20:08:08 的时间戳

              isInitValue: false

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.19.9 min/max最小/最大范围内的日期时间值

类型:string,默认值min: '1900-1-1'、max: '2099-12-31'。

设置有限范围内的日期或时间值,不在范围内的将不可选中。这两个参数的赋值非常灵活,主要有以下几种情况:

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

           <br />

           <input type="text" class="layui-input" id="test2">

           <br />

           <input type="text" class="layui-input" id="test3">

           <br />

           <input type="text" class="layui-input" id="test4">

       </div>

 

       <script>

           var laydate = layui.laydate;

 

           //日期有效范围只限定在:2017

           laydate.render({

              elem: '#test1',

              min: '2017-1-1',

              max: '2017-12-31'

           });

 

           //日期有效范围限定在:过去一周到未来一周

           laydate.render({

              elem: '#test2',

              min: -7, //7天前

              max: 7 //7天后

           });

 

           //日期时间有效范围的设置:

           laydate.render({

              elem: '#test3',

              type: 'datetime',

              min: '2017-8-11 12:30:00',

              max: '2017-8-18 12:30:00'

           });

 

           //时间有效范围设置在: 上午九点半到下午五点半

           laydate.render({

              elem: '#test4',

              type: 'time',

               min: '09:30:00',

              max: '17:30:00'

           });

       </script>

    </body>

</html>

 

毫不保留地说,min和max参数是两个非常强大的存在,合理运用,可帮助用户在日期与时间的选择上带来更为友好的约束与体验。

1.19.10 trigger自定义弹出控件的事件

类型:String,默认值focus。如果绑定的元素非输入框,则默认事件为:click。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input">

           <br />

           <input type="text" class="layui-input" id="test1">

           <br />

           <input type="text" class="layui-input">

           <br />

           <input type="text" class="layui-input" id="test2">

           <br />

           <span id="test3">2008-08-08</span>

       </div>

       <script>

           var laydate = layui.laydate;

           laydate.render({

              elem: '#test1',

           });

           laydate.render({

              elem: '#test2',

              trigger: 'click' //采用click弹出

           });

           laydate.render({

              elem: '#test3',

              trigger: 'click' //采用click弹出

           });

       </script>

    </body>

</html>

 

1.19.11 show默认显示

类型:Boolean,默认值false。

如果设置: true,则控件默认显示在绑定元素的区域。通常用于外部事件调用控件。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

           <input type="text" class="layui-input" id="test2">

           <input type="text" class="layui-input" id="test3">

       </div>

 

       <script>

           var laydate = layui.laydate;

           //默认显示

           laydate.render({

              elem: '#test1',

              show: true //直接显示

           });

 

           //外部事件调用

           lay('#test2').on('click', function(e) { //假设test2是一个按钮

              laydate.render({

                  elem: '#test3',

                  show: true, //直接显示

                  closeStop: '#test2',

                  //这里代表的意思是:点击test2所在元素阻止关闭事件冒泡。

                  //如果不设置,则无法弹出控件

              });

           });

       </script>

    </body>

</html>

1.19.12 position定位方式

类型:String,默认值absolute。

用于设置控件的定位方式,有如图1-xx所示的三种可选值。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

        <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

           <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

           <input type="text" class="layui-input" id="test2">

       </div>

       <br />

       <br />

       <br />

       <div class="layui-inline">

           <div id="test3"></div>

       </div>

       <span id="testView"></span>

       <script>

           var laydate = layui.laydate;

           //abolute绝对定位,始终吸附在绑定元素周围,是默认值。

           laydate.render({

               elem: '#test1',

              position: 'abolute',

              change: function(value, date) { //监听日期被切换

                  $('#testView').html(value);

              }

           });

           //fixed固定定位,初始吸附在绑定元素周围,

           //不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。

           laydate.render({

              elem: '#test2',

               position: 'fixed',

              change: function(value, date) { //监听日期被切换

                  $('#testView').html(value);

              }

           });

           //static嵌套在指定容器中。

           laydate.render({

               elem: '#test3',

               position: 'static',

              change: function(value, date) { //监听日期被切换

                  $('#testView').html(value);

              }

           });

       </script>

    </body>

</html>

 

1.19.13 zIndex层叠顺序

类型:Number,默认值66666666。

一般用于解决与其它元素的互相被遮掩的问题。如果position参数设为static时,该参数无效。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

       </div>

       <div style="width: 1000px;height: 1000px;z-index:66666667;background-color: red;position: absolute;">

       </div>

       <script>

           var laydate = layui.laydate;

           //设置控件的层叠顺序

           laydate.render({

              elem: '#test1',

              zIndex: 66666666

           });

       </script>

    </body>

</html>

 

    被覆盖了。

 

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

        <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

       </div>

       <div style="width: 1000px;height: 1000px;z-index:66666667;background-color: red;position: absolute;">

       </div>

       <script>

           var laydate = layui.laydate;

           //设置控件的层叠顺序

           laydate.render({

              elem: '#test1',

              zIndex: 66666668

           });

       </script>

    </body>

</html>

 

    正确显示日期弹出框。

1.19.14 showBottom是否显示底部栏

类型:Boolean,默认值true。

如果设置false,将不会显示控件的底部栏区域,底部栏区域如图1-xx所示。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

       </div>

 

       <script>

           var laydate = layui.laydate;

           //不显示底部栏

           laydate.render({

              elem: '#test1',

              showBottom: false

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.19.15 btns工具按钮

类型:Array,默认值['clear', 'now', 'confirm']。

右下角显示的按钮,会按照数组顺序排列,内置可识别的值有:clear、now、confirm。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

        <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

       </div>

 

       <script>

           var laydate = layui.laydate;

           //只显示清空和确认

           laydate.render({

              elem: '#test1',

              btns: ['clear', 'confirm']

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.19.16 lang语言

类型:String,默认值cn。

内置了两种语言版本:cn(中文版)、en(国际版,即英文版)。没有开放自定义语言,是为了避免繁琐的配置。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

       </div>

 

        <script>

           var laydate = layui.laydate;

           //国际版

           laydate.render({

              elem: '#test1',

              lang: 'en'

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.19.17 theme主题

类型:String,默认值:default

内置了多种主题,theme的可选值有:default(默认简约)、molv(墨绿背景)、#颜色值(自定义颜色背景)、grid(格子主题)

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

        <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

           <input type="text" class="layui-input" id="test2">

           <input type="text" class="layui-input" id="test3">

       </div>

 

       <script>

           var laydate = layui.laydate;

           //墨绿背景主题

           laydate.render({

              elem: '#test1',

              theme: 'molv'

           });

 

           //自定义背景色主题 - 非常实用

           laydate.render({

              elem: '#test2',

              theme: '#393D49'

           });

 

           //格子主题

           laydate.render({

              elem: '#test3',

              theme: 'grid'

           });

       </script>

    </body>

</html>

 

另外,还可以传入其它字符,比如:

theme: 'xxx'

那么控件将会多出一个class="laydate-theme-xxx"的CSS类,以便单独定制主题。

1.19.18 calendar是否显示公历节日

类型:Boolean,默认值false。

内置了一些我国通用的公历重要节日,通过设置true来开启。国际版不会显示。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

       </div>

 

       <script>

           var laydate = layui.laydate;

           //允许显示公历节日

           laydate.render({

              elem: '#test1',

               calendar: true

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.19.19 mark标注重要日子

类型:Object,默认值无。

可以自定义标注重要日子,比如结婚纪念日,日程等等。它分为以下三种:

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

       </div>

 

       <script>

           var laydate = layui.laydate;

           //标注重要日子

           var ins1 = laydate.render({

              elem: '#test1',

              mark: {

                  '0-03-06': '生日',

                  '0-12-31': '跨年', //每年1231

                  '0-0-10': '工资', //每个月10

                  '2017-8-15': '', //具体日期

                  '2020-8-3': '学习', //如果为空字符,则默认显示数字+徽章

                  '2020-8-21': '完毕'

              },

              done: function(value, date) {

                  if (date.year === 2017 && date.month === 8 && date.date === 15) { //点击2017815日,弹出提示语

                      ins1.hint('中国人民抗日战争胜利72周年');

                  }

              }

           });

       </script>

    </body>

</html>

1.19.20 ready控件初始打开的回调

控件在打开时触发,回调返回一个参数:初始的日期时间对象。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

        <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

       </div>

 

       <script>

           var laydate = layui.laydate;

           laydate.render({

              elem: '#test1',

              ready: function(date) {

                  console.log(date); //得到初始的日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}

              }

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.19.21 done控件选择完毕后的回调

点击”日期”、”清空”、”现在”、”确定”均会触发。回调返回三个参数:生成的值、日期时间对象、结束的日期时间对象

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

        <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

       </div>

       <script>

           var laydate = layui.laydate;

 

           laydate.render({

              elem: '#test1',

              done: function(value, date, endDate) {

                  console.log(value);

                  //得到日期生成的值,如:2017-08-18

                  console.log(date);

                  //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}

                  console.log(endDate);

                  //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。

               }

           });

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

1.19.22 其它方法

    其它方法如图1-xx所示。

 

    测试代码如下:

<!DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title></title>

       <script src="js/jquery3.5.1.js"></script>

       <link rel="stylesheet" href="layui/css/layui.css" />

       <script src="layui/layui.all.js"></script>

    </head>

    <body>

       <div class="layui-inline">

           <input type="text" class="layui-input" id="test1">

       </div>

       <script>

           var laydate = layui.laydate;

           alert(laydate.getEndDate(2, 2020));

       </script>

    </body>

</html>

 

    运行效果如图1-xx所示。

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

《layui宇宙版教程》:日期和时间组件laydate 的相关文章

  • web项目异常A web application registered the JBDC driver [com.mysql.jdbc.Driver] but failed to unregister

    异常 xff1a A web application registered the JBDC driver com mysql jdbc Driver but failed to unregister it when the web app
  • Python(Web服务)全链路日志个跟踪

    1 背景 在我们的实际项目中 xff0c 尤其以Web服务为例 xff0c 经常遇到要做日志跟踪的场景 我们经常采用的方式是 xff0c 生成一个trace id 在全链路的调用中都输出这个id进行跟踪 这里需要处理的几个问题是 xff1a
  • @Controller和@RestController的区别?

    64 Controller和 64 RestController的区别 xff1f 官方文档 xff1a 64 RestController is a stereotype annotation that combines 64 Respo
  • get方式传值中文乱码

    如下情况 xff1a lt a id 61 span class hljs string 34 bookname 34 span title 61 span class hljs string 34 span class hljs vari
  • 记我的2016年实习总结

    实习问题记录及经验总结 工具篇 git 问题描述 xff1a 第一次merge分支到主干develop xff0c 遇到冲突时解决方法不当造成主干代码无法运行 原因 xff1a xff08 1 xff09 自己习惯问题 xff0c 写完代码
  • Maven搭建的SSM项目中遇到的问题

    Maven搭建的SSM项目中遇到的问题 1 EL表达式失效 2 装配异常Unable to configure ssm 解决办法 其实这两个问题的出现都是因为servlet版本和java版本不合适造成的 xff0c EL表达式在servle
  • Java小工具Lombok的安装与使用

    1 Lombok简介 Lombok是一个代码生成器 xff0c 可以通过简单的注解形式来帮助我们简化消除一些必须有但显得很臃肿的Java代码的工具 xff0c 通过使用对应的注解 xff0c 可以在编译源码的时候生成对应的方法 使用 lom
  • 日常记录(1)

    数据库连接池Druid Alibaba github地址 xff1a https github com alibaba druidBlog xff1a http blog csdn net pk490525 article details
  • NOA上车「清一色」自主品牌,哪些供应商正在突围前线

    随着入门级L2进入普及周期 xff0c 以NOA xff08 高速 城区 xff09 为代表的L2 43 L2 43 43 赛道 xff0c 正在成为主机厂 硬件供应商 算法及软件方案商的下一波市场制高点的争夺阵地 高工智能汽车研究院监测数
  • 【STM32-初始化的时候是如何通过结构体给寄存器赋值的?】

    使用的是正点原子的源码 xff0c 一直没有搞明白初始化的时候是怎么给相关的寄存器赋值的 xff0c 今天琢磨了一下 xff1a 首先 xff0c 创建了一个GPIO InitTypeDef类型的结构体变量GPIO InitStructur
  • 多元建模基础(二):正态混合分布

    1 正态方差混合模型 xff1a 1 xff09 定义 xff1a 称 显然 xff0c xff0c 混合分布中 xff0c 由W的分布确定一组权值 xff0c 混合变量W可以被解释为来自新信息并影响所有风险因子波动性的扰动 位置向量和分散
  • 神经RRT*:基于学习的最优路径规划 翻译+总结

    摘要 xff1a 快速随机探索树 xff08 RRT xff09 及其变体由于能够快速有效地探索状态空间而非常流行 然而 xff0c 它们对初始解很敏感 xff0c 收敛到最优解的速度很慢 xff0c 这意味着它们需要消耗大量内存和时间来找
  • 解决 Windows has triggered a breakpoint in Linkage.exe问题

    这两天在做一个小项目 xff0c 里面有多线程的东东 xff0c 在调试的时候 总是遇到 Windows has triggered a breakpoint in Linkage exe 的错误 现在将这个问题和大家分享一下 前提是这样的
  • 写一个简单的爬虫,可直接复制学习!!

    简单爬虫直面代码 xff0c 可直接复制学习 这个代码的作用主要是用来获取到百度首页的数据 xff0c 只用来供理解学习 真 小白 福利 todo 首先导包requests 用于爬取数据 import requests todo 定义你要爬
  • Dataloader类

    Dataset让我们可以知道数据在什么位置 xff0c 及数据的的索引对应的数据 Dataloader相当于加载器 xff0c 把数据加载到神经网络中 import torchvision 测试数据集 xff0c train设置为false
  • 如何把截图固定在电脑页面上

    如果我们给人讲网课课 xff0c 或者汇报的时候想把公式 xff0c 定理 xff0c 图片等放在醒目位置做对比 那么我们可能需要把截图放在别的文件的页面上 xff0c 那么我们要怎么做呢 xff1f 方法一 xff1a 利用QQ截图功能
  • 如何写好一个算法

    写出算法有一个比较通用的方法论 xff0c 步骤如下 xff1a 1 理解问题 先弄清楚具体要解决什么问题 做成怎样的程度就可以满足问题需要 xff1f 是需要精确值还是近似值 xff1f 2 分析问题 用数学思路去描述问题的求解过程 3
  • python如何读取txt里面的数据

    当我们在用python时可能会遇到想要把txt文档里的数据读取出来然后进行绘图 xff0c 那么我们要怎么才能够将txt里的数据读取出来呢 xff1f 假设有txt文本如下 xff1a 想要把上述文本数据读取出来 xff0c 可以用以下方法
  • MATLAB读取数据(txt|excel)并绘图

    最近做了实验 xff0c 要绘图进行比较 xff0c 网上百度搜索搞了很久 xff0c 终于搞定了 写个文章记录一下 废话不多讲 xff0c 咱们步入正题 以下是以txt文档为例进行的绘图 xff0c 如果用excel更加简单 道理都是一样
  • 如何用电脑自带的软件录屏

    有时候想要用电脑录屏 xff0c 但是电脑又没有录屏软件 xff0c 那我们有没有办法进行录屏呢 xff1f 可以借助 游戏 设置进行录屏哦 xff01 本人电脑 xff1a win10系统 1 点击桌面左下角windows图标 xff0c

随机推荐

  • 如何设置电脑锁屏后程序仍在运行

    最近在跑代码的时候 xff0c 回去午睡后过来打开电脑发现程序没跑 发现电脑锁屏后程序不再运行了 xff0c 重新将电脑设置锁屏后仍运行 xff0c 如下 xff1a 1 同时按下win 43 R 打开 运行 界面 2 输入control
  • Latex文献引用显示?解决

    最近在写论文的时候 xff0c 发现执行latex时应该显示的文献号变成 xff1f 号了 按照网上的多种方法还没解决好 解决文献引用问题主要有以下方法 xff1a 1 end document 的语句位置问题 执行文件之所以没有找到bib
  • 有些参考文献找不到页码和期号怎么解决?

    在我们撰写论文时不论是查找下载期刊文献资料还是编辑参考文献都会需要知道该期刊论文的期卷号 xff0c 那么 xff0c 期刊论文的期卷号怎么找呢 xff1f 下面小编就介绍几种论文期卷号的查找方法 xff08 注 xff1a 文中所用的检索
  • CUDA入门(一)

    最近我也都在看CUDA xff0c 自己看书和练习也都搞了一个月了 而且经常在CSDN上逛 xff0c 也发现了很多问题 xff0c 所以决定自己写点这方面的东西 xff0c 方便自己也方便后来人 根据我的调查 xff0c 我发现现在的初学
  • 如何在excel多条件筛选

    最近在报名各种考试 xff0c 发现表格里的职位一大堆 xff0c 条件也一大堆 一个个找找的头都大了 经过多方查找和同学 xff08 CC xff09 的帮助 xff0c 终于成功学会了怎么多条件筛选 浅浅记录一下 xff1a 比如在一张
  • MTLAB读取数据并计算平均值

    当想从matlab里面读取excel表格的某一列进行计算时 xff0c 可以进行如下操作 1 读取excle表格里的数据 xff0c 具体操作见文章MATLAB读取数据 xff08 txt excel 并绘图 matlab读取数据并绘图 沉
  • word表格如何令文字上下居中

    第一步 xff1a 在word文档中插入需要的表格 xff0c 如图所示 第二步 xff1a 如下图所示 xff0c 单击红色圆圈标记的图标 xff0c 表格被全部选中 xff0c 如图所示 第三步 xff1a 在表格中 xff0c 单击鼠
  • 键盘打字时,打一个字后面少一个字如何解决

    键盘敲字时 xff0c 如果光标在中间 xff0c 输入一个字后面就少一个字 文字输入的例子 只需要按INS 键就可以恢复正常了 注 xff1a 如果是手提笔记本电脑 xff0c 一个键盘有两下两行 xff0c 先按一下FN 按键 xff0
  • 教你如何开发VR游戏系列教程五:UI 交互

    原文链接 xff1a 欢迎关注AR学院 上一篇介绍了ugui NGUI 以及普通3D模型的UI设计 这一讲主要介绍怎么样利用这些UI做交互 大家在VR游戏看到的UI以及UI交互 xff0c 主要有哪几种 xff1f 1 头控悬停 xff08
  • 顶会论文集--ICRA2020

    转自 https blog csdn net spacegene article details 107458141 utm medium 61 distribute pc relevant none task blog title 3 a
  • 机器人学习--Gazebo学习--sdf文件、urdf和xacro文件

    供学习使用 xff1a 参考 xff1a https blog csdn net lxlong89940101 article details 93486875 utm medium 61 distribute pc relevant no
  • 多传感器数据融合简介(转)

    转自知乎网友 xff1a 多传感器融合 xff08 算法 xff09 综述 知乎 多传感器融合 xff08 Multi sensor Fusion MSF xff09 是利用计算机技术 xff0c 将来自多传感器或多源的信息和数据以一定的准
  • 动态SLAM

    动态SLAM快速入门 xff08 原理介绍及经典算法 xff09 https mp weixin qq com s biz 61 MzU1NjEwMTY0Mw 61 61 amp mid 61 2247520976 amp idx 61 1
  • 经典编程问题(13)汉诺塔

    背景 汉诺塔 xff0c 又称河内塔 hanoi xff0c 源于印度古老的传说 该传说中要求在三个柱子间移动金质的圆盘 xff0c 规则是 xff1a 每次只能移动一个盘子大盘子不能放在小盘子的上方开始的时候 xff0c 在某根柱子上有
  • 2011年终总结——思路

    By Alpha G wu 又是一年的尽头 xff0c 对于本人来说 xff0c 不是老了一岁 xff0c 而是又长大了一岁 每一天的自己都是一个fresh的自己 xff0c 更别说一年的变化有多大 xff0c 大到甚至连你自己都察觉不出来
  • win10下完美安装ubuntu使用docker容器

    期待以久的windows 10支持ubuntu版本更新终于发布了 xff0c 怀着期待的心情 xff0c 下载更新到2004版本 xff08 设置 gt 关于中查看 xff09 如果版本较低 xff0c 可以使用win10更新包提示 xff
  • 学习ing

    分治算法 一 基本概念 在计算机科学中 xff0c 分治法是一种很重要的算法 字面上的解释是 分而治之 xff0c 就是把一个复杂的问题分成两个或更多的相同或相似的子问题 xff0c 再把子问题分成更小的子问题 直到最后子问题可以简单的直接
  • C语言中字符串相关操作函数

    长度 strlen size t strlen const char str 功能 xff1a 返回字符串长度 strnlen size t strnlen const char str size t maxlen 功能 xff1a 返回字
  • s3c2440之串口

    1 xff1a s3c2440串口概述 s3c2440A 通用异步接收器和发送器 xff08 UART xff09 提供了三个独立的异步串行I O xff08 SIO xff09 端 口 xff0c 每个端口都可以在中断模式或DMA模式下操
  • 《layui宇宙版教程》:日期和时间组件laydate

    Layui宇宙版教程 提供2000人的QQ群进行交流学习 xff0c QQ群号 xff1a 1046961650 xff0c 或通过手机QQ扫描二维码进入 xff1a 1 19 日期和时间组件laydate 主要以年选择器 年月选择器 日期