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"> {{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"> {{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;
}
效果:
希望能够在实际工作中能够给大家提供到帮助,共同学习,共同进步!