基于angular实现三级联动的生日插件

写了一个生日联动插件具体的效果是这样的：

具体的数据

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

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:'',
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。