CODEWITHSUNDEEP
angularjsdatepickerangular-ui-bootstrapangular-ui
sgpbyrne
sgpbyrne

Reputation: 605

Angular Bootstrap Datepicker - Disable all dates except a specified list

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!

Upvotes: 2

Views: 5978

Answers (3)

hmartos
hmartos

Reputation: 919

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/

Upvotes: 1

Hans Brunner
Hans Brunner

Reputation: 71

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">

Upvotes: 3

sgpbyrne
sgpbyrne

Reputation: 605

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);
}

Upvotes: 1

Related Questions