欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-20 15:01:28
写了一个生日联动插件具体的效果是这样的: 具体的数据 我取得数据是今年的数据,如果是想要做三级联动的日期插件,改一下时间就好了 var app=angular.mod...

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

具体的数据

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

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

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