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 相关文章推荐
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
javascript中闭包closure的深入讲解
Mar 03 Javascript
基于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
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
使用php计算排列组合的方法
2013/11/13 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
offsetParent 算法分析
2010/04/05 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
jQuery实现的五子棋游戏实例
2015/06/13 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
宣传部部长竞选演讲稿
2014/04/26 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
七年级数学教学反思
2016/02/17 职场文书