1、點我下載

2、使用方法：

 <!--日曆外掛3個css-->
<link href="../Mobiscroll/mobiscroll.android-ics-2.5.2.css" rel="stylesheet">
<link href="../Mobiscroll/mobiscroll.animation-2.5.2.css" rel="stylesheet">
<link href="../Mobiscroll/mobiscroll.core-2.5.2.css" rel="stylesheet">
 <!--日曆外掛5個js-->
 

<script src="../Mobiscroll/mobiscroll.core-2.5.2.js"></script>
<script src="../Mobiscroll/mobiscroll.core-2.5.2-zh.js"></script>
<script src="../Mobiscroll/mobiscroll.datetime-2.5.1.js"></script>
<script src="../Mobiscroll/mobiscroll.datetime-2.5.1-zh.js"></script>
 

<script src="../Mobiscroll/mobiscroll.android-ics-2.5.2.js"></script>

3、初始化日曆外掛：

$(function(){
        var currYear=(new Date().getFullYear());
        var opt={};
        opt.datetime={preset:'datetime'};
        opt.date={preset:'date'};
        opt.time={preset:'time'};
        opt.default={
            preset:'datetime'
 
,
            theme:'android-ics light',
            display:'bottom',
            modal:'scroller',
            lang:'zh',
            dateFormat:'yyyy-mm-dd',
            controls:['calendar'],
            startYear:currYear,
            endYear:currYear+50
        };
        var optTime= $.extend(opt['datetime'],opt['default']);
        $('#time').mobiscroll(optTime);
    })

4、效果圖：

這裡寫圖片描述

5、總結

該外掛方便年月日時分秒的控制，以及開始日期和結束日期的聯動，無相容問題。手機端日曆優先使用該外掛！

PS:更新：demo(要求：開始時間最小為當前系統時間，最大為15天后；結束時間最小為選擇的開始時間，最大為選擇的開始時間的當天23點59分)
html程式碼：

 <input type="text" id="startdate" class="form-control bgdate" placeholder="請輸入開始時間 "/>
 <input type="text" id="enddate" class="form-control bgdate" placeholder="請輸入結束時間 " disabled/>

js程式碼：

  //初始化日曆外掛
    $(function() {
        var currYear = (new Date().getFullYear());
        var date = new Date();
        var nyear = date.getFullYear();
        var nmonth = date.getMonth();
        var nday = date.getDate();
        var nhour = date.getHours();
        var nminite = date.getMinutes();
        var now = new Date(nyear, nmonth, nday, nhour, nminite);//設定開始時間最小為現在
        var last = new Date(nyear, nmonth, nday + 15, 23, 59);//設定開始時間最大為15後
        var opt = {};
        opt.datetime1 = {
            preset: 'datetime',
            minDate: now,
            maxDate: last
        };
        opt.date = {
            preset: 'date'
        };
        opt.time = {
            preset: 'time'
        };
        opt.default = {
            preset: 'datetime',
            theme: 'android-ics light',
            display: 'bottom',
            modal: 'scroller',
            lang: 'zh',
            dateFormat: 'yyyy-mm-dd',
            onSelect:function(){
                var val=$('#startdate').val();
                able(val);//啟用結束時間
                if(val!=""){
                    var newDate=val.split('-').join('/');
                    var str1=new Date(newDate);
                    var first=val.split(' ')[0];
                    var first=first.split('-').join('/');
                    var str2=new Date(first+' 23:59');
                    opt.datetime2={
                        preset:'datetime',
                        minDate:str1,//設定結束時間最小為開始時間
                        maxDate:str2//設定結束時間最大為開始時間當天的23:59
                    };
                    var optTime2= $.extend(opt['datetime2'],opt['default']);
                    $('#enddate').mobiscroll(optTime2);
                }
//                checkTime(this);
            },

            controls: ['calendar'],
            startYear: currYear,
            endYear: currYear + 50
        };
        var optTime1 = $.extend(opt['datetime1'], opt['default']);
        $('#startdate').mobiscroll(optTime1);
    });
    //開啟結束時間
    function able(element){
        if(element !=''){
            $('#enddate').removeAttr('disabled');
        }
    }

6.配置API

        //下面註釋部分是上面的引數可以替換改變它的樣式
        // 直接寫引數方法
        //$("#scroller").mobiscroll(opt).date(); 
        // Shorthand for: $("#scroller").mobiscroll({ preset: 'date' });
        //具體引數定義如下
        //{
        //preset: 'date', //日期型別--datatime --time,
        //theme: 'ios', //面板其他引數【android-ics light】【android-ics】【ios】【jqm】【sense-ui】【sense-ui】【sense-ui】
        //【wp light】【wp】
        //mode: "scroller",//操作方式【scroller】【clickpick】【mixed】
        //display: 'bubble', //顯示方【modal】【inline】【bubble】【top】【bottom】
        //dateFormat: 'yyyy-mm-dd', // 日期格式
        //setText: '確定', //確認按鈕名稱
        //cancelText: '清空',//取消按鈕名籍我
        //dateOrder: 'yymmdd', //面板中日期排列格
        //dayText: '日', 
        //monthText: '月',
        //yearText: '年', //面板中年月日文字
        //startYear: (new Date()).getFullYear(), //開始年份
        //endYear: (new Date()).getFullYear() + 9, //結束年份
        //showNow: true,
        //nowText: "明天",  //
        //showOnFocus: false,
        //height: 45,
        //width: 90,
        //rows: 3,
        //minDate: new Date()  從當前年，當前月，當前日開始}