laydate時間控件：開始時間，結束時間最大最小值

本文轉載自查看原文 2019-08-20 10:00 833 laydate時間控件演練/ 插件/ laydate設置時間大小/ laydate時間控件(開始日期、結束日期)最大最小設置/ laydate時間控件

時間控件地址及插件下載鏈接：https://www.layui.com/doc/modules/laydate.html

填充時間已兩個功能為例；

1.添加功能：時間

規則：選擇開始時間后，點擊結束時間必須大於開始時間；

　　　如果先選擇結束時間，開始時間必須小於結束時間；

代碼如下：

<html>
<body>
<input type="text" class="cousre-time" id="startTime" placeholder="開始時間"
                            name="startTime" />
                        <span>-</span>
                        <input type="text" class="cousre-time" id="endTime" placeholder="結束時間"
                            name="endTime" />
</body>
<script>
    layui.use('laydate', function() {
                var laydate = layui.laydate;

                //開始時間
                var start = laydate.render({
                    elem : '#startTime',
                    type : 'datetime', //可選擇：年月日時分秒
                    theme : 'molv',
                    trigger : 'click', //采用click彈出
                    done : function(value, date, endDate) {
                        end.config.min = {
                            year : date.year,
                            month : date.month - 1,
                            date : date.date,
                            hours : date.hours,
                            minutes : date.minutes,
                            seconds : date.seconds
                        }; //開始日選好后，重置結束日的最小日期
                        end.config.value = {
                            year : date.year,
                            month : date.month - 1,
                            date : date.date,
                            hours : date.hours,
                            minutes : date.minutes,
                            seconds : date.seconds
                        }; //將結束日的初始值設定為開始日
                    }
                });
                //結束時間
                var end = laydate.render({
                    elem : '#endTime',
                    type : 'datetime', //可選擇：年月日時分秒
                    theme : 'molv',
                    trigger : 'click', //采用click彈出
                    done : function(value, date, endDate) {
                        start.config.max = {
                            year : date.year,
                            month : date.month - 1,
                            date : date.date,
                            hours : date.hours,
                            minutes : date.minutes,
                            seconds : date.seconds
                        }; //結束日選好后，重置開始日的最大日期
                    }
                });
            });
</script>
</html>

2.編輯功能：時間

規則：默認有個初始值；

　　　選擇開始時間后，點擊結束時間必須大於開始時間；

　　　如果先選擇結束時間，開始時間必須小於結束時間；

代碼如下：

<script type="text/javascript">
//${project.startTime.time} 是因為 在jsp下寫的；可替換成html;或者直接在laydate.render里添加也行
var startTimeString = formatDate(new Date([[${project.startTime.time}]]));
         var endTimeString = formatDate(new Date([[${project.endTime.time}]]));
layui.use('laydate', function() {
                var laydate = layui.laydate;

                //開始時間
                var start = laydate.render({
                    elem : '#startTime',
                    type : 'datetime', //可選擇：年月日時分秒
                    theme : 'molv',
                    value : startTimeString,
                    trigger : 'click', //采用click彈出
                    max : endTimeString,
                    done : function(date) {
                        end.config.min = {
                            year : date.year,
                            month : date.month - 1,
                            date : date.date,
                            hours : date.hours,
                            minutes : date.minutes,
                            seconds : date.seconds
                        }; //開始日選好后，重置結束日的最小日期
                    }
                });
                //結束時間
                var end = laydate.render({
                    elem : '#endTime',
                    type : 'datetime', //可選擇：年月日時分秒
                    theme : 'molv',
                    value : endTimeString,
                    trigger : 'click', //采用click彈出
                    min : endTimeString,
                    done : function(value, date, endDate) {
                        start.config.max = {
                            year : date.year,
                            month : date.month - 1,
                            date : date.date,
                            hours : date.hours,
                            minutes : date.minutes,
                            seconds : date.seconds
                        }; //結束日選好后，重置開始日的最大日期
                    }
                });
            });
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 設置layUI的時間laydate 結束時間大於開始時間 laydate設置起始時間，laydate設置開始時間和結束時間【第十九篇】laydate設置起始時間，laydate設置開始時間和結束時間 layer日期控件，開始時間不能大於結束時間簡單好用的時間插件laydate實現開始時間和結束時間的限制 My97DatePicker日期控件,開始時間不能大於結束時間,結束時間不能小於開始時間 layui開始時間小於結束時間 Layui結束時間不能小於開始時間 antD 結束時間不能小於開始時間 datepicker，結束時間必須大於開始時間