jquery-ui中datepicker插件只選年月不選具體日期

時間 2019-12-07

標籤 jquery datepicker 插件選年具體日期欄目 JQuery 简体版

原文原文鏈接

演示下：javascript

所需js、css以下：css

js：jquery.min.js、jquery-ui.min.js、datepicker-zh-CN.js實現具體到日期，再引入：monthpicker.js實現只能選擇年月。使用angular.js實現text文本雙向綁定.html

css：jquery-ui.min.css、bootstrap.min.css、monthpicker.css。java

上代碼：jquery

<!DOCTYPE html>
<html ng-app="test">

<head>
    <meta charset="UTF-8">
    <title>日期插件</title>
    <script src="js/jquery.min.js" charset="utf-8"></script>
    <script src="jquery-ui/jquery-ui.min.js" charset="utf-8"></script>
    <script src="js/datepicker-zh-CN.js" charset="utf-8"></script>
    <script src="js/angular.js" charset="utf-8"></script>
    <script src="js/monthpicker.js"></script>
    <link href="jquery-ui/jquery-ui.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/monthpicker.css" rel="stylesheet">
    <script type="text/javascript">
        let mod = angular.module('test', []);
        mod.controller('main', function ($scope) {
            $scope.whereMap = {
                time1: '',
                time2: ''
            };
            $("#input1").datepicker({
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                changeYear: true,
                onSelect: function (dataText) {
                    $scope.whereMap.time1 = dataText;
                }
            });
            $scope.timeFocus = function () {
                if ($('.monthpicker')) {
                    $(".monthpicker").remove();
                }
                var y;
                if ($scope.whereMap.time2) {
                    var _time = $scope.whereMap.time2.split('-');
                    y = _time[0];
                }
                $('#input2').monthpicker({
                    selectYears: y ? y : '',
                    onMonthSelect: function (m, y) {
                        m = (parseInt(m) + 1);
                        if (m.toString().length == 1) {
                            m = '0' + m;
                        }
                        $scope.whereMap.time2 = y + '-' + m;
                        $scope.$apply();
                    }
                });
            }
        });
    </script>
</head>

<body ng-controller="main">
<div class="form-horizontal" style="width: 800px;margin: 90px auto;">
    <div class="form-group">
        <label for="input1" class="col-sm-2 control-label">日期插件1</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input1" placeholder="請選擇時間" ng-model="whereMap.time1"
                   autocomplete="off">
        </div>
    </div>
    <div class="form-group">
        <label for="input2" class="col-sm-2 control-label">日期插件2</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input2" placeholder="請選擇時間" ng-model="whereMap.time2"
                   ng-focus="timeFocus();">
        </div>
    </div>
</div>
</body>

</html>

datepicker-zh-CN.jsgit

