zoukankan      html  css  js  c++  java
  • 日期时间插件--日期时间组件文档

    官方文档:http://www.layui.com/doc/modules/laydate.html

    样式:

    <body>

      <div>
        <input placeholder="开始时间" id="LAY_start_time" name="startTime"type="text"readonly/>
        <input placeholder="截止时间" id="LAY_end_time" name="endTime" type="text" readonly/>
      </div>

    </body>


    <script src="laydate.js"></script>   /*这里我引的是我本地的js*/
    <script> /*时间插件*/
    layui.use('laydate', function () {
      var laydate = layui.laydate;
      var start =
      {
        /* elem: '#id', //需显示日期的元素选择器*/
        event: 'click', //触发事件
        format: 'YYYY-MM-DD hh:mm:ss', //日期格式
        istime: true, //是否开启时间选择(时分秒)
        isclear: true, //是否显示清空
        istoday: true, //是否显示今天
        issure: true,// 是否显示确认
        festival: true, //是否显示节日
        min: laydate.now(), //最小日期
        max: '2099-12-31 23:59:59', //最大日期
        start: laydate.now(), //开始日期
        fixed: false, //是否固定在可视区域
        zIndex: 99999999, //css z-index
        choose: function (dates) { //选择好日期的回调
        end.min = dates; //开始日选好后,重置结束日的最小日期
        end.start = dates //将结束日的初始值设定为开始日
      }
    }
    var end = {
        event: 'click', //触发事件
        format: 'YYYY-MM-DD hh:mm:ss', //日期格式
        istime: true, //是否开启时间选择
        isclear: true, //是否显示清空
        issure: true,// 是否显示确认
        festival: true, //是否显示节日
        max: '2099-12-31 23:59:59', //最大日期
        fixed: false, //是否固定在可视区域
        zIndex: 99999999, //css z-index
      choose: function (dates) { //选择好日期的回调 结束日选好后,重置开始日的最大日期
        start.max = dates;
      }
    }

    $("#LAY_start_time").click(function () {
      start.elem = this;
      laydate(start)
    });

    $("#LAY_end_time").click(function () {
        end.elem = this;
        laydate(end)
      });
    })
    </script>

    作者:有梦想的乌龟·
  • 相关阅读:
    Docker容器启动时初始化Mysql数据库
    使用Buildpacks高效构建Docker镜像
    Mybatis 强大的结果集映射器resultMap
    Java 集合排序策略接口 Comparator
    Spring MVC 函数式编程进阶
    换一种方式编写 Spring MVC 接口
    【asp.net core 系列】6 实战之 一个项目的完整结构
    【asp.net core 系列】5 布局页和静态资源
    【asp.net core 系列】4. 更高更强的路由
    【Java Spring Cloud 实战之路】- 使用Nacos和网关中心的创建
  • 原文地址:https://www.cnblogs.com/nlbnick/p/6978844.html
Copyright © 2011-2022 走看看