1. 程式人生 > >簡單好用的時間外掛laydate實現開始時間和結束時間的限制

簡單好用的時間外掛laydate實現開始時間和結束時間的限制

我是在Laravel下使用的,具體按照你的情況,更改一下路徑就行

首先,引入js檔案,laydate的js檔案可以去官網下載

<script src="{{asset('lib/js/jquery-2.0.3.min.js')}}"></script>
<script src="{{asset('lib/js/laydate/laydate.dev.js')}}"></script>

然後,DOM加入開始和結束的ID
<label for="date">開始日期</label>
    <input type="text" id="start" name='start' class="form-control laydate-icon"/> 
<label for="date">結束日期</label>
    <input type="text" id="end" name='end' class="form-control laydate-icon"/>

接著,讓LAYDATE功能實現
$(function(){
    var start = {
        elem: '#start', //選擇ID為START的input
        format: 'YYYY/MM/DD hh:mm:ss', //自動生成的時間格式
        min: laydate.now(), //設定最小日期為當前日期
        max: '2099-06-16 23:59:59', //最大日期
        istime: true, //必須填入時間
        istoday: false,  //是否是當天
        start: laydate.now(0,"YYYY/MM/DD hh:mm:ss"),  //設定開始時間為當前時間
        choose: function(datas){
             end.min = datas; //開始日選好後,重置結束日的最小日期
             end.start = datas //將結束日的初始值設定為開始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(),
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: false,
        start: laydate.now(0,"YYYY/MM/DD hh:mm:ss"),
        choose: function(datas){
            start.max = datas; //結束日選好後,重置開始日的最大日期
        }
    };
    laydate(start);
    laydate(end);
    })