layui引入时间控件

2019-02-20  本文已影响0人  fronter
这里主要举例说明如何使用年选择器、月选择器、日选择器
/**
 *  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>

上一篇 下一篇

猜你喜欢

热点阅读