i implementing daterange picker in page. not working. please point out doing wrong or missing.
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>
first, i'm not answering question. because prefer advice you: avoid it.
what doing not angular way. working in jquery way. so, harder use angular , libs. so, have 2 choices: use angularjs or use jquery.
why not doing in angular way:
0 - angular shouldn't use jquery select elements. (you using $('#txtdaterange').on('apply.daterangepicker', , angular.element(document).ready , $('#txtdaterange').daterangepicker
take care of this. or angular harder , not elegant.
if prefer use angular, can use angular date picker, please check this: http://mgcrea.github.io/angular-strap/#/datepickers
i hope can you!
