Angular 和 Datepair 不会很好玩答案

【问题标题】：Angular and Datepair won't play niceAngular 和 Datepair 不会很好玩
【发布时间】：2014-03-18 17:08:15
【问题描述】：

这几天我一直在努力解决这个问题，我认为是时候求助于你们这些好人了。好的，我正在构建一个使用 Angular + datepair/datepicker/timepicker 的日历应用程序。我有一个开始时间字段和一个结束时间字段。如果用户无法选择开始时间之前的结束时间，那就太好了。在Timepicker website 上，最后一个示例正是我想要做的，但我似乎无法让它与 Angular 一起工作。

这是 timepicker 网站上的示例：

<p id="datepairExample">
    <input type="text" class="date start" />
    <input type="text" class="time start" /> to
    <input type="text" class="time end" />
    <input type="text" class="date end" />
</p>

<script type="text/javascript" src="jquery.datepair.js"></script>
<script>
    // initialize input widgets first
    $('#datepairExample .time').timepicker({
        'showDuration': true,
        'timeFormat': 'g:ia'
    });

    $('#datepairExample .date').datepicker({
        'format': 'yyyy-m-d',
        'autoclose': true
    });

    // initialize datepair
    $('#datepairExample').datepair();
</script>

这是我的代码。

Angular 指令：

viasam.directive('datepicker', function(){
  return {
    restrict: 'A',
    link: function ($scope, $element) {
      $element.datepicker({
        format: 'd/m/yyyy',
        autoclose: true,
        todayHighlight: true
      });
    }
  }
});

viasam.directive('timepicker', function(){
  return {
    restrict: 'A',
    link: function ($scope, $element) {
      $element.timepicker({
        'minTime': '8:00am',
        'maxTime': '8:00pm',
        'timeFormat': 'g:i A',
        'showDuration': true,
        'scrollDefaultNow': true
      });
    }
  }
});

viasam.directive('datepair', function(){
  return {
    restrict: 'A',
    link: function ($scope, $element) {
      $element.datepair({
        'defaultDateDelta': 0,
        'defaultTimeDelta': 7200000
      });
    }
  }
});

形式：

<div id="datepair">

  <%= form_tag blocks_create_es_path, :class => "form-horizontal" do %>

    <div datepair>

      <%= text_field_tag(:start_day, nil, class: 'date start datepicker form-control input-sm', :datepicker => 'datepicker') %>


      <%= text_field_tag(:start_hour_and_minute, nil, class: 'start form-control input-sm', :timepicker => 'timepicker') %>

      <%= text_field_tag(:end_hour_and_minute, nil, class: 'end form-control input-sm', :timepicker => 'timepicker') %>

      <%= text_field_tag(:end_day, nil, class: 'date end datepicker form-control input-sm', :datepicker => 'datepicker') %>

      <%= submit_tag "Abrir bloque de tiempo" %>

    </div>
  <% end %>
</div>

【问题讨论】：

为什么要将指令放在包含许多字段的 div 上？他们会消失
我更新了我的答案。我试图重现 timepicker 文档提供的示例，但我认为在这种情况下它不会以同样的方式工作，因为我也在尝试使用 Angular。

标签： jquery ruby-on-rails angularjs datepicker timepicker

【解决方案1】：

这就是我所做的。这是我的时间选择器指令：

.directive('timePicker', ['$timeout', function ($timeout) {
    return {
        restrict: 'AC',
        scope: {
            ngModel: '='
        },
        link: function (scope, element) {
            element.on('change', function () {
                if (element.hasClass('start')) {
                    $timeout(function () {
                        var $el = element.closest('[date-pair]').find('input.end'),
                            endScope = angular.element($el).isolateScope();

                        endScope.$apply(function () {
                            endScope.ngModel = $el.val();
                        });
                    }, 0);
                }
            });
            element.timepicker({
                timeFormat: 'H:i',
                forceRoundTime: true
            });
        }
    };
}]);

我的 datePair 指令和你的很相似：

.directive('datePair', [function () {
    restrict: 'AC',
    link: function (scope, element) {
        element.datepair();
    }
}]);

您的 HTML 可能如下所示：

<div date-pair>
    <input time-picker class="time start" ng-model="something.start">
    <input time-picker class="time end" ng-model="something.end">
</div>

您仍然可以使用您的日期对指令，但请注意我在属性中添加了一个连字符。

当change 事件在开始时间选择器中被触发时，它会更新结束时间选择器的范围以反映 jQuery 插件所做的更改。

虽然不是太快，但通常会在一秒内更新（大部分时间不到一秒）

【讨论】：