方式一 ：My97DatePicker

My97DatePicker 可谓有年头了，使用起来非常方便，而且文档介绍的也非常全面，唯一的不足之处是移动端不是很友好。

示例图

（我改了他的源码，所以在移动端也是100%宽度显示，不过依然丑）

html

<form action="{{url('')}}" method="post" id="date-submit-search">
    <input type="text" id="date-input" class="" name="date" value="" readonly onClick="WdatePickerFun()"/>
    <input type="submit" style="display: none">
</form>

js

        // 判断合法性 + 提交操作
        function dateSearch(){
            var date = new Date();
            var userInputDate = $('#date-input').val();
            var Udate = new Date(userInputDate);
            if (Udate > date) {
                alert('查询时间不得大于当前日期');
                return false;
            }
            $('#date-submit-search').submit();
        }

        // my97DatePicker初始化
        function WdatePickerFun(){
            WdatePicker({
                isShowClear:false,
                isShowOK:false,
                minDate:'%y-01-01',
                maxDate:'%y-%M-%d',
                onpicked:dateSearch
            })
        }

方式二 ：HTML5

以前一直没用过，最近使用才发现，原来HTML5的日期选择器在移动端表现是那么的惊艳！以前一直在找滚动选择日期的，现在H5可以取代了。

这是浏览器仿真

这是移动端，有没有很惊艳

html

<form action="{{url('')}}" method="post" id="date-submit-search">
    <input type="date" id="date-input" class="" name="date" max="{{$currentTime}}" value="" required onchange="dateSearch()">
    <input type="submit" style="display: none">
</form>

js

        // 判断合法性 + 提交操作
        function dateSearch(){
            var date = new Date();
            var userInputDate = $('#date-input').val();
            var Udate = new Date(userInputDate);
            if (Udate > date) {
                alert('查询时间不得大于当前日期');
                return false;
            }
            $('#date-submit-search').submit();
        }

方式三 ：最后一款十分不错的日历插件

html

<form action="{{url('')}}" method="post" id="date-submit-search">
    <div class="item item-buydate input-group">
        <input type="text" id="date-input" class="txt-input txt-buydate no-border-left text-right" name="date" value="{{}}" oninput="dateSearch()" readonly>
    </div>
    <input type="submit" style="display: none">
</form>

