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?
Related
I'm using AngularJs 1.6 with angular-ui-bootstrap 2.5.0 (bootstrap-ui-tpl.min.js)
On loading the page, the model value (dateOfBirth) is not getting pre-populated in the date picker textbox. It seems, many have reported similar issues for different versions of angular/bootstrap but nothing seems to work.
HTML:
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dateOfBirth" datepicker-options="dateOptions"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDobDatePicker()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
Javascript:
$scope.format = 'dd/MM/yyyy'
$scope.dateOfBirth = '05/12/2004'
$scope.dateOptions = {
maxDate: new Date(),
startingDay: 1,
showWeeks: false
}
Edit:
It seems angular provides uibDateParser to parse String to Date object. However, the following fails silently:
$scope.dateOfBirth = $uibDateParser.parse('05/12/2004', 'dd/MM/yyyy')
It's not getting populated because it's a string and not a valid Date. So, if you change it like,
$scope.dateOfBirth = new Date("05/12/2004");
..it would work! Also, note that new Date(..) will come with local timezone so in case you want to change timezone or anything regarding manipulation of dates, momentjs is a great library to handle those.
EDIT: If your format is dd/MM/yyyy, you can maybe do something like this to convert in valid date:
var parts ='05/12/2004'.split('/');
$scope.dateOfBirth = new Date(parts[2],parts[1]-1,parts[0]));
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.
In an angular project, I have an bootstrap-ui datepicker which is used to provide info on the date when an invoice has been paid.
Initially, upon creating the invoice, as it has not been paid and so I should have an ng-model variable indicating null or something like that :
$scope.invoice.Payment_Date = null
The thing is, it appears that the datepicker needs to have a valid date object to work. When using everything this way, when I select a date in the datepicker to say my invoice has been paid, the datepicker indicates a correct date like Tuesday, February 15 2016, but the ng-model variable remains null.
If I initialize the variable as such :
$scope.invoice.Payment_Date = new Date();
then when changing the datepicker date, the ng-model is updated as it should.
The problem is, I may have to create/update the invoice without saying it has been paid, and doing so, I get a Payment_Date which has the value of the date said invoice has been created/updated.
Is there a way to leave this variable set to null or empty when the datepicker is left untouched and yet having it get the correct datepicker value when it's used ?
Hope someone can help !
Edit : here's the HTML code of the datepicker :
<form name="formFacture" novalidate rc-submit="modifierFacture()">
<div class="form-group">
<label>Date de paiement : </label>
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="dd MMMM yyyy" ng-model="facture.Date_Paiement" is-open="popupDatePaiement.opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Fermer" clear-text="Effacer" current-text="Aujourd'hui" readonly="readonly" ng-click="openDatePaiement()" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDatePaiement()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="container text-center">
<button type="submit" class="btn btn-primary">Enregistrer</button>
<div class="btn btn-primary" ng-click="ChangeLocation('prev', '/#factures')">Retour</div>
</div>
</form>
Here's the JS code :
$scope.facture = {};
$scope.dateOptions = {
startingDay: 1
};
$scope.popupDatePaiement = {
opened: false
};
var openDatePaiement = $scope.openDatePaiement = function() {
$scope.popupDatePaiement.opened = true;
};
$scope.modifierFacture = function(){
console.log($scope.facture);
return
}
After reviewing the code I found that :
I can get a valid date with the datepicker ( there was a slight error with the ng-model ) but if I change the date twice, the facture.Date_Paiement variable stays with the 1st choice, the 2nd choice does not get forwarded to it.
If I use the "clear" button inside the datepicker, the facture.Date_Paiement variable doesn't revert to null
I've tried adding this line :
$scope.Date_Paiement = null
inside the openDatePaiement function, but in this case, the facture.Date_Paiement staus null at all times.
Ok, after hours spent researching the whys of this question, I found an answer.
DO NOT rely on console.log(object) to tell you what is inside the object as it seems the function parsing the object to render it inside the console is bugged !
Instead, use console.log(JSON.stringify(object)) and you'll have the correct values.
My head still aches, what are we to do when such things are bugged ???
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.
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')