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禁止回车提交表单的示例代码
Dec 23 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
整理Javascript流程控制语句学习笔记
Nov 29 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
基于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 保留小数点
2009/04/21 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
基于Vue实现图书管理功能
2017/10/17 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
python去掉行尾的换行符方法
2017/01/04 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
python 读取、写入txt文件的示例
2020/09/27 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
行政助理求职自荐信
2013/10/26 职场文书
财务管理职业生涯规划范文
2013/12/27 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
会计辞职信范文
2014/01/15 职场文书
骨干教师考核方案
2014/05/09 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
少年雷锋观后感
2015/06/10 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
Python基础之Socket通信原理
2021/04/22 Python