可选择时间段的起止日期插件(基于layui)

来源:https://www.sucaihuo.com/js/2692.html 2017-08-10 23:42浏览(4327) 收藏

一款基于layui的可选择时间段起止日期的日期插件,
可选择时间段的起止日期插件(基于layui)
分类:日期时间 > 日期控件 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入两个必要的CSS样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="plugin/layui-v1.0.7/css/layui.css">
<link type="text/css" rel="stylesheet" href="css/date.css">

页面的body部分,主要是一个form表单,里面用了多个div容器的嵌套,代码如下:

<form class="layui-form" action="" id="form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">截止日期</label>
            <div class="layui-input-inline ui-time">
                <input type="text" id="dp11" class="layui-input ui-time-text" value="2017-09-09~2018-09-09" kssj="2017-09-09" jssj="2018-09-09" />
            </div>
        </div>
    </div>
</form>

页面的底部,远程调用jQuery库,引入必要的JS文件,设置日期插件的参数等,代码如下:

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="plugin/layui-v1.0.7/layui.js"></script>
<script type="text/javascript" src="js/main.js?1"></script>
<script type="text/javascript">
layui.use(['laydate','dateLay'], function(){
    var layer = layui.layer,
        laydate = layui.laydate;
    var obj={
        init:function(){
            this.dp11=$('#dp11');
            this.initEvent();
        },
        initEvent:function(){
            this.dp11.dateLay();
            
        }
    }
    obj.init();
});
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2