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


Posted in Javascript onMay 12, 2017

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

具体的数据

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

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

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

Javascript 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
vue.js中mint-ui框架的使用方法
May 12 #Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 #Javascript
微信小程序之数据双向绑定与数据操作
May 12 #Javascript
Flask中获取小程序Request数据的两种方法
May 12 #Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 #Javascript
微信小程序 支付功能实现PHP实例详解
May 12 #Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 #Javascript
You might like
WHOIS类的修改版
2006/10/09 PHP
PHP入门
2006/10/09 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
Python函数和模块的使用总结
2019/05/20 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
Django配置跨域并开发测试接口
2020/11/04 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
公司会计岗位职责
2014/02/13 职场文书
留学推荐信范文
2014/05/10 职场文书
创优争先心得体会
2014/09/11 职场文书
商超业务员岗位职责
2015/02/13 职场文书