enable specific dates in angularjs datepicker ui bootstrap

Question

var myApp= angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ui.bootstrap.dateparser', 'ui.bootstrap.datepicker']);



             myApp.controller('DatepickerDemoCtrl', function($scope, $http) {
 
            $scope.today = function() {
                $scope.dt = new Date();
              };
              $scope.today();

              $scope.clear = function() {
                $scope.dt = null;
              };

              $scope.inlineOptions = {
                minDate: new Date(),
                showWeeks: false
              };

              $scope.dateOptions = {
                  formatYear: 'yy',
                  maxDate: new Date(2020, 5, 22),
                  minDate: new Date(),
                  startingDay: 1
                };

                // Disable weekend selection
                function disabledasda(data) {
                  var date = data.date,
                    mode = data.mode;
                  return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
                }

              $scope.toggleMin = function() {
                $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
                $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
              };

              $scope.toggleMin();

              $scope.open1 = function() {
                $scope.popup1.opened = true;
              };


              $scope.setDate = function(year, month, day) {
                $scope.dt = new Date(year, month, day);
              };

              $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
              $scope.format = $scope.formats[0];
              $scope.altInputFormats = ['M!/d!/yyyy'];

              $scope.popup1 = {
                opened: false
              };


              var tomorrow = new Date();
              tomorrow.setDate(tomorrow.getDate() + 1);
              var afterTomorrow = new Date();
              afterTomorrow.setDate(tomorrow.getDate() + 1);
              $scope.events = [
                {
                  date: tomorrow,
                  status: 'full'
                },
                {
                  date: afterTomorrow,
                  status: 'partially'
                }
              ];
              $scope.disabled = function(date, mode){

                $scope.holidays = [
                  new Date(2016,2,14),
                  new Date(2016,2,15),
                  new Date(2016,2,16),
				  new Date()
                ]

                var isHoliday = true;
                for(var i = 0; i < $scope.holidays.length ; i++) {
                  if(areDatesEqual($scope.holidays[i], date)){
                    isHoliday = false;
                  }
                }

                return ( mode === 'day' && isHoliday );
              };

			  
			  
              function areDatesEqual(date1, date2) {

                return date1.setHours(0,0,0,0) === date2.setHours(0,0,0,0)

              }

              $scope.dayClass = function(date, mode) {

            var appointments = [
              new Date(2016,2,3),
              new Date(2016,2,8),
              new Date(2016,2,22),
            ]

            if (mode === 'day') {

              var dateToCheck = new Date(date);

              for(var i = 0; i < appointments.length ; i++) {
                if(areDatesEqual(appointments[i], dateToCheck)){
                  return 'appointment';
                }
              }
            }
            return '';
          };

          $scope.dateSelected = function(){

    var appointments = [
      new Date(2016,2,3),
      new Date(2016,2,8),
      new Date(2016,2,22),
    ];

    var dateSelected = new Date($scope.dt);

    for(var i = 0; i < appointments.length ; i++) {
      if(areDatesEqual(appointments[i], dateSelected)){
        performAction();
      }
    }

  };

  function performAction(){
    alert("Appointment date selected");
  }


 $scope.dtmax = new Date();
             });

      .full button span {
        background-color: limegreen;
        border-radius: 32px;
        color: black;
      }
      .partially button span {
        background-color: orange;
        border-radius: 32px;
        color: black;
      }
      .appointment>button {
        color: white;
        background-color: red;
      }

<head>

  <title>datePicker</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
  <script src="./datePicker.js"></script>






</head>

<body ng-app="ui.bootstrap.demo" >
 
     <div ng-controller="DatepickerDemoCtrl">
      <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

      <h4>Popup</h4>
      <div class="row">
        <div class="col-md-6">
          <p class="input-group">
            <input type="text" class="form-control"  uib-datepicker-popup="{{dateformat}}" ng-model="dt" ng-change="dateSelected()"is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats"  custom-class="dayClass(date, mode)"  max-date="dtmax" min-date="dtmax" date-disabled="disabled(date, mode)"/>
            <span class="input-group-btn">
			
              <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
          </p>
        </div>
      </div>
    </div>
  </body>

