使用angular写了一个三级联动的生日插件

王者荣耀深似海啊，感觉自己的博客都要长满野草了，最近菁英汇的1.0.2版本已经开发完了，就等着联调，冒烟测试了。写了一个生日联动插件具体的效果是这样的

 

 

具体的数据

我取得数据是今年的数据，如果是想要做三级联动的日期插件，改一下时间就好了

var app=angular.module("dataPicker",[])

 

    app.factory('dataPicker', ['$http', '$q', function ($http, $q) {
        return {
            query: function () {
                var lengthYear=100;
                var dataPicker={
                    month:[],
                    year:[],
                    day:[]
                };
                var data = new Date();
                var nowyear = data.getFullYear();
                for(var i=nowyear,j=0; i>nowyear-lengthYear;i--,j++){
                    dataPicker.year[j]=i;
                }
                for(var i=0;i<=11;i++){
                    if(i<9){
                        dataPicker.month[i]='0'+(i+1);
                    }else{
                        dataPicker.month[i]=String(i+1);
                    }
                }
                return dataPicker;
            }
        }
    }])

 

directive插件的主要内容

app.directive('selectDatepicker', function ($http,dataPicker) {
        return {
            restrict: 'EAMC',
            replace: false,
            scope: {
                birthday: '=birthday'
            },
            transclude: true,
            template: '<span>生日</span>'+
                '<select class="sel_year" ng-model="birY" ng-change="changeYear()"><option ng-repeat="x in yearAll">{{x}}</option></select>'+
                '<select class="sel_month" ng-model="birM" ng-change="changeMonth()"  ng-disabled="birY==\'\'"><option ng-repeat="x in MonthAll">{{x}}</option> </select>'+
                '<select class="sel_day" ng-model="birD"  ng-disabled="birM==\'\'" ng-change="changeDay()"><option ng-repeat="x in DayAll">{{x}}</option></select>',
            link: function (scope, element){
                var arr=[];
                scope.birthday=scope.birthday=='0000-00-00'?"":scope.birthday
                var shuju=dataPicker.query()
                scope.yearAll=shuju.year;
                scope.MonthAll=shuju.month;
                if(scope.birthday){
                    scope.birY=scope.birthday.birthday.split('-')[0];
                    scope.birM=String(scope.birthday.birthday.split('-')[1])
                }else{
                    scope.birY="";
                    scope.birM="";
                }
                scope.getDaysInOneMonth=function(year, month){
                    var month1 = Number(month);
                    month1=parseInt(month1,10)
                    var d= new Date(Number(year),month1,0);
                    return d.getDate();
                }
                scope.getDayArr=function(day){
                    shuju.day=[];
                    for(var i=0; i<day;i++){
                        if(i<9){
                            shuju.day[i]='0'+(i+1)
                        }else{
                            shuju.day[i]=String((i+1));
                        }
                    }
                }
                if(scope.birthday){
                    var day=scope.getDaysInOneMonth(scope.birthday.birthday.split('-')[0],scope.birthday.birthday.split('-')[1]);
                    scope.getDayArr(day)
                    scope.DayAll=shuju.day;
                    scope.birD=scope.birthday.birthday.split('-')[2]
                }
                scope.changeYear=function(){
                    scope.birD="";
                    scope.birM="";
                }
                scope.changeMonth=function(){
                    var day=scope.getDaysInOneMonth(scope.birY,scope.birM);
                    console.log(day)
                    scope.getDayArr(day);
                    scope.DayAll=shuju.day;
                    scope.birD="";
                }
                scope.changeDay=function(){
                    scope.returnDate();
                }
                scope.returnDate=function(){
                    if(!scope.birD||!scope.birY||!scope.birM){
                        scope.birthday.returnValue="";
                    }else{
                        arr[0]=scope.birY;
                        arr[1]=scope.birM;
                        arr[2]=scope.birD;
                        scope.birthday.returnValue=arr.join("-");
                    }
                }
            }
        }
    })
});

 html

 <div select-datepicker birthday="birthday">

 

js 传入的数据

 $scope.birthday={
            birthday:1993-01-20,
            returnValue:'',
}

 

转载于:https://www.cnblogs.com/heyinwangchuan/p/6846433.html