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