html部分

<input type="text" readonly class="form-control dib w33" ng-model="$ctrl.select_date1" ng-click="$ctrl.showTrue1()">至
<input type="text" readonly class="form-control dib w33" ng-model="$ctrl.select_date2" ng-click="$ctrl.showTrue2()">
<div class="content_box" style="margin-left:4%" data-ng-init="$ctrl.showTime1()" ng-show="$ctrl.show1"><div class="row"><div class="col-xs-3"><div class="field"><span class="field_label" style="width: 100%;text-align: center;"><select class="select-c" ng-change="$ctrl.change_year1(select_year)" ng-model="$ctrl.select_year1" ng-options="x.id as x.value for x in $ctrl.all_year1"size="10"></select></span></div></div><div class="col-xs-9 mt10"><div class="home-card"><div class="home-item" ng-repeat="month in $ctrl.all_month1 track by $index" ng-click="$ctrl.change_month1(month.value)" ng-model="month.value"ng-class="{true:'active',false:''}[month.value==$ctrl.select_month1]"><div class="home-right"><span><i class="home-hart">&nbsp;{{month.value}}月</i></span></div></div></div><button class="btn-ca pull-right ml10 mr10" ng-click="$ctrl.confirmTo()">确定</button><button class="btn-cc pull-right" ng-click="$ctrl.cancelTo()">取消</button></div></div>
</div>
<div class="content_box" style="margin-left:12% !important" data-ng-init="$ctrl.showTime2()" ng-show="$ctrl.show2"><div class="row"><div class="col-xs-3"><div class="field" style="width: 100%;"><span class="field_label" style="width: 100%;text-align: center;"><select class="select-c" ng-change="$ctrl.change_year2(select_year)" ng-model="$ctrl.select_year2" ng-options="x.id as x.value for x in $ctrl.all_year2"size="10"></select></span></div></div><div class="col-xs-9 mt10"><div class="home-card"><div class="home-item" ng-repeat="month in $ctrl.all_month2 track by $index" ng-click="$ctrl.change_month2(month.value)" ng-model="month.value"ng-class="{true:'active',false:''}[month.value==$ctrl.select_month2]"><div class="home-right"><span><i class="home-hart">&nbsp;{{month.value}}月</i></span></div></div></div><button class="btn-ca pull-right ml10 mr10" ng-click="$ctrl.confirmTo()">确定</button><button class="btn-cc pull-right" ng-click="$ctrl.cancelTo()">取消</button></div></div>
</div>

js部分

