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

2024-04-05 23:49•服务端开发•阅读 4771

2015-10-23

研究几日后，找到答案：

<!DOCTYPE html>
<html  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
                     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>