Angularjs与bootstrap.datetimepicker结合实现日期选择器

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>