美文网首页
layui引入时间控件

layui引入时间控件

作者: fronter | 来源:发表于2019-02-20 19:54 被阅读0次
这里主要举例说明如何使用年选择器、月选择器、日选择器
/**
 *  css部分代码
 */
<link rel="stylesheet" type="text/css" href="js/common/UILab/layui2.4.5/css/layui.css" />


/**
 *  html部分代码
 */
<input type="text" class="layui-input" id="flow-years" placeholder="yyyy">
<input type="text" class="layui-input" id="flow-year-month" placeholder="yyyy-MM">
<input type="text" class="layui-input" id="flow-year" placeholder="选择日期">
<input type="text" class="layui-input" id="flow-time-range" placeholder="选择时间区间">


/**
 *  js部分代码
 */
<script type="text/javascript" src="js/common/UILab/layui2.4.5/layui.js"></script>
  <script>
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //按年查询
            laydate.render({
                elem: '#flow-years'
                ,type: 'year'
                ,done: function(value, date, endDate){
                    flowYears = value;
                }
            });
            //按月查询
            laydate.render({
                elem: '#flow-year-month'
                ,type: 'month'
                ,done: function(value, date, endDate){
                    flowYearMonth = value;
                }
            });
            //按日查询
            laydate.render({
                elem: '#flow-year'
                ,format: 'yyyy-MM-dd'
                ,done: function(value, date, endDate){
                    flowYmd = value;
                }
            });
            //小时-分钟区间选择
            laydate.render({
                elem: '#flow-time-range'
                ,type: 'time'
                ,range: true
                ,format: 'HH:mm'
                ,done: function(value, date, endDate){
                    flowHourminite = value;
                }
            });
        }); 
  </script>

相关文章

  • layui引入时间控件

    这里主要举例说明如何使用年选择器、月选择器、日选择器

  • Layui时间控件回调获取时间戳

    Layui时间控件回调获取时间戳 code 打印结果 补充

  • 解决layui引入时间控件无效的问题

    问题发生在我打算引用layui的时间控件。我们先看官网怎么说的 官网是说了有两种引用方式,如果是打算在模块中引用的...

  • layui.laydate时间控件

    主要功能:年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器 五种类型的选择方式为基本核心,并且均支持范...

  • layui dropdown 在layuitable中动态更新下

    注意:dropdown.js不能直接引入页面,最好将js存放在layui.js所在文件夹,在初始化layui中引入...

  • Layui 时间戳转为日期时间

    Layui 时间戳转为日期时间 步骤: 1、定义该列采用模板 2、引入JS,laydate和util 3、调用这个...

  • layUi学习笔记

    layui网址:http://www.layui.com/ 引入文件 静态页面 弹出框 加载完成就弹出 普通弹出框...

  • layui分页控件

    小白在首次使用layui传参数进行分页时需要注意以下几点: 1、ajax请求的url写法:接口?page='+pa...

  • layui 框架使用学习

    将 layui 框架整体拖放入项目中; 在需要使用的地方首先引入 layui.css 文件;注意在使用 link ...

  • 在项目中使用layUI

    layUI文档 下载官方的压缩包,解压之后把layui文件放到项目里面。 在index.html 文件中引入js和...

网友评论

      本文标题:layui引入时间控件

      本文链接:https://www.haomeiwen.com/subject/xbfqeqtx.html