layui引入时间控件

这里主要举例说明如何使用年选择器、月选择器、日选择器
/**
 *  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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容