I have a bare bones, minimalistic app, which includes this in the HTML of a view
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt"
is-open="popup1.opened" min-date="minDate" max-date="maxDate"
datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
ng-required="true" close-text="Close"
alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
and this in the controller
$scope.open1 = function() {
$scope.popup1.opened=true;
}
$scope.popup1 ={'opened': false}
$scope.dt = new Date();
When I click the calendar icon in the demo project, the calendar pops open, but it does not in my full-blown project, even when I copy/paste the code ($scope.popup1.opened does change from false to true when clicked).
The full blown project is too large to post - any advice?
[Update] Thanks for the help. One point to notice is that the code works in a minmial project, but not in a full-blown project, regardless of the suggested duplicate question.
However, I have taken on board the suggested duplicate an, alas, it does not help.
$scope.SwallowClick = function($event)
{
if ($event.cancelable)
$event.preventDefault();
$event.stopPropagation();
return false; // don't handle event further
}
$scope.open1 = function($event)
{
$scope.SwallowClick($event);
$scope.popup1.opened=true;
return false; // don't handle event further
}
Have you seen this question and the accepted answer? ui.bootstrap.datepicker is-open not working with a button
Try passing $event to your ng-click handler, like this...
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1($event)">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
And then in your javascript, something like this...
$scope.open1 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.popup1.opened=true;
}
$scope.popup1 ={'opened': false}
$scope.dt = new Date();
D'oh! $scope.formatwas not defined (blush)
Related
I am trying to use uib-datepicker-popup but am running into an issue that once the calendar opens and I choose a date, I cannot reopen the calendar without refreshing the screen. I step through the function call on the ng-click and it sets the is-open flag to true but the popup doesn't show after the first time.
This is the HTML:
<span class="input-group" >
<input type="text" class="input-sm " uib-datepicker-popup="{{format}}"
ng-model="requestDate" is-open="opened1"
datepicker-options="dateOptions" close-text="Close" />
<span class=" input-sm" >
<button type="button" class="btn btn-default" ng-click="open1()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</span>
And the controller:
$scope.format = 'yyyy-MM-dd';
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.open1 = function() {
$scope.opened1 = true;
};
I don't understand why it won't open...any thoughts?
thank you all for your help. I did a lot more searching after I posted the question and came across something that fixed the issue...not sure why it made it work but it does.
I changed the open1 function to the following...I got it to work first for one and then extended to so I can use it for all...
$rootScope.openCalendar = function($event,whch) {
$event.preventDefault(); <- I had tried this before
$event.stopPropagation(); <- I had tried this before
$rootScope.datepicker = {[whch]: true};
};
In my HTML I changed both lines: (look for the <--)
<input type="text" class="input-sm " uib-datepicker-popup="{{format}}"
ng-model="requestDate" is-open="datepicker.opened1" <--
datepicker-options="dateOptions" close-text="Close" />
<span class=" input-sm" >
<button type="button" class="btn btn-default" ng-click="openCalendar($even, 'opened1')"> <--
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
This works really well from what I can see so far. I guess I could shorten it a bit by using Lex's suggestion too....
Thanks again!
Am having difficulties getting this date picker to work.
included the javascript files
<script src="js/ui-bootstrap.js"></script>
<script src="js/ui-bootstrap-tpls.js"></script>
in the index page
in my app project file I inject it
var testing = angular.module("testing", ["common.services", "ui.router", "ui.bootstrap"]);
markup
<span class="input-group-btn">
<button type="button" class="btn btn-default" is-open="opened" datepicker-popup="yyyy" ng-click="open1($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
main controller
angular.module("testing").controller("MainController", ["$scope", MainController]);
function MainController($scope) {
$scope.opened = false;
$scope.open1 = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = !$scope.opened;
};
}
but nothing is happening.
What am I missing?
Thanks
Whether you mentioned your complete markup or If this is your complete markup then it is wrong. This is what I use:
<input type="text" class="" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="startDate" min-date="minDate" max-date="cmaxDate" show-button-bar="false" show-weeks="false" is-open="isStartDatePickerOpen" required readonly/>
<span class="input-group-btn">
<button type="button" class="btn btn-default inline" ng-click="startDatePickerToggle()"><i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
Controller:
$scope.startDatePickerToggle = function(){
$scope.isStartDatePickerOpen = true;
};
How can I prevent the datepicker popup from opening at the same time when I click on only 1 input?
Plunkr
<form>
<div class="form-group">
<label for="fromDate">From:</label>
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" show-weeks="false" ng-click="open($event)" name="fromDate" id="fromDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<div class="form-group">
<label for="toDate">To:</label>
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="toDate" is-open="opened2" datepicker-options="dateOptions" ng-required="true" close-text="Close" show-weeks="false" ng-click="open($event)" name="toDate" id="toDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
</form>
I looked at your plunkr. In your script.js file you have the following
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
$scope.opened2 = true;
};
$scope.opened = true; and $scope.opened2=true; are both being set. This is forcing both of them to open. You are calling this function when either of the calendar buttons is clicked
ng-click="open($event)"
is-open will force the calendar to show when the variable is set somewhere else in code as well. Remember it is 2-way binding
As for your solution. A simple way I can think to fix it is to pass another variable into your open method telling it which button was clicked so
$scope.open = function($event, calId) {
$event.preventDefault();
$event.stopPropagation();
if(calId===1) $scope.opened = true;
if(calId===2) $scope.opened2 = true;
};
Then in your html for the buttons change to the following passing in a 1,2,3 etc.. for whichever datepicker on the page you want to display.
ng-click="open($event,1)"
I am using the angular-ui bootstrap datepicker component. on one view where I have two date fields, the datepicker opens up and after closed it opens up again when clicked fine.
On another page, after once opened and closed, the datepicker does not open up anymore.
Surely I'm missing something here, but I gave up after hours of trying to find it.
Can you help ?
the HTML section of the datepicker looks as follows:
<div class="input-group">
<input type="text" class="input-sm-7" datepicker-popup="dd/MM/yyyy" is-open="opened"
datepicker-options="dateOptions" ng-model="singleDate"
close-text="Close" />
<button type="button" class="btn btn-default" ng-click="open($event)"><i
class="fa fa-calendar"></i>
</button>
</div>
The JS code in the controller looks like this:
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
This is a known issue and there is a hack for it. Try this.
$scope.datePicker = {};
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.datePicker.opened = true;
};
Change in the Html
<div class="input-group">
<input type="text" class="input-sm-7" datepicker-popup="dd/MM/yyyy" is-open="datePicker.opened"
datepicker-options="dateOptions" ng-model="singleDate"
close-text="Close" />
<button type="button" class="btn btn-default" ng-click="open($event)"><i
class="fa fa-calendar"></i>
</button>
</div>
Here's my code:
<p class="input-group">
<input type="text" class="form-control date" id="startDate" placeholder="Start Date" ng-click="date.startDate=true" datepicker-popup="MM/dd/yyyy" ng-model="date.start" is-open="date.startDate" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="date.startDate=true" is-open="date.startDate"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
For some reason, I can't get the calendar button to open the datepicker up... I thought hvaing just ng-click would work but that isn't working.
Here is the controller code:
self = this;
self.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
self.opened = {};
self.opened[$event.target.id] = true;
// log this to check if its setting the log
console.log(self.opened);
};