基于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:'', }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。