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

首先，我没有回答你的问题。因为我更喜欢建议你：避免它。

你在做什么不是Angular Way。您正在使用jQuery Way。所以，使用Angular和Libs会更难。所以，你有两个选择：使用AngularJS或使用jQuery。

为什么你没有采用Angular方式：

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

照顾好这个。或者Angular将更难，而不是优雅。

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

我希望它可以帮到你！

daterangepicker未被触发

1 个答案: