文档地址：

https://www.layui.com/demo/laydate.html

【基本案例】

基本日期与国际日期

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

    <legend>常规用法</legend>

</fieldset>

<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="test1" 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="test1-1" placeholder="yyyy-MM-dd">

            </div>

        </div>

    </div>

</div>

<script type="text/javascript">

    layui.use('laydate', function(){

        let laydate = layui.laydate;

        //常规用法

        laydate.render({

            elem: '#test1'

        });

        //国际版

        laydate.render({

            elem: '#test1-1'

            ,lang: 'en'

        });

    });

</script>

年选择器：

设置属性为年即可

type: 'year'

年月选择器：

设置属性为月即可，上一级的年也将保留携带

type: 'month'

时间选择器：

仅能选择时分秒：

type: 'time'

范围设置：

开启范围设置，默认代表两个月之内的天数范围取值：

range: true

年范围取值设置：

    ,type: 'year'

    ,range: true

年月范围取值设置：

    ,type: 'month'

    ,range: true

时间范围取值设置：

    ,type: 'time'

    ,range: true

日期时间范围取值设置：

    ,type: 'datetime'

    ,range: true

【直接嵌套展示】

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

    <legend>直接嵌套显示</legend>

</fieldset>

<div class="site-demo-laydate">

    <div class="layui-inline" id="test-n1"></div>

    <div class="layui-inline" id="test-n2"></div>

    <div class="layui-inline" id="test-n3"></div>

    <div class="layui-inline" id="test-n4"></div>

</div>

<script type="text/javascript">

    layui.use('laydate', function(){

        let laydate = layui.laydate;

        //直接嵌套显示

        laydate.render({

            elem: '#test-n1'

            ,position: 'static'

        });

        laydate.render({

            elem: '#test-n2'

            ,position: 'static'

            ,lang: 'en'

        });

        laydate.render({

            elem: '#test-n3'

            ,type: 'month'

            ,position: 'static'

        });

        laydate.render({

            elem: '#test-n4'

            ,type: 'time'

            ,position: 'static'

        });

    });

</script>

【主题色风格自定义】

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

    <legend>其它主题</legend>

</fieldset>

<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="test29" 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="test30" 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="test31" placeholder="yyyy-MM-dd">

            </div>

        </div>

    </div>

</div>

<script type="text/javascript">

    layui.use('laydate', function(){

        let laydate = layui.laydate;

        //墨绿主题

        laydate.render({

            elem: '#test29'

            ,theme: 'molv'

        });

        //自定义颜色

        laydate.render({

            elem: '#test30'

            ,theme: '#393D49'

        });

        //格子主题

        laydate.render({

            elem: '#test31'

            ,theme: 'grid'

        });

    });

</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="test19" 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="test20" 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="test21" 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="test22" 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="test23" 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="test24" placeholder="yyyy-MM-dd">

            </div>

        </div>

        <div class="layui-inline">

            <label class="layui-form-label" id="test25-1">点我触发</label>

            <div class="layui-input-inline">

                <input type="text" class="layui-input" id="test25" placeholder="yyyy-MM-dd">

            </div>

        </div>

        <div class="layui-inline">

            <label class="layui-form-label" id="test26-1">双击我触发</label>

            <div class="layui-input-inline">

                <input type="text" class="layui-input" id="test26" 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="test27" 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="test28" style="height: 38px; line-height: 38px; cursor: pointer; border-bottom: 1px solid #e2e2e2;"></div>

            </div>

        </div>

    </div>

</div>

<script type="text/javascript">

    layui.use('laydate', function(){

        let laydate = layui.laydate;

        //初始赋值

        laydate.render({

            elem: '#test19'

            ,value: '1989-10-14'

            ,isInitValue: true

        });

        //选中后的回调

        laydate.render({

            elem: '#test20'

            ,done: function(value, date){

                layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));

            }

        });

        //日期切换的回调

        laydate.render({

            elem: '#test21'

            ,change: function(value, date){

                layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));

            }

        });

        //不出现底部栏

        laydate.render({

            elem: '#test22'

            ,showBottom: false

        });

        //只出现确定按钮

        laydate.render({

            elem: '#test23'

            ,btns: ['confirm']

        });

        //自定义事件

        laydate.render({

            elem: '#test24'

            ,trigger: 'mousedown'

        });

        //点我触发

        laydate.render({

            elem: '#test25'

            ,eventElem: '#test25-1'

            ,trigger: 'click'

        });

        //双击我触发

        lay('#test26-1').on('dblclick', function(){

            laydate.render({

                elem: '#test26'

                ,show: true

                ,closeStop: '#test26-1'

            });

        });

        //日期只读

        laydate.render({

            elem: '#test27'

            ,trigger: 'click'

        });

        //非input元素

        laydate.render({

            elem: '#test28'

        });

    });

</script>

【公历节日，自定义重要日期】

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

    <legend>公历节日和自定义重要日子</legend>

</fieldset>

<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="test17" 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="test18" placeholder="yyyy-MM-dd">

            </div>

        </div>

    </div>

</div>