siteDatePicker.js:

    var myApp= angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ui.bootstrap.dateparser', 'ui.bootstrap.datepicker']);



                 myApp.controller('DatepickerDemoCtrl', function($scope, $http) {

                $scope.today = function() {
                    $scope.dt = new Date();
                  };
                  $scope.today();

                  $scope.clear = function() {
                    $scope.dt = null;
                  };

                  $scope.inlineOptions = {
                    minDate: new Date(),
                    showWeeks: false
                  };

                  $scope.dateOptions = {
                      formatYear: 'yy',
                      maxDate: new Date(2020, 5, 22),
                      minDate: new Date(),
                      startingDay: 1
                    };

                    // Disable weekend selection
                    function disabledasda(data) {
                      var date = data.date,
                        mode = data.mode;
                      return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
                    }

                  $scope.toggleMin = function() {
                    $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
                    $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
                  };

                  $scope.toggleMin();

                  $scope.open1 = function() {
                    $scope.popup1.opened = true;
                  };


                  $scope.setDate = function(year, month, day) {
                    $scope.dt = new Date(year, month, day);
                  };

                  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
                  $scope.format = $scope.formats[0];
                  $scope.altInputFormats = ['M!/d!/yyyy'];

                  $scope.popup1 = {
                    opened: false
                  };


                  var tomorrow = new Date();
                  tomorrow.setDate(tomorrow.getDate() + 1);
                  var afterTomorrow = new Date();
                  afterTomorrow.setDate(tomorrow.getDate() + 1);
                  $scope.events = [
                    {
                      date: tomorrow,
                      status: 'full'
                    },
                    {
                      date: afterTomorrow,
                      status: 'partially'
                    }
                  ];
                  $scope.disabled = function(date, mode){

                    $scope.holidays = [
                      new Date(2016,2,14),
                      new Date(2016,2,15),
                      new Date(2016,2,16),
                      new Date()
                    ]

                    var isHoliday = true;
                    for(var i = 0; i < $scope.holidays.length ; i++) {
                      if(areDatesEqual($scope.holidays[i], date)){
                        isHoliday = false;
                      }
                    }

                    return ( mode === 'day' && isHoliday );
                  };



                  function areDatesEqual(date1, date2) {

                    return date1.setHours(0,0,0,0) === date2.setHours(0,0,0,0)

                  }

                  $scope.dayClass = function(date, mode) {

                var appointments = [
                  new Date(2016,2,3),
                  new Date(2016,2,8),
                  new Date(2016,2,22),
                ]

                if (mode === 'day') {

                  var dateToCheck = new Date(date);

                  for(var i = 0; i < appointments.length ; i++) {
                    if(areDatesEqual(appointments[i], dateToCheck)){
                      return 'appointment';
                    }
                  }
                }
                return '';
              };

              $scope.dateSelected = function(){

        var appointments = [
          new Date(2016,2,3),
          new Date(2016,2,8),
          new Date(2016,2,22),
        ];

        var dateSelected = new Date($scope.dt);

        for(var i = 0; i < appointments.length ; i++) {
          if(areDatesEqual(appointments[i], dateSelected)){
            performAction();
          }
        }

      };

      function performAction(){
        alert("Appointment date selected");
      }


     $scope.dtmax = new Date();
                 });

siteDatePicker.html:

    <html>
      <head>
        <title>Typehead</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
      <script src="./siteDatePicker.js"></script>

          <style>
          .full button span {
            background-color: limegreen;
            border-radius: 32px;
            color: black;
          }
          .partially button span {
            background-color: orange;
            border-radius: 32px;
            color: black;
          }
          .appointment>button {
            color: white;
            background-color: red;
          }

        </style>   

      </head>
      <body ng-app="ui.bootstrap.demo" >

         <div ng-controller="DatepickerDemoCtrl">
          <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

          <h4>Popup</h4>
          <div class="row">
            <div class="col-md-6">
              <p class="input-group">
                <input type="text" class="form-control"  uib-datepicker-popup="{{dateformat}}" ng-model="dt" ng-change="dateSelected()"is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats"  custom-class="dayClass(date, mode)"  max-date="dtmax" min-date="dtmax" date-disabled="disabled(date, mode)"/>
                <span class="input-group-btn">

                  <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
              </p>
            </div>
          </div>
        </div>
      </body>
    </html>

the above does the following: 1) disables all dates in the calendar 2) tries to enable the dates i passed in holidays array in siteDatePicker.js

what happens is that the dates do not get enabled because i think max-date and min-date directives(check input tag in html page) does not allow the dates to be enabled since these dates that i provide fall in that min to max range!

what do i do to enable these dates? any help would be appreciated!

