Bootstrap UI Datepicker Popup not working after 2.1.4 update - angularjs

I have the following code snippet that was working fine in my web application utilising the Bootstrap UI library v0.14.3:
HTML:
<div class="form-group">
<label for="dateSelection">Reporting Period:</label>
<div class="input-group input-group-sm right-align">
<input
id="dateSelection"
type="text"
class="form-control"
uib-datepicker-popup="{{ format }}"
popup-placement="bottom-right"
ng-model="date"
is-open="Calendar.opened"
datepicker-options="calendarOptions"
ng-required="true"
close-text="Close"
on-open-focus="false"
ng-change="chooseCustomDate( date )"
ng-disabled="true" />
<span class="input-group-btn">
<button
type="button"
class="btn btn-default"
ng-click="openCalendar()">
<i class="fa fa-calendar"></i>
</button>
</span>
</div>
</div>
Controller:
var yesterdayDate = moment().subtract( 1, 'days' );
$scope.selectedDate = $filter('date')( new Date( yesterdayDate ), 'yyyy-MM-dd' );
$scope.forecastVarianceErrors = [];
$scope.LBossVarianceErrors = [];
$scope.PortalDifferenceErrors = [];
$scope.date = $scope.selectedDate;
$scope.dtInstance = {};
$scope.showPortalDifferences = true;
$scope.showLBossVariances = true;
$scope.showForecastVariances = false;
$scope.format = 'EEEE, d MMMM, yyyy';
/*
* Reporting Period
*
*/
$scope.chooseCustomDate = function( date ) {
// Set the new date
$scope.selectedDate = $filter('date')( new Date( date ), 'yyyy-MM-dd' );
// Empty the variance arrays
$scope.forecastVarianceErrors = [];
$scope.LBossVarianceErrors = [];
$scope.PortalDifferenceErrors = [];
// Redraw the datatable
$scope.dtInstance.reloadData();
};
$scope.openCalendar = function() {
$scope.Calendar.opened = true;
};
$scope.Calendar = {
opened: false
};
$scope.calendarOptions = {
startingDay: 1
};
However, recently I required a feature to the Bootstrap UI's Popover element that was only available in v2.1.4 so I decided to make the transition to the latest version.
After updating, I noticed that all of my Datepicker Popups have now stopped working. I don't receive any errors, just simply the popup never seems to open. I am struggling to find information on what may have changed to see if I am now missing something, or need to alter my code in any way.
If I revert back to v0.14.3, my Datepicker Popups will start working again.
Any help appreciated.

Well it seems that I was the cause of my own demise.
Within my control, I added the ng-disabled tag to the <input> field to prevent any user from manually tampering with the date string. This seemed to be an allowed behaviour of v0.14.3, however, v2.1.4 was not so accommodating.
By changing the ng-disabled to a readonly tag, it allowed the calendar control to once again be drawn.
Also I found that v2.1.4 wants new Date(); specified for the ng-model or it fails to render the date string within the <input> field.

Related

Disable past dates in datepicker-popup

I have below code snippet in which datepicker control is there.
<input type="text" name="startDate" class="form-control input-sm" datepicker-popup="dd-MMMM-yyyy" ng-model="startDate" required />
Here, i have to disable the past dates in the datepicker control and below is what i have configured but its not working. Am I missing something here?
App.config(['datepickerConfig', 'datepickerPopupConfig', function (datepickerConfig, datepickerPopupConfig) {
datepickerConfig.startingDay = 1;
datepickerConfig.showWeeks = true;
datepickerPopupConfig.datepickerPopup = "dd-MMMM-yyyy";
datepickerPopupConfig.currentText = "Now";
datepickerPopupConfig.clearText = "Erase";
datepickerPopupConfig.closeText = "Close";
}]);
If you want to narrow the range of possible dates add min-date or max-date just as in the example.
Here's the relevant part of documentation:
max-date (Default: null) - Defines the maximum available date.
min-date (Default: null) - Defines the minimum available date.
Since angular ui-bootstrap version 1.1.0 you need to use an attribute called datepicker-options to configure a datepicker:
<input type="text" class="form-control" datepicker-options="dateOptions" datepicker-popup="dd-MMMM-yyyy" is-open="popup.opened"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
Now you only need to set the minDate property to the current date or any other date you like to be the minimum Date of the datepicker. Instead of writing the datepicker configuration in the .config block of your application, you should write it in a controller or a service:
$scope.dateOptions = {
minDate: new Date()
};
$scope.popup = {
opened: false
};
$scope.open = function() {
$scope.popup.opened = true;
};
For more information, please read the official documentation.

