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

基于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: '生日'+

'{{x}}'+

'{{x}} '+

'{{x}}',

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.getDayArhttp://r=function(day){

shuju.day=[];

for(var i=0; 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

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

js 传入的数据

$scope.birthday={

birthday:1993-01-20,

returnValue:'',

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。