基于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 相关文章推荐
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
详解在express站点中使用ejs模板引擎
Sep 21 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
vue el-table实现递归嵌套的示例代码
Aug 14 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实现下载CSS文件中的图片
2015/12/06 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
解密效果
2006/06/23 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
Vue向后台传数组数据,springboot接收vue传的数组数据实例
2020/11/12 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
.NET面试题:什么是反射
2016/09/30 面试题
人事部主管岗位职责
2013/12/26 职场文书
给女朋友的道歉信
2014/01/10 职场文书
旅游网创业计划书
2014/01/31 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
java设计模式--七大原则详解
2021/07/21 Java/Android