/* Chinese initialisation for the jQuery UI date picker plugin. */
/* Written by Cloudream (cloudream@gmail.com). */
( function( factory ) {
    if ( typeof define === "function" && define.amd ) {

        // AMD. Register as an anonymous module.
        define( [ "../widgets/datepicker" ], factory );
    } else {

        // Browser globals
        factory( jQuery.datepicker );
    }
}( function( datepicker ) {

    datepicker.regional[ "zh-CN" ] = {
        closeText: "肯定",
        prevText: "&#x3C;上月",
        nextText: "下月&#x3E;",
        currentText: "今天",
        monthNames: [ "一月","二月","三月","四月","五月","六月",
            "七月","八月","九月","十月","十一月","十二月" ],
        monthNamesShort: [ "一月","二月","三月","四月","五月","六月",
            "七月","八月","九月","十月","十一月","十二月" ],
        dayNames: [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六" ],
        dayNamesShort: [ "週日","週一","週二","週三","週四","週五","週六" ],
        dayNamesMin: [ "日","一","二","三","四","五","六" ],
        weekHeader: "周",
        dateFormat: "yy-mm-dd",
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: true,
        yearSuffix: "年" };
    datepicker.setDefaults( datepicker.regional[ "zh-CN" ] );

    return datepicker.regional[ "zh-CN" ];

} ) );

monthpicker.jsbootstrap

(function ($, undefined) {

    $.fn.monthpicker = function (options) {
        // 獲取當前年份
        var now = new Date().getFullYear(),
            _whYears = [];
        for (var i = now - 10; i < now + 10; i++) {
            _whYears.push(i);
        }
        options.years = _whYears;
        // 獲取當前月份
        var nowMonth = new Date().getMonth() + 1;
        // 月份全部按鈕
        var allButtons = [];
        var months = options.months || ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
            Monthpicker = function (el) {
                this._el = $(el);
                this._init();
                this._render();
                this._renderYears();
                this._renderMonths();
                this._bind();
                allButtons = $('.monthpicker table button');
            };
        Monthpicker.prototype = {
            destroy: function () {
                this._el.off('click');
                this._yearsSelect.off('click');
                this._container.off('click');
                $(document).off('click', $.proxy(this._hide, this));
                this._container.remove();
            },
            _init: function () {
                this._el.html(options.years[0] + '-' + months[0]);
                this._el.data('monthpicker', this);
            },
            _bind: function () {
                this._el.on('click', $.proxy(this._show, this));
                $(document).on('click', $.proxy(this._hide, this));
                this._yearsSelect.on('click', function (e) {
                    e.stopPropagation();
                });
                $('#whSelect').change(function () {
                    var selectYear = $(this).children('option:selected').val();
                    $.each(allButtons, function (i, button) {
                        if (selectYear == now) {
                            if (nowMonth - 1 == i) {
                                button.setAttribute('class', 'nowMonth');
                            } else {
                                button.setAttribute('class', '');
                            }
                        } else {
                            button.setAttribute('class', '');
                        }
                    });
                })
                this._container.on('click', 'button', $.proxy(this._selectMonth, this));
            },
            _show: function (e) {
                e.preventDefault();
                e.stopPropagation();
                this._container.css('display', 'inline-block');
                var currMonth = this._el.attr("month");
                if (currMonth) {
                    $.each(allButtons, function (i, button) {
                        if (button.innerHTML == currMonth) {
                            button.setAttribute('class', 'curr');
                        } else {
                            button.removeAttribute('class', 'curr');
                        }
                    });
                }
                var selectYear = $("#whSelect").children('option:selected').val();
                $.each(allButtons, function (i, button) {
                    if (now == selectYear) {
                        if (nowMonth - 1 == i) {
                            button.classList.add("nowMonth");
                        }
                    } else {
                        button.classList.remove("nowMonth");
                    }
                });
            },
            _hide: function () {
                this._container.css('display', 'none');
            },
            _selectMonth: function (e) {
                var monthIndex = $(e.target).data('value'),
                    month = months[monthIndex],
                    year = this._yearsSelect.val();
                if (this._el.attr('type') == "text") {
                    this._el.attr("value", year + '-' + month);
                } else {
                    this._el.html(year + '-' + month);
                }
                if (options.onMonthSelect) {
                    this._el.attr("month", month);
                    options.onMonthSelect(monthIndex, year);
                }
            },
            _render: function () {
                var boxOffset = this._el.offset(),
                    cssOptions = {
                        display: 'none',
                        position: 'absolute',
                        top: boxOffset.top + this._el.height() + 15,
                        left: boxOffset.left
                    };
                var _dowHeight = $(document).height() - (cssOptions.top);
                if (_dowHeight < 135) {
                    cssOptions.top = boxOffset.top - 135;
                }
                this._id = (new Date).valueOf();
                this._container = $('<div class="monthpicker" id="monthpicker-' + this._id + '">')
                    .css(cssOptions)
                    .appendTo($('body'));
            },
            _renderYears: function () {
                var markup = $.map(options.years, function (year) {
                    if (options.selectYears) {
                        if (options.selectYears == year) {
                            return '<option selected>' + options.selectYears + '</option>';
                        }
                    } else {
                        if (now == year) {
                            return '<option selected>' + year + '</option>';
                        }
                    }
                    return '<option>' + year + '</option>';
                });
                var yearsWrap = $('<div class="years">').appendTo(this._container);
                this._yearsSelect = $('<select id="whSelect">').html(markup.join('')).appendTo(yearsWrap);
            },
            _renderMonths: function () {
                var markup = ['<table>', '<tr>'];
                $.each(months, function (i, month) {
                    if (i > 0 && i % 4 === 0) {
                        markup.push('</tr>');
                        markup.push('<tr>');
                    }
                    markup.push('<td><button data-value="' + i + '">' + month + '</button></td>');
                });
                markup.push('</tr>');
                markup.push('</table>');
                this._container.append(markup.join(''));
            }
        };
        var methods = {
            destroy: function () {
                var monthpicker = this.data('monthpicker');
                if (monthpicker) monthpicker.destroy();
                return this;
            }
        }
        if (methods[options]) {
            return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof options === 'object' || !options) {
            return this.each(function () {
                return new Monthpicker(this);
            });
        } else {
            $.error('Method ' + options + ' does not exist on monthpicker');
        }
    };

}(jQuery));

monthpicker.cssapp

.monthpicker {
  border: 1px solid #c5c5c5;
  padding: .2em .2em 0;
  z-index: 1000;
  background: #fff;
}

.monthpicker .years {
  background-color: #e9e9e9;
  padding: .2em 0;
  border: 1px solid #ddd;
  text-align: center;
}

.monthpicker .years select {
  font-size: 1em;
  width: 70%;
}

.monthpicker .years select:focus {
  outline: none;
}

.monthpicker table {
  border-collapse: collapse;
  table-layout: fixed;
  margin: .4em 0;
}

.monthpicker td {
  padding: .1em;
}

.monthpicker table button {
  width: 100%;
  font-size: .8em;
  padding: .6em;
  cursor: pointer;
  transition: background .2s;
  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: normal;
  color: #454545;
}

.monthpicker table button:hover {
  background: #ededed;
}

.monthpicker table button:focus {
  outline: none;
}

.monthpicker table button.curr,
.monthpicker table button.curr:hover {
  background: #007fff;
  color: #fff;
}

.monthpicker table button.nowMonth,
.monthpicker table button.nowMonth:hover {
  background: #fffa90;
}