jquery-ui中datepicker插件只选年月不选具体日期
演示下：
所需js、css如下：
js：jquery.min.js、jquery-ui.min.js、datepicker-zh-CN.js实现具体到日期，再引入：monthpicker.js实现只能选择年月。使用angular.js实现text文本双向绑定.
css：jquery-ui.min.css、bootstrap.min.css、monthpicker.css。
上代码：
<!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.js
/* 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: "<上月", nextText: "下月>", 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.js
(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.css
.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; }
git地址：地址
