Angularjs 手写日历的实现代码(不用插件)


Posted in Javascript onOctober 18, 2017

本文介绍了Angularjs 手写日历的实现代码(不用插件),分享给大家,具体如下:

效果:

Angularjs 手写日历的实现代码(不用插件)

Html:

<div class="plan_content_box" data-ng-init="showTime()">
    <div class="field" style="width: 100%;">
     <span class="field_label" style="width: 100%;text-align: center;">
      <select id="time_year" ng-change="change_year(select_year)" ng-model="select_year" ng-options="x.id as x.value for x in all_year">
       <!--<option value="1900">1900</option>-->
      </select> 年
      <select id="time_month" ng-change="change_month(select_month)" ng-model="select_month" ng-options="x.id as x.value for x in all_month">
 
      </select> 月 {{active_day}} 日
     </span>
    </div>
    
    <table class="table table-bordered hover_td" style="border: none;">
     <tr id="float_td">
      <td>星期日</td>
      <td>星期一</td>
      <td>星期二</td>
      <td>星期三</td>
      <td>星期四</td>
      <td>星期五</td>
      <td>星期六</td>
      <td ng-repeat="day in days track by $index" ng-click="change_day(day)"
        ng-class="{true:'active',false:''}[day==active_day]" ng-model="day">{{day}}</td>
     </tr>
    </table>
   </div>

js:

//  创建日历
  
  $scope.all_year = [];
  
  $scope.all_month = [];
  $scope.showTime = function() {
   //在select中填入年份
   for(var year = 2016; year < 2050; year++) {
    var obj_1 = {'value': year, 'id': year}
    $scope.all_year.push(obj_1);
   }
   
   //在select中填入月份
   for(var month = 1; month < 13; month++) {
    var obj_2 = {'value': month, 'id': month}
    $scope.all_month.push(obj_2);
   }
   console.log($scope.all_year)
   //初始化显示 当前年和月
   $scope.show_now()
   
   
  }
  //当select的选中的option发送变化的触发的事件
  $scope.change_year = function(data) {
   $scope.showDays(data, $scope.select_month)
  }
  $scope.change_month = function(data) {
   $scope.showDays($scope.select_year, data)
   
  }

  //返回指定的月份的天数 月份1-12
  $scope.calDays = function (year, month) {
   return new Date(year, month, 0).getDate();
  }

  $scope.days = [];
  //展示指定的年和月的所有日期
  $scope.showDays = function(year, month) {
   $scope.days = [];
   
   //得到表示指定年和月的1日的那个时间对象
   var date = new Date(year, month - 1, 1);
   
   
   //1.先添加响应的空白的li:这个月1号是星期几,就添加几个空白的li
   var dayOfWeek = date.getDay(); //得到1日是星期几
   for(var i = 0; i < dayOfWeek; i++) {
    $scope.days.push("");
   }
   
   
   //计算一个月有多少天
   var daysOfMonth = $scope.calDays(year, month);
   //2. 从1号开始添加li
   for(var i = 1; i <= daysOfMonth; i++) {
    $scope.days.push(i)
   }
  }
  
  $scope.active_day = ''
  $scope.select_year = ''
  $scope.select_month = ''
  //初始化显示 当前年和月
  $scope.show_now = function() {
   var now = new Date();
//   $("#time_year").val(now.getFullYear());
//   $("#time_month").val(now.getMonth() + 1); 
   $scope.active_day = now.getDate();
   $scope.select_year = now.getFullYear();
   $scope.select_month = now.getMonth() + 1;
   $scope.showDays($scope.select_year, $scope.select_month)
  }
  
  
  
  $scope.change_day = function(day){
   $scope.active_day = ""
   $scope.active_day = day
  }

  // 以上是创建日历

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

Javascript 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
js格式化时间的简单实例
Nov 27 Javascript
EsLint入门学习教程
Feb 17 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
基于JavaScript表单脚本(详解)
Oct 18 #Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 #Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 #Javascript
BACKBONE.JS 简单入门范例
Oct 17 #Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 #Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 #Javascript
JS实现div模块的截图并下载功能
Oct 17 #Javascript
You might like
Discuz! Passport 通行证整合
2008/03/27 PHP
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP 代码规范小结
2012/03/08 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
php支付宝接口用法分析
2015/01/04 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
PHP Ajax JavaScript Json获取天气信息实现代码
2016/08/17 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
js同时按下两个方向键
2007/12/01 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
微信小程序上传图片实例
2018/05/28 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python实现的矩阵类实例
2017/08/22 Python
python多维数组切片方法
2018/04/13 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python