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选择器之层级过滤选择器详解
Jan 27 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
html5 canvas 详细使用教程
Jan 20 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
微信小程序实现左滑删除效果
Nov 18 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 screw加密php源代码
2013/06/20 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
php检测文本的编码
2015/07/26 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
基于树莓派的语音对话机器人
2019/06/17 Python
通过实例学习Python Excel操作
2020/01/06 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
pandas分批读取大数据集教程
2020/06/06 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
营销总经理岗位职责范本
2014/09/02 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
法学专业求职信范文
2015/03/19 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android
无线电通信名词解释
2022/02/18 无线电