当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > 基于angular实现三级联动的生日插件

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

2018年04月26日  | 移动技术网IT编程  | 我要评论

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

具体的数据

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

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网