var $ctrl = this;$ctrl.show1 = false;$ctrl.show2 = false;$ctrl.data = {select_date1:'',select_date1:'',}var yearY = new Date().getFullYear();var monthM = new Date().getMonth()+1;monthM = monthM < 10 ? ('0'+monthM.toString()): monthM;//  ---------创建日历------------$ctrl.all_year1 = [];$ctrl.all_month1 = [];$ctrl.all_year2 = [];$ctrl.all_month2 = [];$ctrl.showTime1 = function() {//在select中填入年份for(var year = 2012; year < 2095; year++) {var obj_1 = {'value': year, 'id': year}$ctrl.all_year1.push(obj_1);}//在表格中填入月份for(var month = 1; month < 13; month++) {var obj_2 = {'value': month, 'id': month}$ctrl.all_month1.push(obj_2);}//初始化显示 当前年和月$ctrl.show_now()}$ctrl.showTime2 = function() {//在select中填入年份for(var year = 2012; year < 2095; year++) {var obj_1 = {'value': year, 'id': year}$ctrl.all_year2.push(obj_1);}//在表格中填入月份for(var month = 1; month < 13; month++) {var obj_2 = {'value': month, 'id': month}$ctrl.all_month2.push(obj_2);}//初始化显示 当前年和月$ctrl.show_now()}$scope.$on('data', function ($event, params) {params.month = params.month < 10 ? ('0'+params.month.toString()): params.month;$ctrl.select_date1 = params.year + "-" + params.month$ctrl.select_date2 = params.year + "-" + params.month$ctrl.data.select_date1 = $ctrl.select_date1;$ctrl.data.select_date2 = $ctrl.select_date2;$scope.$emit( "month-data",$ctrl.data );$ctrl.select_year1 = yearY;$ctrl.select_month1 = monthM;$ctrl.select_year2 = yearY;$ctrl.select_month2 = monthM;})$ctrl.select_year1 = ''$ctrl.select_month1 = ''$ctrl.select_year2 = ''$ctrl.select_month2 = ''//初始化显示 当前年和月$ctrl.show_now = function() {$ctrl.select_year1 = yearY;$ctrl.select_year2 = yearY;$ctrl.select_month1 = monthM;$ctrl.select_month2 = monthM;$ctrl.select_date1 = $ctrl.select_year1 + "-" + $ctrl.select_month1$ctrl.select_date2 = $ctrl.select_year2 + "-" + $ctrl.select_month2}$ctrl.change_month1 = function(month){$ctrl.select_month1 = ""month = month < 10 ? ('0'+month.toString()): month; $ctrl.select_month1 = month$ctrl.select_date1 = $ctrl.select_year1 + "-" + $ctrl.select_month1}$ctrl.change_year1 = function(year){$ctrl.select_year = ""$ctrl.select_year = year$ctrl.select_date1 = $ctrl.select_year1 + "-" + $ctrl.select_month1}$ctrl.change_month2 = function(month){$ctrl.select_month2 = ""month = month < 10 ? ('0'+month.toString()): month; $ctrl.select_month2 = month$ctrl.select_date2 = $ctrl.select_year2 + "-" + $ctrl.select_month2}$ctrl.change_year2 = function(year){$ctrl.select_year = ""$ctrl.select_year = year$ctrl.select_date2 = $ctrl.select_year2 + "-" + $ctrl.select_month2}/** -----------日历结束--------------- */ // 显示$ctrl.showTrue1 = function () {$ctrl.show1 = !$ctrl.show1;$ctrl.show2 = false;}$ctrl.showTrue2 = function () {$ctrl.show2 = !$ctrl.show2;$ctrl.show1 = false;}// 确定$ctrl.confirmTo = function () {$ctrl.show2 = false;$ctrl.show1 = false;if($ctrl.select_year1>$ctrl.select_year2 ||                 $ctrl.select_year1==$ctrl.select_year2&&$ctrl.select_month1>$ctrl.select_month2){modalService.info1({title:'提示',content:'起始日期不能大于结束日期',size:'sm',type:'confirm'})$ctrl.select_date2 = yearY+'-'+monthM;$ctrl.select_date1 = yearY+'-'+monthM;$ctrl.select_year1 = yearY;$ctrl.select_month1 = monthM;$ctrl.select_year2 = yearY;$ctrl.select_month2 = monthM;}$ctrl.data.select_date1 = $ctrl.select_date1;$ctrl.data.select_date2 = $ctrl.select_date2;$scope.$emit( "month-data",$ctrl.data );}// 取消$ctrl.cancelTo = function () {$ctrl.show2 = false;$ctrl.show1 = false;$ctrl.select_year1 = yearY;$ctrl.select_month1 = monthM;$ctrl.select_year2 = yearY;$ctrl.select_month2 = monthM;$ctrl.select_date2 = yearY+'-'+monthM;  $ctrl.select_date1 = yearY+'-'+monthM;$ctrl.data.select_date1 = $ctrl.select_date1;$ctrl.data.select_date2 = $ctrl.select_date2;$scope.$emit( "month-data",$ctrl.data );}

css部分：

.content_box{position: fixed;margin-top:10px;z-index: 999;background-color: #fff;width: 250px;border:1px solid #E0E0E0;.select-c{background: #fff no-repeat scroll right center;width: 60px;border:none;outline:none;appearance: none;-webkit-appearance: none;-moz-appearance: none;option:checked{background: #1e90ff;}}
}
.home-card {width: 200px;overflow:hidden;padding: 5px 0px 5px 20px;display: flex;flex-wrap: wrap;.home-item {width:calc(25% - 1px);padding:5px 0px 5px 5px;margin-right: 5px;margin-bottom: 5px;display: flex;align-items: center;background: #fff;&:nth-child(4) {margin-right: 0;}.home-right {display: flex;flex-direction: column;justify-content: center;align-items: flex-start;.home-hart {font-size:14px;font-family: Arial, Helvetica, sans-serif}}}.home-item:hover{background-color: #1e90ff;color:#fff;}.active{background-color: #1e90ff;color:#fff;}
}
.btn-cc{background-color: #999999;border: 0;color: #fff;border-radius: 5px;margin-top:-5px;outline:none;
}
.btn-ca{background-color: #fd8900;border: 0;color: #fff;border-radius: 5px;margin-top:-5px;outline:none;
}

效果：

 

希望能够在实际工作中能够给大家提供到帮助，共同学习，共同进步！