Question

我使用以下库，

Angularjs
boostrap
datepair https://jonthornton.github.io/Datepair.js/
jQuery timepicker

我正在建立请假申请，员工可以通过选择开始日期，开始时间，结束时间，结束日期来安排休假。我使用Jon Thornton的约会对象来自动填充结束日期和结束时间。我已经成功地完成了所有工作。

当数据库中预先存在字段值时，我遇到了使用范围填充日历字段的问题。

代码示例。

  <body ng-app="app">
    <div ng-controller="AppCtrl">
      <div id="requestForm" xp-datepair>
                <input type="text" class="date start" ng-model="startDate" xp-datepicker required /> 
                <label>Start Time</label> 
                <input type="text" class="time start" ng-model="startTime" xp-timepicker required /> 
                <label>End Time</label>
                <input type="text" class="time end" ng-model="endTime" xp-timepicker required /> 
                <label>End Date</label>
                <input type="text" class="date end" ng-model="endDate" xp-datepicker required />
    </div>
    </div>
  </body>

js

angular
  .module('xp-timepicker', [])
  .directive('xpTimepicker', timepicker)
  .directive('xpDatepicker', datepicker)
  .directive('xpDatepair', datepair);

function datepair() {   
    return {
      restrict: 'A',
      link: function (scope, element, attrs) { 
        new Datepair(element[0]);
      }
    }; 
}

function timepicker() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.timepicker({
        showDuration: true,
        timeFormat: 'g:ia'
      });
    }
  };
}

function datepicker() {
    return {
        restrict : 'A',
        link : function(scope, element, attrs) {
            element.datepicker({
                'format' : 'MM/dd/yyyy',
                'autoclose' : true
            });
        }
    };
}

angular
  .module('app', ['xp-timepicker'])
  .controller('AppCtrl', function ($scope) {
    $scope.startDate = '01/12/2016';
    $scope.endDate = '01/12/2016';

    $scope.startTime = '7:00pm';
    $scope.endTime = '8:00pm';
  });

我应该看到填充了2016年12月1日的日历字段，但它似乎是空白的。然而，时间似乎完美无缺。有趣的是，如果我填充输入值而不是ng-model，它似乎可行。

plunker example。

无法使用angularjs填充boostrap日历

0 个答案: