基于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 相关文章推荐
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
基于JS设计12306登录页面
Dec 28 Javascript
Vue.js系列之项目搭建(1)
Jan 03 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
javascript实现拼图游戏
Jan 29 Javascript
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 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
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
Python和php通信乱码问题解决方法
2014/04/15 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python探索之Metaclass初步了解
2017/10/28 Python
python 接收处理外带的参数方法
2018/12/03 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
经济信息管理专业大学生求职信
2013/09/27 职场文书
音乐表演专业毕业生求职信
2013/10/14 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
大学毕业生个人自荐信范文
2014/01/08 职场文书
会计电算化毕业生自荐信
2014/03/03 职场文书
西式结婚主持词
2014/03/14 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
详解PyTorch模型保存与加载
2022/04/28 Python