laydate选择日期范围


这里只是使用layui的日期模块,所以,我只引入了laydate相关文件;

1.首选引入laydate.js和laydata.css:

<link href="css/laydate.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/laydate.js"></script>

2.html部分(input样式我自己定义的)

<input class="date_class" type="text" id="startTime" />
<input class="date_class" type="text" id="endTime" />

3.js部分:

<script type="text/javascript">
            var startDate = laydate.render({
                elem: '#startTime', //指定元素
                type: 'date',
                max: getNowFormatDate(),
                done: function(value, dates) {
                    endDate.config.min = {
                        year: dates.year,
                        month: dates.month - 1, //关键
                        date: dates.date,
                        hours: 0,
                        minutes: 0,
                        seconds: 0
                    };
                    // 开始日期
                    console.log(value);
                }
            });
            var endDate = laydate.render({
                elem: '#endTime', //指定元素
                type: 'date',
                max: getNowFormatDate(),
                done: function(value, dates) {
                    // 结束日期
                    console.log(value);
                }
            });
            // 获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS”
            function getNowFormatDate() {
                var date = new Date();
                var seperator1 = "-";
                var seperator2 = ":";
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
                    " " + date.getHours() + seperator2 + date.getMinutes() +
                    seperator2 + date.getSeconds();
                return currentdate;
            }
        </script>

效果图:

 

 

 以上;


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM