angular中纯js手写--年月--组件

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;
}

效果：

 

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