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 相关文章推荐
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 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
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
js继承实现方法详解
2016/12/16 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python生成随机MAC地址
2015/03/10 Python
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
国贸专业的职业规划范文
2014/01/23 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
诉讼授权委托书
2014/10/15 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis