daterangepicker未触发

Question

我正在页面中实现daterange选择器 。 但这是行不通的。 有人可以指出我做错了什么或我想念的是什么。

CSHTML：

<div class="has-feedback" >
    <input type="text" id="txtDateRange"
           class="form-control input-md" name="RangeDates"
           placeholder="Select Range"
           ng-model="Model.RageDates">
    <span class="form-control-feedback"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
    <span style="color: #a94442" >
        <label class="control-label" class="has-error" ng-show="RangeDates.$invalid">Required.</label>
    </span>
</div>

js：

DashBoardModule.controller('DashBoardController', ['$scope','$filter', 'DashBoardModuleService', function ($scope,$filter, DashBoardModuleService) {

   $('#txtDateRange').on('apply.daterangepicker', function (ev, picker) {
        $scope.isRefreshing = true;
        $scope.Model.introductoryPeriodEnd = $filter('date')(new Date(picker.endDate), dateFormat);
        $scope.Model.introductoryPeriodStart = $filter('date')(new Date(picker.startDate), dateFormat);
        $scope.Model.typeAvailability = picker.chosenLabel === "Custom Range" ? "Custom" : picker.chosenLabel;
        $scope.$apply();    
    });

    angular.element(document).ready(function () {
        var dateConfiguration = new Date();
        $('#txtDateRange').daterangepicker({
            ranges: {
                'Next Week': [new Date(), dateConfiguration.setDate(dateConfiguration.getDate() + 6)],
                'Next 2 Weeks': [new Date(), dateConfiguration.setDate(dateConfiguration.getDate() + 8)]
            },
            format: dateFormat,
            autoApply: true
        });
    });    
}]);

_Layout：

 <!-- Range Date Picker -->
 <link href="~/Scripts/Controls/DateRangePicker/daterangepicker.css" rel="stylesheet" />
 <script src="~/Scripts/Controls/DateRangePicker/daterangepicker.js"></script>

Answer 1

首先，我没有回答你的问题。 因为我希望为您提供建议：避免IT。

您在做什么不是Angular Way。 您正在以jQuery方式工作。 因此，使用Angular和Libs会更难。 因此，您有2个选择：使用AngularJS或使用jQuery。

为什么不按角度进行操作：

0-使用Angular，您不应该使用jQuery选择元素。 （您正在使用$('#txtDateRange').on('apply.daterangepicker',和angular.element(document).ready和$('#txtDateRange').daterangepicker

照顾这个 否则Angular会变得更难而不优雅。

如果您更喜欢使用angular，则可以使用ANGULAR日期选择器，请检查以下内容： http : //mgcrea.github.io/angular-strap/#/datepickers

希望对您有所帮助！