<script type="text/javascript">

    layui.use('laydate', function(){

        let laydate = layui.laydate;

        //开启公历节日

        laydate.render({

            elem: '#test17'

            ,calendar: true

        });

        //自定义重要日

        laydate.render({

            elem: '#test18'

            ,mark: {

                '0-10-14': '生日'

                ,'0-12-31': '跨年' //每年的日期

                ,'0-0-10': '工资' //每月某天

                ,'0-0-15': '月中'

                ,'2017-8-15': '' //如果为空字符，则默认显示数字+徽章

                ,'2099-10-14': '呵呵'

            }

            ,done: function(value, date){

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

                    layer.msg('这一天是：中国人民抗日战争胜利72周年');

                }

            }

        });

    });

</script>

【Layui】15 日期时间选择器 Laydate的更多相关文章

  1. 24款最好的jQuery日期时间选择器插件

    如果你正在创建一个网络表单,有很多事情你需要在你的应用程序中使用.有时您需要特别的输入,从用户的日期和时间,如发票日期,生日,交货时间,或任何其他此类信息.如果你有这样的需要,可以极大地从动态的jQu ...

  2. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  3. Android日期时间选择器实现以及自定义大小

    本文主要讲两个内容:1.如何将DatePicker和TimePicker放在一个dialog里面:2.改变他们的宽度: 问题1:其实现思路就是自定义一个Dialog,然后往里面同时放入DatePick ...

  4. Bootstrap-datepicker日期时间选择器的简单使用

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  5. flatpickr功能强大的日期时间选择器插件

    flatpickr日期时间选择器支持移动手机,提供多种内置的主题效果,并且提供对中文的支持.它的特点还有: 使用SVG作为界面的图标. 兼容jQuery. 支持对各种日期格式的解析. 轻量级,高性能, ...

  6. 日期时间选择器插件flatpickr

    前言:在网页上需要输入时间的时候,我们可以用HTML5的inputl中的date类型.但是如下入所示,有些浏览器不支持.flatpickr这个小插件可以解决这个问题. 1.flatpickr日期时间选 ...

  7. 解决elementui日期时间选择器提交时与后台date类型不匹配问题

    问题描述: 在前端使用elementui的日期时间选择器后,在通过axios进行提交的时候,前端控制台出现了400(数据类型不匹配的错误)的错误. <el-form-item label=&qu ...

  8. Android中实现日期时间选择器(DatePicker和TimePicker)

    利用Android应用框架提供的DatePicker(日期选择器)和TimePicker(时间选择器),实现日期时间选择器. Dialog的Content布局文件(date_time_dialog.x ...

  9. elementUI 日期时间选择器 只能选择当前及之后的时间

    日期时间选择器  只能选择当前及之后的时间 <el-date-picker class="input-border-null" prefix-icon="el-ic ...

  10. 微信小程序----日期时间选择器（自定义精确到分秒或时段）

    声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变.造成原因:这一点就是由于在bindc ...

随机推荐

  1. k8s搭建安装 Harbor 私有镜像仓库（本地仓库，内网仓库）

    主要参考 https://www.cnblogs.com/wangzy-Zj/p/14011228.html 额外: 1.如果 harbor.yml中的域名和openssl 生成的不一致,你改了hos ...

  2. OpenTelemetry Logging 思维导图，收藏

    Log 是最常用.最自然的监控数据类型之一,具有以下的优点: 日志的内容比指标更加丰富,可以提供更多的细节信息,帮助开发人员和运维人员更好地理解应用程序的运行状况,通过日志几乎可以重现.还原系统的完整 ...

  3. linux日志查询less及堡垒机查询日志方法

    方法1tail -f orderFile.log | grep "关键字" postman接口请求的时候,关注控制台对关键字过滤的打印输出. 方法2less 文件名称/ 关键字n ...

  4. WebApi 接口参数不再困惑

    从网上看了WEBAPI理解感觉不错分享一下 前言:还记得刚使用WebApi那会儿,被它的传参机制折腾了好久,查阅了半天资料.如今,使用WebApi也有段时间了,今天就记录下API接口传参的一些方式方法 ...

  5. MYSQL8.0-JSON函数简单示例-JSON_EXTRACT|JSON_VALUE|JSON_TABLE

    JSON类型在日常应用开发中,用得很少,个人通常用于存储常常变化的配置参数. 它适用于什么业务场景,不好说.就好像许多年前读到的一篇文章,说有个国外公司利用ORACLE的CLOB/BLOB管理一些信息 ...

  6. 使用nc进行tcp测速

    # server nc -l IP PORT > /dev/null eg: nc -l 192.168.144.1 8080 > /dev/null # client bs单位块大小 c ...

  7. 一文带你深入理解SpringMVC的执行原理

    今天大致来看一下Spring MVC的执行流程是什么样的 执行流程:也就是一个请求是怎么到我们Controller的,返回值是怎么给客户端的 本文分析的问题: 文件上传的请求是怎么处理的 跨域是怎么处 ...

  8. supervisor 安装和基本使用

    安装 yum install supervisor touch /var/run/supervisor/supervisor.sock chmod 777 /var/run/supervisor/su ...

  9. webdav协议及我的笔记方案（私有部署）

    背景 用markdown用于文章写作,有几年时间了,不是很喜欢折腾,主要就是在电脑上写,用的笔记软件就是typora.由于里面有很多工作相关的,以及个人资料相关的(包含了各种账号.密码啥的),所以不敢 ...

  10. unp.h的安装以及第一个程序的运行

    unp.h的安装以及第一个程序的运行 源代码下载以及编译 点击此处下载源代码 解压到本地文件夹,如果访问不了GitHub的话就用我搬到gitee的仓库吧 git clone https://gitee ...