未触发daterangepicker

Question

我在我的页面中实现了daterange picker。但它不起作用。谁能指出我做错了什么，或者我遗漏了什么？

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

首先，我不会回答你的问题。因为我更喜欢建议你:避免它。

你所做的不是角度的方式。您正在以jQuery的方式工作。所以，使用Angular和Libs对你来说会更难。因此，您有两个选择:使用AngularJS或使用jQuery。

为什么你没有用Angular的方式做：

0-对于Angular，你不应该使用jQuery来选择元素。(与$('#txtDateRange').on('apply.daterangepicker',、angular.element(document).ready和$('#txtDateRange').daterangepicker一起使用

处理好这个。或者Angular会变得更难，也不优雅。

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

我希望它能帮助你！