Bünyamin Sarıgül Bünyamin Sarıgül - 4 months ago 222
AngularJS Question

uib-datepicker-popup not showing the calendar

I am using Express and AngularJS. I tried to add a date picker with ui-bootstrap module. When I add uib-datepicker, it works fine. But when I tried to add a uib-datepicker-popup the result was like that

uib-datepicker-popup

When I click the calendar button, it shows a pop-up but there are only today, clear and close buttons. It do not show the calendar.

Here is my html

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


<div class="col-md-6">
<p class="input-group">
<input type="text" uib-datepicker-popup class="form-control" ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>




And the controller

app.controller('DatepickerPopupDemoCtrl', function ($scope) {


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

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

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


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

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

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

$scope.toggleMin();

$scope.open2 = function() {
$scope.popup2.opened = !$scope.popup2.opened;
};

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

$scope.format = 'yyyy-MM-dd';
$scope.altInputFormats = ['M!/d!/yyyy'];

$scope.popup2 = {
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'
}
];

function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);

for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);

if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}

return '';
}
});


Here is the doc that I take the code: https://angular-ui.github.io/bootstrap/

Thanks in advance.

Answer

You should use jade with angularjs. if you want to add date picker popup , you can use the code below for html

<input type="text" uib-datepicker-popup="" name="dob" placeholder="Please enter date in YYYY-mm-dd format" 
  ng-model="dob" is-open="popup2.opened" datepicker-options="dateOptions"
  ng-required="true" close-text="Close" class="form-control"/>
<span class="input-group-btn">
  <button type="button" ng-click="open2()" class="btn btn-default">
    <i class="glyphicon glyphicon-calendar"></i>
  </button>
</span>

and add this in your controller

$scope.dateOptions = {
  formatYear: 'yy',
  maxDate: new Date(2020, 5, 22),
  minDate: new Date(1970, 1, 1),
  startingDay: 1
};
$scope.open = function() {
  $scope.popup2.opened = true;
};
$scope.popup = {
  opened: false
};
function getDayClass(data) {
  var date = data.date,
  mode = data.mode;
  if (mode === 'day') {
    var dayToCheck = new Date(date).setHours(0,0,0,0);
    for (var i = 0; i < $scope.events.length; i++) {
      var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0);
      if (dayToCheck === currentDay) {
        return $scope.events[i].status;
      }
    }
  }
  return '';
}

and this in your css file

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">