Angular-ui-bootstrap datepicker is setting default calendar date to December 31 1969 when using with ng-required

I have a form where I have a conditionally required datepicker element. I can not initiate this element with any value as the user has to enter it. Datepicker format is dd/mm/yyyy. Issue is that it was working fine until I added ng-required. After ng-required condition added to the element, when user clicks on calendar, calendar default date is Dec 31 1969. It's very inconvenient to the user bringing that date to current date. I tried setting default date to today in datepicker options but no luck.
<div class="form-group col-md-3 required" ng-show="decision==true">
<label class="control-label">Test Date</label>
<div class="input-group">
<input name="testDate" type="text" class="form-control" datepicker-popup="dd/MM/yyyy" ng-model="testDate" is-open="dpOpened.testDateTo"
close-text="Close" onfocus="this.blur();" datepicker-options="dateOptions" ng-required="decision==true" required/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="datepickerPopup($event, 'testDateTo')">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
</div>
--controller.js--
$scope.datepickerPopup = function($event, opened) {
$event.preventDefault();
$event.stopPropagation();
$scope.dpOpened[opened] = true;
}
$scope.dateOptions = {
showWeeks : false,
defaultDate : new Date()
};
$scope.dpOpened = {
testDateTo : false,
};
$scope.today = function() {
return new Date();
}
You have the ng-model set to testDate but I don't see where you have set that in your controller. Try setting testDate = new Date(). See this relevant pull request
I had the same issue.
You should NOT initialize the bsDatePicker field with new Date(). You must initialize with 'null' from formbuilder, even if it is a required field.

angularjs bootstrap datepicker is not updating the model

