http://www.lovelucy.info/angularjs-best-practices.html

http://damoqiongqiu.iteye.com/blog/1917971

http://www.itnose.net/detail/6144038.html

https://github.com/shyamseshadri/angularjs-book

2015-10-23

研究几日后，找到答案：

<!DOCTYPE html>

<html lang="en" ng-app="ProductList">

    <head>

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <meta charset="utf-8" />

        <title>Angularjs与bootstrap.datetimepicker结合实现日期选择器</title>

        <link rel="stylesheet" href="../../assets/css/bootstrap.css" />

         <link rel="stylesheet" href="../../assets/css/bootstrap-timepicker.css" type="text/css"></link>

   </head>

  <body ng-controller="productListController">

        <div class="widget-box" ng-repeat="edu in edus  | filter:q as results">

            <div class="form-group">

                <input class="input-medium date-picker" datepicker readonly

                    id="id-date-picker-1" type="text" data-date-format="yyyy-mm-dd"

                    placeholder="" ng-model="edu.begindate" />

            </div>

            <button ng-click="saveEducation(edu);" >保存

            </button>

            <hr/>

        </div>

<script src="../../assets/js/jquery.js"><!--basic样式-->

<script src="../../assets/js/bootstrap.js"></script><!--basic样式-->

<script src="../../assets/js/date-time/bootstrap-datepicker.js"></script><!-- 日期选择器必须 -->

<script src="../../frameworks/angular.min.js"></script>

<script>

    var productListApp = angular.module('ProductList', []);

      /*自定义指令datepicker，用于员工背景——教育经历、工作经历、家庭关系中日期数据修改时的双向绑定*/

    productListApp.directive('datepicker', function() {

                 return {

                  restrict: 'A',

                  require: '?ngModel',

                  // This method needs to be defined and passed in from the

                  // passed in to the directive from the view controller

                  scope: {

                    select: '&'        // Bind the select function we refer to the right scope

                  },

                  link: function(scope, element, attrs, ngModel) {

                       if (!ngModel) return;

                    var optionsObj = {};

                    console.log("directive~~~~~"+JSON.stringify( ngModel));

                    var updateModel = function(dateTxt) {

                      scope.$apply(function () {

                        // Call the internal AngularJS helper to

                        // update the two way binding

                        ngModel.$setViewValue(dateTxt);

                      });

                      console.log("after ngModel~~~~~"+JSON.stringify( ngModel));

                    };

                    optionsObj.onSelect = function(dateTxt, picker) {

                      updateModel(dateTxt);

                      if (scope.select) {

                        scope.$apply(function() {

                          scope.select({date: dateTxt});

                        });

                      }

                    };

                    ngModel.$render = function() {

                      // Use the AngularJS internal 'binding-specific' variable

                      element.datepicker('setDate', ngModel.$viewValue || '');

                    };

                    element.datepicker(optionsObj);

                  }

                };

              });

    productListApp.controller('productListController', function($scope, $http) {

        var id= 928;

        //查看员工背景资料

        /*$http({

            method : 'POST',

            url : '/omss/viewEmpBackgroudById?id='+id

        }).success(function(data, status, headers, config) {

            $scope.status = status;

            if (data.length != 0) {

                $scope.employeeBg = (data[0]);

                console.log("员工背景data："+JSON.stringify(data))

                //循环多个工作经历

                $scope.edus=(data[0]).eduList;

            }

        }).error(function(data, status, headers, config) {

            $scope.data = data || "Request failed";

            $scope.status = status;

            $scope.tips = '对不起，您的网络情况不太稳定。';

        });*/

        $scope.edus=[

                    {

                        "badge": "",

                        "begindate": "2015-10-02",

                        "edutype": "3",

                        "enddate": "2015-10-15",

                        "id": "9023",

                        "major": "电子商务",

                        "schoolname": "广大",

                        "sid": "22F92C8D81144CDFE050007F01006C3D",

                        "studytype": ""

                    },

                    {

                        "badge": "",

                        "begindate": "2015-10-01",

                        "edutype": "3",

                        "enddate": "2015-10-10",

                        "id": "9023",

                        "major": "机械自动化",

                        "schoolname": "北大",

                        "sid": "23267E58D5F902D7E050007F01002EF9",

                        "studytype": ""

                    }

                ];

        $scope.saveEducation = function(edu) {

                console.log("edu.begindate........."+edu.begindate);

        }

  });

</script>

</body>

</html>

