基于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 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
Javascript 生成指定范围数值随机数
Jan 09 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
javascript处理table表格的代码
Dec 06 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
javascript数组详解
Oct 22 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 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
建立动态的WML站点(三)
2006/10/09 PHP
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
jquery中this的使用说明
2010/09/06 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
python自动化测试实例解析
2014/09/28 Python
Python中集合类型(set)学习小结
2015/01/28 Python
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
Python网站验证码识别
2016/01/25 Python
你应该知道的python列表去重方法
2017/01/17 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
给校长的建议书
2014/03/12 职场文书
公司新年寄语
2014/04/04 职场文书
品牌推广策划方案
2014/05/28 职场文书
财务会计专业自荐书
2014/06/30 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
八年级作文之我的母亲
2019/12/10 职场文书