文档地址：

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. OPA Gatekeeper：Kubernetes的策略和管理

    目录 一.系统环境 二.前言 三.OPA Gatekeeper简介 四.在kubernetes上安装OPA Gatekeeper 五.gatekeeper规则 5.1 使用gatekeeper禁止某些 ...

  2. 红白机基本原理(二) CPU

    CPU 首发公号:Rand_cs NES 使用的 CPU 为 6502,但与标准的 6502 有些许不同,最大的不同在于 NES 使用的芯片拥有一个 pAPU(pseudo-Audio Process ...

  3. LeetCode 409. Longest Palindrome 最长回文串(C++/Java)

    题目: Given a string which consists of lowercase or uppercase letters, find the length of the longest ...

  4. Mysql常见使用问题的解决方法

    问题一:Mysql插入中文数据时,报错"incorrect string value"字符转换不正确 解决方法: 第一种方式: 1.更改Mysql安装目录下的文件my.ini(一般 ...

  5. spring-boot-admin 监控

    监控单体应用 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spri ...

  6. PIC18 bootloader之RS485 bootloader

                                  了解更多关于bootloader 的C语言实现,请加我Q扣: 1273623966 (验证信息请填 bootloader),欢迎咨询或定制b ...

  7. Java设计模式-责任链模式，应用接口多个参数验证，订单多个费用的计算

    Java设计模式-责任链模式,应用接口多个参数验证,订单多个费用的计算 1.定义请求和返回对象的上下文对象 package com.example.core.mydemo.java.filter; i ...

  8. golang模拟键盘输入字符串

    介绍 仅供学习使用哈,不要用来开gua. 代码仓库:https://github.com/GuoFlight/gkeybd (本人仓库,欢迎留言) 注意事项 只支持英文 使用前请切换到英文输入法.因为 ...

  9. 从零开始学Spring Boot系列-集成Spring Security实现用户认证与授权

    在Web应用程序中,安全性是一个至关重要的方面.Spring Security是Spring框架的一个子项目,用于提供安全访问控制的功能.通过集成Spring Security,我们可以轻松实现用户认 ...

  10. 算法金 | 致敬深度学习三巨头：不愧是腾讯，LeNet问的巨细。。。

    ​ 大侠幸会,在下全网同名「算法金」 0 基础转 AI 上岸,多个算法赛 Top 「日更万日,让更多人享受智能乐趣」 抱个拳,送个礼 读者参加面试,竟然在 LeNet 这个基础算法上被吊打~ LeNe ...