js源码

        // 判断合法性 + 提交操作
        function dateSearch(){
            var date = new Date();
            var userInputDate = $('#date-input').val();
            var Udate = new Date(userInputDate);
            if (Udate > date) {
                alert('查询时间不得大于当前日期');
                return false;
            }
            $('#date-submit-search').submit();
        }

        (function($) {
            $.fn.mdater = function(config) {
                var defaults = {
                    maxDate: new Date(),
                    minDate: new Date(2016, 0, 1)
                };
                var option = $.extend(defaults, config);
                var input = this;
                var F = {
                    getDaysInMonth: function(year, month) {
                        return new Date(year, month + 1, 0).getDate();
                    },
                    getWeekInMonth: function(year, month) {
                        return new Date(year, month, 1).getDay();
                    },
                    getMonth: function(m) {
                        return ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'][m];
                    },
                    getLastDayInMonth: function(year, month) {
                        return new Date(year, month, this.getDaysInMonth(year, month));
                    }
                };

                $.fn.delegates = function(configs) {
                    el = $(this[0]);
                    for (var name in configs) {
                        var value = configs[name];
                        if (typeof value == 'function') {
                            var obj = {};
                            obj.click = value;
                            value = obj;
                        }
                        for (var type in value) {
                            el.delegate(name, type, value[type]);
                        }
                    }
                    return this;
                };

                var mdater = {
                    value: {
                        year: '',
                        month: '',
                        date: ''
                    },
                    lastCheckedDate: '',
                    init: function() {
                        this.initListeners();
                    },
                    renderHTML: function() {
                        var $html = $('<div class="md_mask"></div><div class="md_panel"><div class="md_head"><div class="md_selectarea"><a class="md_prev change_year" href="javascript:void(0);">&lt;</a><a class="md_headtext yeartag" href="javascript:void(0);"></a><a class="md_next change_year" href="javascript:void(0);">&gt;</a></div><div class="md_selectarea"><a class="md_prev change_month" href="javascript:void(0);">&lt;</a><a class="md_headtext monthtag" href="javascript:void(0);">月</a> <a class="md_next change_month" href="javascript:void(0);">&gt;</a></div></div><div class="md_body"><ul class="md_weekarea"><li>日</li><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li></ul><ul class="md_datearea in"></ul></div><div class="md_foot"><a href="javascript:void(0);" class="md_ok">确定</a> <a href="javascript:void(0);" class="md_cancel">取消</a></div></div>');
                        if ($('.md_mask').length == 0) { $(document.body).append($html); }
                        return $html;
                    },
                    _showPanel: function(container) {
                        this.refreshView();
                        $('.md_panel, .md_mask').addClass('show');
                    },
                    _hidePanel: function() {
                        $('.md_panel, .md_mask').remove();
                    },
                    _changeMonth: function(add, checkDate) {

                        this.saveCheckedDate();

                        var monthTag = $('.md_selectarea').find('.monthtag'),
                                num = ~~monthTag.data('month') + add;
                        if (num > 11) {
                            num = 0;
                            this.value.year++;
                            $('.yeartag').text(this.value.year).data('year', this.value.year);
                        } else if (num < 0) {
                            num = 11;
                            this.value.year--;
                            $('.yeartag').text(this.value.year).data('year', this.value.year);
                        }

                        var nextMonth = F.getMonth(num) + '月';
                        monthTag.text(nextMonth).data('month', num);
                        this.value.month = num;
                        if (checkDate) {
                            this.value.date = checkDate;
                        } else {
                            this.setCheckedDate();
                        }
                        this.updateDate(add);
                    },
                    _changeYear: function(add) {
                        this.saveCheckedDate();

                        var yearTag = $('.md_selectarea').find('.yeartag'),
                                num = ~~yearTag.data('year') + add;
                        yearTag.text(num + '年').data('year', num);
                        this.value.year = num;

                        this.setCheckedDate();

                        this.updateDate(add);
                    },
                    saveCheckedDate: function() {
                        if (this.value.date) {
                            this.lastCheckedDate = {
                                year: this.value.year,
                                month: this.value.month,
                                date: this.value.date
                            }
                        }
                    },
                    setCheckedDate: function() {
                        if (this.lastCheckedDate && this.lastCheckedDate.year == this.value.year && this.lastCheckedDate.month == this.value.month) {
                            this.value.date = this.lastCheckedDate.date;
                        } else {
                            this.value.date = '';
                        }
                    },
                    getDateStr: function(y, m, d) {
                        var dayStr = '';
                        var week = F.getWeekInMonth(y, m);
                        var lastMonthDays = F.getDaysInMonth(y, m - 1);
                        for (var j = week - 1; j >= 0; j--) {
                            dayStr += '<li class="prevdate" data-day="' + (lastMonthDays - j) + '">' + (lastMonthDays - j) + '</li>';
                        }
                        var currentMonthDays = F.getDaysInMonth(y, m);
                        var startDay = 1,
                                endDay = currentMonthDays,
                                thisDate = new Date(y, m, d),
                                firstDate = new Date(y, m, 1);
                        lastDate = new Date(y, m, currentMonthDays),
                                minDateDay = option.minDate.getDate();


                        if (option.minDate > lastDate) {
                            startDay = currentMonthDays + 1;
                        } else if (option.minDate >= firstDate && option.minDate <= lastDate) {
                            startDay = minDateDay;
                        }

                        if (option.maxDate) {
                            var maxDateDay = option.maxDate.getDate();
                            if (option.maxDate < firstDate) {
                                endDay = startDay - 1;
                            } else if (option.maxDate >= firstDate && option.maxDate <= lastDate) {
                                endDay = maxDateDay;
                            }
                        }

                        for (var i = 1; i < startDay; i++) {
                            dayStr += '<li class="disabled" data-day="' + i + '">' + i + '</li>';
                        }
                        for (var j = startDay; j <= endDay; j++) {
                            var current = '';
                            if (y == this.value.year && m == this.value.month && d == j) {
                                current = 'current';
                            }
                            dayStr += '<li class="' + current + '" data-day="' + j + '">' + j + '</li>';
                        }
                        for (var k = endDay + 1; k <= currentMonthDays; k++) {
                            dayStr += '<li class="disabled" data-day="' + k + '">' + k + '</li>';
                        }

                        var nextMonthStartWeek = (currentMonthDays + week) % 7;
                        if (nextMonthStartWeek !== 0) {
                            for (var i = 1; i <= 7 - nextMonthStartWeek; i++) {
                                dayStr += '<li class="nextdate" data-day="' + i + '">' + i + '</li>';
                            }
                        }

                        return dayStr;
                    },
                    updateDate: function(add) {
                        var dateArea = $('.md_datearea.in');
                        if (add == 1) {
                            var c1 = 'out_left';
                            var c2 = 'out_right';
                        } else {
                            var c1 = 'out_right';
                            var c2 = 'out_left';
                        }
                        var newDateArea = $('<ul class="md_datearea ' + c2 + '"></ul>');
                        newDateArea.html(this.getDateStr(this.value.year, this.value.month, this.value.date));
                        $('.md_body').append(newDateArea);
                        setTimeout(function() {
                            newDateArea.removeClass(c2).addClass('in');
                            dateArea.removeClass('in').addClass(c1);
                        }, 0);

                    },
                    refreshView: function() {
                        if (this.input.hasClass('input-group')) {
                            var initVal = this.input.children('input').val();
                        } else {
                            var initVal = this.input.val();
                        }
                        var date = null;
                        if (initVal) {
                            var arr = initVal.split('-');
                            date = new Date(arr[0], arr[1] - 1, arr[2]);
                        } else {
                            date = new Date();
                        }
                        var y = this.value.year = date.getFullYear(),
                                m = this.value.month = date.getMonth(),
                                d = this.value.date = date.getDate();
                        $('.yeartag').text(y).data('year', y);
                        $('.monthtag').text(F.getMonth(m) + '月').data('month', m);
                        var dayStr = this.getDateStr(y, m, d);
                        $('.md_datearea').html(dayStr);
                    },
                    input: null,
                    initListeners: function() {
                        var _this = this;
                        input.on('click', function() {
                            _this.input = $(this);
                            if ($('.md_mask').length) {
                                _this._hidePanel();
                            } else {
                                _this.renderHTML();
                                var panel = $('.md_panel'),
                                        mask = $('.md_mask');
                                _this.afterShowPanel(mask, panel);
                                setTimeout(function() {
                                    _this._showPanel();
                                }, 50);
                            }
                        });
                    },
                    saveValueToInput: function() {
                        var _this = this;
                        var monthValue = ~~_this.value.month + 1;
                        if (monthValue < 10) {
                            monthValue = '0' + monthValue;
                        }
                        var dateValue = _this.value.date;
                        if (dateValue === '') {
                            dateValue = _this.value.date = 1;
                        }
                        if (dateValue < 10) {
                            dateValue = '0' + dateValue;
                        }
                        if (_this.input.hasClass('input-group')) {
                            _this.input.children('input').val(_this.value.year + '-' + monthValue + '-' + dateValue);
                            _this.input.children('input').trigger('input');
                        } else {
                            _this.input.val(_this.value.year + '-' + monthValue + '-' + dateValue);
                            _this.input.trigger('input');
                        }
                        _this._hidePanel();
                    },
                    afterShowPanel: function(mask, panel) {
                        var _this = this;
                        mask.on('click', function() {
                            _this._hidePanel();
                        });
                        panel.delegates({
                            '.change_month': function() {
                                var add = $(this).hasClass('md_next') ? 1 : -1;
                                _this._changeMonth(add);
                            },
                            '.change_year': function() {
                                var add = $(this).hasClass('md_next') ? 1 : -1;
                                _this._changeYear(add);
                            },
                            '.out_left, .out_right': {
                                'webkitTransitionEnd': function() {
                                    $(this).remove();
                                }
                            },
                            '.md_datearea li': function() {
                                var $this = $(this);
                                if ($this.hasClass('disabled')) {
                                    return;
                                }
                                _this.value.date = $this.data('day');
                                var add = 0;
                                if ($this.hasClass('nextdate')) {
                                    add = 1;
                                } else if ($this.hasClass('prevdate')) {
                                    add = -1;
                                }
                                if (add !== 0) {
                                    _this._changeMonth(add, _this.value.date);
                                } else {
                                    $this.addClass('current').siblings('.current').removeClass('current');
                                    _this.saveValueToInput();
                                }
                            },
                            '.md_cancel': function() {
                                _this._hidePanel();
                            },
                            '.md_ok': function() {
                                _this.saveValueToInput();
                            }
                        });
                    }
                };
                mdater.init();
            }
        })(window.Zepto || window.jQuery);