I'm trying to use the bootstrap datepicker using angular ui inside a my own angular controller.
http://angular-ui.github.io/bootstrap/
With all the libraries updated to the latest version I have a strange bevavior: the intial value is read from the controller, the datepicker is shown, I select the date and the textbox is updated but after this the value in the controller changes to undefined.
I'm missing something? What can cause this behavior?
thanks,
Luca morelli
this is the content of the view, two dates to define a range
<input type="text" class="form-control" datepicker-popup="{{dtFormat}}" ng-model="dtFine" is-open="dtFineOpened"
ng-required="true" close-text="Chiudi" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDtFine($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
this is the typescript code that handles the involved members
$scope.dtInizio = moment().format("DD/MM/YYYY");
$scope.dtFine = moment().format("DD/MM/YYYY");
$scope.dtInizioOpened = false;
$scope.dtFormat = "dd/MM/yyyy";
$scope.openDtInizio = ($event) => {
$event.preventDefault();
$event.stopPropagation();
$scope.dtInizioOpened = true;
}
$scope.openDtFine = ($event) => {
$event.preventDefault();
$event.stopPropagation();
$scope.dtFineOpened = true;
}
Using batarang I see that choosing the first date, when the popup is closed the model isn't update, when I go to open the second popup the modul is updated showing DtInizio as undefined
Debugging more I found this: I set a breakpoint to evalutate the status and I see that the value is
Tue Sep 16 2014 00:00:00 GMT+0200 (W. Eu...
and this is correct, but below I find
proto: Invalid Date
What does it means?

Angular UI datepicker not updating

I have tried to extend the UI datepicker with previous and next day buttons.
As you can see from the plunker I can change the model either by using the datepicker or the prev/next buttons. But when the model is changed with the prev/next buttons, the datepicker ist not updated.
http://plnkr.co/edit/k1flklFny5BoX6zdwyWJ?p=preview
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="{{ctrl.format}}" ng-model="ctrl.dt"
is-open="ctrl.opened" datepicker-options="ctrl.dateOptions"
ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="ctrl.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
</div>
I tried several approaches already (including $scope and the demonstrated controller as syntax) but it simply does not work. Any ideas?
PS: I tried very hard to have prev button, datepicker, next button in one line, centered, the datepicker occupying just enough space it needs. If anyone has an idea how to accomplish that, any help is greatly appreciated.
I don't know why, but seems that ngModel doesn't react when Date object changed itself. But it changed if you assign to scope property new instance of Date.
Try this:
this.prevDay = function() {
this.dt = getPrevNextDate(this.dt, -1);
};
this.nextDay = function() {
this.dt = getPrevNextDate(this.dt, 1);
};
function getPrevNextDate(date, increment)
{
var newDate = new Date();
newDate.setDate(date.getDate() + increment);
return newDate;
}
And better to cache this into some variable like var self = this at top of controller function and use self variable instead of this
This way you will avoid error in this line:
$log.log('GET api/v1/person/' + this.person.id + '/entry returned: ' + data.length + ' entries')

Datepicker not binding formatted value

This is probably an easy question, but I'm having a problem with this datepicker. The problem is I set the format to dd/mm/yyyy with data-date-format attribute. However, when checking my ng-model the value is the following: Wed Jul 17 2013 00:00:00 GMT+0000 (Greenwich Standard Time)
What I want is it to bind to dd/mm/yyyy format.
How can I fix this?
Here is my code:
<label for="inputDateFrom">Frá</label>
<div class="control-group input-append">
<input type="text" ng-model="booking.Booking.DateFrom" data-date-format="dd/mm/yyyy" bs-datepicker>
<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
</div>
Update 18.07.13:
According to rGil's answer I tried to use $scope.$watch. It works fine but first it gets the CORRECT date (from getBooking() service function), then it changes to the CURRENT date - which is not the date.
JavaScript code is following:
$scope.$watch('booking.Booking.DateFrom', function(v){ // using the example model from the datepicker docs
$scope.booking.Booking.DateFrom = moment(v).format();
alert(moment(v).format());
});
$scope.$watch('booking.Booking.DateTo', function(v){ // using the example model from the datepicker docs
$scope.booking.Booking.DateTo = moment(v).format();
alert(moment(v).format());
});
// Sækjum staka bókun
if(bookingID != null) {
BookingService.getBooking(bookingID).then(function(data) {
$scope.booking = data.data;
$scope.booking.Booking.DateFrom = moment($scope.booking.Booking.DateFrom);
$scope.booking.Booking.DateTo = moment($scope.booking.Booking.DateTo);
});
}
Then my HTML is the following:
<label for="inputDateFrom">Frá</label>
<div class="control-group input-append">
<input type="text" ng-model="booking.Booking.DateFrom" data-date-format="dd-mm-yyyy" bs-datepicker>
<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
</div>
<label for="inputDateTo">Til</label>
<div class="control-group input-append">
<input type="text" ng-model="booking.Booking.DateTo" data-date-format="dd-mm-yyyy" bs-datepicker>
<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button>
</div>
Looking over the AngularStrap source code, I found that if you set the (seemingly undocumented) attribute date-type to any value outside of "Date" (for example: String) this prevents bs-datpicker from returning the selected date as a date object and solves the issue. So in this case it would be:
<input type="text" ng-model="booking.Booking.DateFrom" data-date-format="dd/mm/yyyy" date-type="string" bs-datepicker>
Tested on AngularStrap v0.7.4 and v0.7.5
This can easily be done without a plugin. Using this post you can create a $scope variable with the correct formatting.
Example:
$scope.$watch('datepicker.date', function(v){ // using the example model from the datepicker docs
var d = new Date(v);
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
$scope.modDate = curr_date + "/" + curr_month + "/" + curr_year;
console.log($scope.modDate)
})
FORKED DEMO - open console
There are ways to do it in a more elegant way, with AngularJS. Just use the date filter Angular. Like this:
$filter('date')(date, "yy/MM/yyyy", date.getTimezoneOffset())
$filter('date') gets the angularjs filter that take in args, the date, the template and the timezone, and returns a well formatted string.
08/03/2016

Resources