基于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 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
js跑步算法的实现代码
Dec 04 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
微信小程序实现日历效果
Dec 28 Javascript
ES6基础之默认参数值
Feb 21 Javascript
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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
javascript时间函数大全
2014/06/30 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python