css

        a {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-tap-highlight-color: transparent;
        }
        .md_mask {
            width: 100%;
            height: 100%;
            -moz-transition: opacity .5s linear 0s;
            -webkit-transition: opacity .5s linear 0s;
            -o-transition: opacity .5s linear 0s;
            -ms-transition: opacity .5s linear 0s;
            transition: opacity .5s linear 0s;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            visibility: hidden;
            background: #000;
            opacity: 0;
            z-index: 1000;
        }
        .md_mask.show {
            visibility: visible;
            opacity: 0.25;
        }
        .md_panel {
            -moz-transition: -moz-transform .3s ease-in-out 0s;
            -ms-transition: -ms-transform .3s ease-in-out 0s;
            -webkit-transition: -webkit-transform .3s ease-in-out 0s;
            -o-transition: -o-transform .3s ease-in-out 0s;
            transition: transform .3s ease-in-out 0s;
            -ms-transform: translate3d(0, -100%, 0);
            -moz-transform: translate3d(0, -100%, 0);
            -webkit-transform: translate3d(0, -100%, 0);
            -o-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
            position: fixed;
            /*bottom: 0;*/
            left: 0;
            width: 100%;
            height: auto;
            z-index: 1100;
            background-color: #F7F7F7;
            font-family: Tahoma, arial, verdana, sans-serif;
            -webkit-user-select: none;
        }
        .md_panel.show {
            -ms-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        .md_panel a {
            text-decoration: none;
        }
        .md_selectarea {
            display: inline-block;
            width: 50%;
            position: relative;
        }
        .md_head {
            height: 40px;
            line-height: 40px;
        }
        .md_body {
            position: relative;
            height: 268px;
        }
        .md_headtext {
            display: inline-block;
            width: 100%;
            text-align: center;
            font-size: 1.125em;
            color: #333;
        }
        .md_prev,
        .md_next {
            position: absolute;
            top: 0;
            font-family: arial;
            font-size: 1.6em;
            display: inline-block;
            width: 40px;
            height: 40px;
            text-align: center;
        }
        .md_prev {
            left: 0;
        }
        .md_next {
            right: 0;
        }
        .md_weekarea {
            margin: 0;
            padding: 0;
            list-style-type: none;
            overflow: hidden;
        }
        .md_weekarea li, .md_datearea li {
            display: inline-block;
            float: left;
            width: 14.2857%;
            font-size: .8125em;
            font-weight: 400;
            text-align: center;
            line-height: 3.31em;
        }
        .md_weekarea li, .md_prev, .md_next {
            color: #5b5b5b;
        }
        .md_datearea {
            position: absolute;
            width: 100%;
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            -webkit-transition: -webkit-transform .2s ease-in-out 0s;
            -webkit-transform: translate3d(0, 0, 0);
        }
        .md_datearea li.current {
            background-color: #007aff;
            color: #FFF;
            border-radius: 4px;
        }
        .md_datearea li span {
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        .md_datearea li span.current {
            background-color: #007aff;
            color: #FFF;
        }
        .md_foot {
            margin-top: 0.5em;
            margin-bottom: 1em;
            text-align: center;
        }
        .md_ok, .md_cancel {
            display: -moz-inline-stack;
            display: inline-block;
            *display: inline;
            *zoom: 1;
            width: 9em;
            height: 2.5em;
            line-height: 2.5em;
            border-radius: 4px;
        }
        .md_ok {
            color: #fff;
            background-color: #007aff;
        }
        .md_cancel {
            color: #fff;
            margin-left: 1em;
            background-color: #C6C6C6;
        }
        .out_left {
            /*-webkit-transform: translate3d(-100%, 0, 0);*/
            -webkit-transition: opacity .2s linear;
            -moz-transition: opacity .2s linear;
            -o-transition: opacity .2s linear;
            transition: opacity .2s linear;
            opacity:0;
            filter:alpha(opacity=0);
        }
        .out_right {
            /*-webkit-transform: translate3d(100%, 0, 0);*/
            -webkit-transition: opacity .2s linear;
            -moz-transition: opacity .2s linear;
            -o-transition: opacity .2s linear;
            transition: opacity .2s linear;
            opacity:0;
            filter:alpha(opacity=0);
        }
        .prevdate, .nextdate {
            color: #999;
        }
        .disabled {
            color: #C6C6C6;
        }
        .md_selectarea .md_prev, .md_selectarea .md_next {
            color: #007aff;
        }

调用方式

$('.item-buydate').mdater();

全文完