Clyde Dias · Accepted Answer · 2016-03-28 11:09:54Z

opps! infact it is exactly what i need to remove! i need to remove max-date and min-date from html: following is the code snippet!

var myApp= angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ui.bootstrap.dateparser', 'ui.bootstrap.datepicker']);



             myApp.controller('DatepickerDemoCtrl', function($scope, $http) {
 
            $scope.today = function() {
                $scope.dt = new Date();
              };
              $scope.today();

              $scope.clear = function() {
                $scope.dt = null;
              };

              $scope.inlineOptions = {
                minDate: new Date(),
                showWeeks: false
              };

              $scope.dateOptions = {
                  formatYear: 'yy',
                  maxDate: new Date(2020, 5, 22),
                  minDate: new Date(),
                  startingDay: 1
                };

                // Disable weekend selection
                function disabledasda(data) {
                  var date = data.date,
                    mode = data.mode;
                  return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
                }

              $scope.toggleMin = function() {
                $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
                $scope.dateOptions.minDate = $scope.inlineOptions.minDate;
              };

              $scope.toggleMin();

              $scope.open1 = function() {
                $scope.popup1.opened = true;
              };


              $scope.setDate = function(year, month, day) {
                $scope.dt = new Date(year, month, day);
              };

              $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
              $scope.format = $scope.formats[0];
              $scope.altInputFormats = ['M!/d!/yyyy'];

              $scope.popup1 = {
                opened: false
              };


              var tomorrow = new Date();
              tomorrow.setDate(tomorrow.getDate() + 1);
              var afterTomorrow = new Date();
              afterTomorrow.setDate(tomorrow.getDate() + 1);
              $scope.events = [
                {
                  date: tomorrow,
                  status: 'full'
                },
                {
                  date: afterTomorrow,
                  status: 'partially'
                }
              ];
              $scope.disabled = function(date, mode){

                $scope.holidays = [
                  new Date(2016,2,14),
                  new Date(2016,2,15),
                  new Date(2016,2,16),
				  new Date()
                ]

                var isHoliday = true;
                for(var i = 0; i < $scope.holidays.length ; i++) {
                  if(areDatesEqual($scope.holidays[i], date)){
                    isHoliday = false;
                  }
                }

                return ( mode === 'day' && isHoliday );
              };

			  
			  
              function areDatesEqual(date1, date2) {

                return date1.setHours(0,0,0,0) === date2.setHours(0,0,0,0)

              }

              $scope.dayClass = function(date, mode) {

            var appointments = [
              new Date(2016,2,3),
              new Date(2016,2,8),
              new Date(2016,2,22),
            ]

            if (mode === 'day') {

              var dateToCheck = new Date(date);

              for(var i = 0; i < appointments.length ; i++) {
                if(areDatesEqual(appointments[i], dateToCheck)){
                  return 'appointment';
                }
              }
            }
            return '';
          };

          $scope.dateSelected = function(){

    var appointments = [
      new Date(2016,2,3),
      new Date(2016,2,8),
      new Date(2016,2,22),
    ];

    var dateSelected = new Date($scope.dt);

    for(var i = 0; i < appointments.length ; i++) {
      if(areDatesEqual(appointments[i], dateSelected)){
        performAction();
      }
    }

  };

  function performAction(){
    alert("Appointment date selected");
  }


 $scope.dtmax = new Date();
             });

.full button span {
        background-color: limegreen;
        border-radius: 32px;
        color: black;
      }
      .partially button span {
        background-color: orange;
        border-radius: 32px;
        color: black;
      }
      .appointment>button {
        color: white;
        background-color: red;
      }

<head>

  <title>datePicker</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
  <script src="./datePicker.js"></script>






</head>

<body ng-app="ui.bootstrap.demo" >
 
     <div ng-controller="DatepickerDemoCtrl">
      <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>

      <h4>Popup</h4>
      <div class="row">
        <div class="col-md-6">
          <p class="input-group">
            <input type="text" class="form-control"  uib-datepicker-popup="{{dateformat}}" ng-model="dt" ng-change="dateSelected()"is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats"  custom-class="dayClass(date, mode)" date-disabled="disabled(date, mode)"/>
            <span class="input-group-btn">
			
              <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
          </p>
        </div>
      </div>
    </div>
  </body>

Collectives™ on Stack Overflow

enable specific dates in angularjs datepicker ui bootstrap

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related