Angularjs与bootstrap.datetimepicker结合实现日期选择器的更多相关文章

  1. 基于bootstrap模态框的日期选择器

    近来由于工作需求,以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器,能够满足多样的需求,目前处于第一个版本,后续可能会继续更新.废话不多说,直接进入制作过程. 首先,需 ...

  2. bootstrap datetimepicker 日期插件超详细使用方法

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  3. 日期选择器（Query+bootstrap和js两种方式）

    日期选择是在下拉列表中选择年.月.日,年显示前后的五年,12个月,日就是有30.31.29.28天的区别,随着月份的变而变 一.js方式的日期选择 (1)首先就是三个下拉列表了,点击年.月.日显示列表 ...

  4. 模块：（日期选择）jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器

    一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...

  5. bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装

    1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...

  6. bootstrap datetimepicker 在 angular 项目中的运用

    datetimepocker 是一个日期时间选择器,bootstrap datetimepicker 是 bootstrap 日期时间表单组件.访问 bootstrap-datetimepicker  ...

  7. bootstrap datetimepicker的参数解释

    使用bootstrap datetimepicker(日期时间选择器)的过程中,发现中文参数说明和英文参数说明严重不符,所以结合自己使用的情况和英文参数说明,做了如下翻译. $(".form ...

  8. Android自己定义DataTimePicker（日期选择器）

    Android自己定义DataTimePicker(日期选择器)  笔者有一段时间没有发表关于Android的文章了,关于Android自己定义组件笔者有好几篇想跟大家分享的,后期会记录在博客中.本篇 ...

  9. 用Jquery做一个时间日期选择器

    今天我们就用Jquery做一个时间日期选择器,当打开网页时,文本框里面显示的是当前的日期,点击文本框可以出现年.月.日的下拉菜单,并且可以选择,会根据年份的选择判断是否是闰年,从而改变二月的天数,闰年 ...

随机推荐

  1. linux 下 zip unzip压缩与解压

    注:*压缩成限.zip格式文件 常用解压缩: [root@mysql test]# unzip -o test.zip -d tmp/ 将压缩文件test.zip在指定目录tmp下解压缩,如果已有相同 ...

  2. mysql数据表分表策略（转）

    mysql分表方法: 方法一. 做数据库集群! 主从数据库 双向热备份(或一对多的数据库实时备份策略),这样可将数据库查询分摊到几个服务器去(可跟服务器负载均衡结合起来架构) 优点:扩展性好,没有多个 ...

  3. [整理]VS2013常用插件

    VS2013常用插件 (工欲善其事,必先利其器.VS2013全攻略(技巧,快捷键,插件)[http://developer.51cto.com/art/201404/437282_all.htm] 代 ...

  4. [译]了解AngularJS $resource

    原文: https://learnable.com/books/angularjs-novice-to-ninja/preview/understanding-angularjs-resource-e ...

  5. Excel 使用CHIINV函数和GAMMA.DIST函数绘制卡方分布

    1.使用CHIINV(概率,自由度),在Excel中绘制卡方分布. 若n个独立的随机变量均服从标准正态分布,则这n个随机变量的平方和构成一新的随机变量,其分布规律称为服从自由度为ν 的χ2分布. 2. ...

  6. visual studio2010 “类视图”和“对象浏览器”图标

    “类视图”和“对象浏览器”显示一些图标,这些图标表示代码实体,例如命名空间.类.函数和变量. 下表以图文并茂的形式说明了这些图标. 图标 说明 图标 说明 namespace 方法或函数 类 运算符 ...

  7. superF12

    superF12是开发内嵌ie内核的桌面客户端时的一个调试工具

  8. BNR Android Demo学习笔记（一）——CrimeIntent

    开发环境:win7,Android Studio 1.2, 1.Model Crime,数据模型,每个Crime有一个UUID作为唯一标识. package tina.criminalintent; ...

  9. WPF:依赖属性的应用

    依赖属性与一般属性相比,提供了对资源引用.样式.动画.数据绑定.属性值继承.元数据重载以及WPF设计器的继承支持功能的支持. 下面的这个Demo来自<葵花宝典--WPF自学手册>. 1.M ...

  10. MySQL监控系统MySQL MTOP的搭建（转VIII）

    MySQLMTOP是一个由Python+PHP开发的MySQL企业级监控系统.系统由Python实现多进程数据采集和告警,PHP实现WEB展示和管理.最重要是MySQL服务器无需安装任何Agent,只 ...