Angular Bootstrap Datepicker - Disable all dates except a specified list

Question

I've been stuck on this issue for a couple of days now and I cannot find any suitable example online to help. I am getting a list of dates from a rest service that I need to make available within the angular datepicker to be selected. When I have this list I need to disable every other date in the datepicker. Here is my current code examples to show this -

Here is a plunker - https://plnkr.co/edit/8zncfr2VBayaO7wRFV4C?p=preview

HTML SNIPPET---

<div role="tabpanel" class="tab-pane" id="calender"> <h3 class="map_tab_title"> Select Days </h3> <div uib-datepicker ng-model="date_pick" datepicker-options="options" date-disabled="disabled(data)"> </div> <button type="submit" class="btn book_now_btn" ng-click="goToBookPage()">final step <span> input your information </span> </button> </div>

ANGULAR SNIPPET -

$scope.dates = response.data.outgoing.dates; $scope.date_pick = Date.parse($scope.dates[0]); $scope.today = function(){ $scope.date_pick = new Date(); }; $scope.today(); $scope.options = { minDate: new Date(), showWeeks: false }; function areDatesEqual(date1, date2) { return date1 == date2; } $scope.disabled = function(data) { console.log("TRIGGERED"); var date = data.date, mode = data.mode; var isRealDate = false; for (var i = 0; i < $scope.dates.length; i++) { if (areDatesEqual($scope.dates[i], date)) { isRealDate = true; } } return (mode === 'day' && isRealDate); };

Can someone please help me with this. I am at a loss. Thanks in advance!

Thanks @Lex - I've seen this and have tried to implement it but it doesn't seem to work for me at all. — sgpbyrne, CommentedSep 20, 2016 at 21:30
can you give a plunker or the data which you are trying to compare in your for loop in disabled function ? somethin ! — ngCoder, CommentedSep 21, 2016 at 7:06
Also, as a note - the console log "Triggered" doesn't ever seem to fire unless I call it directly in the controller — sgpbyrne, CommentedSep 21, 2016 at 15:51

Hans Brunner · Accepted Answer · 2016-09-21 21:13:27Z

It seems like you've made mistake. dateDisable is a date-picker option and you can implement function for dateDisable.

Here's little change based on your script.js

angular.module('plunker', ['ui.bootstrap', 'ngAnimate']) .controller("MainController", ["$scope", function($scope) { $scope.dates = ["9/26/2016", "9/28/2016", "9/29/2016"]; $scope.date_pick = Date.parse($scope.dates[0]); $scope.today = function() { $scope.date_pick = new Date(); }; $scope.today(); function areDatesEqual(date1, date2) { return date1 == date2.toLocaleDateString() } // *******we don't need this code*******// $scope.disable = function(data) { var date = data.date, mode= data.mode; var isRealDate = false; for (var i = 0; i < $scope.dates.length; i++) { if (areDatesEqual($scope.dates[i], date)) { isRealDate = true; } } return (mode === 'day' && isRealDate); }; //**************// $scope.options = { minDate: new Date(), showWeeks: false, //********************************** //// Here's changed part - add new option dateDisabled dateDisabled:function(data) { console.log("here") var date = data.date, mode= data.mode; var isRealDate = false; for (var i = 0; i < $scope.dates.length; i++) { if (areDatesEqual($scope.dates[i], date)) { isRealDate = true; } } return (mode === 'day' && isRealDate); } }; }]);

And the changes in HTML code

<div uib-datepicker ng-model="date_pick" datepicker-options="options">

Yes, got below solution there - very similar to the one you posted here for free :D — sgpbyrne, CommentedSep 21, 2016 at 20:49
yeah actually it's same but little change in checking date :) — Hans Brunner, CommentedSep 21, 2016 at 20:50
If you have any problem or work please don't hesitate to contact me — Hans Brunner, CommentedSep 21, 2016 at 20:51
@HansBrunner Please edit your answer to explain the little change you made to the asker's code. — user8397947, CommentedSep 21, 2016 at 21:09
@dorukayhan I've changed answer. Let me know if you have any question — Hans Brunner, CommentedSep 21, 2016 at 21:15

sgpbyrne · Accepted Answer · 2016-09-21 20:44:03Z

Thanks Hans for your answer - Here's what worked for me in the end -

https://plnkr.co/edit/P9bF18XemufyLXN75b7k?p=preview

HTML SNIPPET --

<div ng-controller="MainController"> <h3> Select Days </h3> <div uib-datepicker ng-model="date_pick" datepicker-options="options"> </div> </div>

ANGULAR SNIPPET --

$scope.dates = ["2016-09-26", "2016-09-28", "2016-09-29"]; $scope.date_pick = Date.parse($scope.dates[0]); $scope.today = function() { $scope.date_pick = new Date(); }; $scope.today(); $scope.options = { dateDisabled: disabledTest, showWeeks: false }; var dayDuration = 60 * 60 * 24 * 1000; function areDatesEqual(date1, date2) { return (parseInt(date1 / dayDuration)) == (parseInt(date2 / dayDuration)); } function disabledTest(data) { var date = data.date, mode = data.mode; var isRealDate = false; for (var i = 0; i < $scope.dates.length; i++) { var changedDate = Date.parse($scope.dates[i]); if (areDatesEqual(changedDate, date)) { isRealDate = true; } } return mode === 'day' && !isRealDate; // && (date >= $scope.endDate); }

hmartos · Accepted Answer · 2017-11-12 01:12:22Z

I know this is an old questions, but I have been struggling with this problem recently and I want to share my working plunker, with what I think that is a cleaner solution:

http://embed.plnkr.co/pf5Kw2/

Collectives™ on Stack Overflow

Angular Bootstrap Datepicker - Disable all dates except a specified list

3 Answers 3

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Linked

Related