Question

我一直试图解决这个问题几天，我认为现在是时候向你问好了。好的我正在构建一个使用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>

Answer 1

这就是我的所作所为。这是我的timepicker指令：

.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>

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

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

它不是太快，它通常在一秒钟内更新（大多数时间不到一秒）

Angular和Datepair不会很好玩

1 个答案: