i use Anguar-Ui Bootstrap http://angular-ui.github.io/bootstrap/
and i have implemented the "Accordion" from Angular UI and now i want add inside this Accordeon the Popup DatePicker from Angular UI.
The Problem is, if i click inside the Accordeon on the Date it opens the Popup so that i can choose the date but it opens this Popup inside the Accordeon. Is it possible that this popup is opened outside the Accordion window ? The Accordion Window is to small to display the whole date selector.
I hope you understand what i mean..
the code looks like that, the controller for the datePicker is the same as in the Angular UI example:
<accordion close-others="oneAtATime">
<accordion-group heading="Filter">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" 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="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</accordion-group>
</accordion>
EDIT: ok i have solved the problem i must only add "datepicker-append-to-body="true"" and now it works..
Here is the complete code, using the example used at Angular UI, showing where to set datepicker-append-to-body="true"
<div ng-controller="datePickerController" >
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-append-to-body="true" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" 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="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
The modification is on line 5, on the input element
Related
ng-change on uib-datepicker-popup is not working
Code in my html -
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" ng-focus="myFocus(123)" ng-change="mychange(987)"/>
<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>
Code in my controller -
$scope.myChange = function(para1) {
console.log("myChange -- "+para1);
}
Expecting mychange function to trigger whenever user types in a different date or when he uses the picker to select a date.
Plunker link - https://plnkr.co/edit/e20qSViEAh9dZ6GEFnVh?p=preview
I'm used to working with JSF/Primefaces.
To use a datepicker, I used to write:
<p:calendar id="button" value="#{calendarView.date3}" showOn="button" />
(http://www.primefaces.org/showcase/ui/input/calendar.xhtml)
Now I'm trying out Angular with angular-ui (https://angular-ui.github.io/bootstrap/). There is a datepicker directive (http://plnkr.co/edit/?p=preview).
However, from what I see, if I want to use a field with calendar button and popup, I need to manually create input-group with w field and button and some js functions that would handle the button click.
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" 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="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-6">
<p class="input-group">
<input type="date" class="form-control" datepicker-popup ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" 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="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
I find it hard to believe that everyone writes such components on their own (or uses this amount of code every time they need a date input).
Are there any predefined directives that would allow me to write one line of code to have a standard datepicker? Where do I find them?
There are lots out there. You could use Bootstrap UI or AngularStrap.
You could also take a look at some of the date pickers on ngmodules.org
Use latest angular material directives as very simple tags
<md-datepicker ng-model="myDate"><md-datepicker>
All demos available here
From my research and experience with dates and datetime in HTML5 and Angular; the best practice right now for Datetime is to make good use of HTML5 and moment.js. You can bind directly to input directives ng-model. If you just need a date picker, then make use of the angular-ui-datepicker directives. Also Angular Material is awesome. Check it out here
<div class="col-sm-4">
<label for="fltrStartDate"> Start Date: </label>
<input id="fltrStartDate" type="datetime-local" ng-model="$ctrl.startDate">
</div>
<div class="col-sm-4">
<label for="fltrEndDate"> Ends Date: </label>
<input id="fltrEndDate" type="datetime-local" ng-model="$ctrl.endDate">
</div>
Right now I can answer my own question - there is no "standard" library that will make the angular html templates code as concise as I would like it to be.
You need to write this much code - but, in return, you have a great freedom in customising the layout.
Bootstrap and material are great - thank you for all the answers!
I can't find a way to configure the angularjs ui-bootstrap datepicker popup so that it only shows the button, not the text input field in front of it.
Has anyone had a similar requirement?
This works:
.date-popup {
opacity: 0;
width: 0;
}
<p class="input-group">
<span class="input-group-btn">
<input type="text" class="date-popup"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" datepicker-options="dateOptions"
date-disabled="disabled(date, mode)" ng-required="true"
show-weeks="false" close-text="Close">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
Here's a version with some style tweeks - Plunker.
<p class="input-group" style="width:1px">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" style="width:0; padding:0" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
No need for additional css. Simply make the input type="hidden".
<input type="hidden"
class="form-control"
uib-datepicker-popup="{{format}}"
ng-model="dt"
is-open="picker.opened"
datepicker-options="dateOptions"
close-text="Close" />
<button type="button"
class="btn btn-default"
ng-click="picker.opened = true">Open Calendar</button>
You even get to lose the additional <input-group> related tags.
any ideas why my datepicker is not closing in IE9 after i select a date? close button not working either...
Code available on Plunkr.
<div ng-app="arApp">
<div ng-controller="AnnouncementRequestCtrl as vm">
<legend>Your announcement request</legend>
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)"
data-ng-animate="">{{alert.msg}}</alert>
<div ng-show="showForm">
<ng-form id="arform" name="arform" novalidate>
<div class="form-group" >
<label class="control-label">
start date<div class="help-block error" ng-show="arform.sdate.$error.required">*</div></label>
<div class="input-group">
<input type="text" class="form-control" name="sdate" id="sdate" datepicker-popup="{{format}}" ng-model="sdate"
is-open="opened1" min-date="minDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
ng-required="true" close-text="Close" required ng-focus="vm.open($event,'opened1')" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event,'opened1')">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
</div>
<div class="form-group" >
<label class="control-label">
end date<div class="help-block error" ng-show="arform.edate.$error.required">*</div></label>
<p class="input-group">
<input type="text" class="form-control" name="edate" id="edate" datepicker-popup="{{format}}" ng-model="edate"
is-open="opened2" min-date="sdate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
ng-required="true" close-text="Close" required ng-focus="vm.open($event,'opened2')" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event,'opened2')">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
</ng-form>
</div>
</div>
</div>
The problem is indeed caused by the ng-focus. When you select a date, it focus' back in the field and re-opens the dialog (which looks like the dialog doesn't close)
The solution is to use ng-click instead -- it's better for two reasons. First, because it actually works, with the dialog closing after selection. Second, it's better usability because if the user has their focus on the input field already and clicks the field, it re-opens the datepicker. ng-focus doesn't show the datepicker in this case.
Some code:
is-open="startDateOpen" ng-click="startDateOpen=true"
I my case, I added ng-click as follows:
ng-click="startDateOpen=!startDateOpend"
also, I removed ng-focus to prevent from two events to affect 'startDateOpen'
ng-focus="startDateOpen=true"
So for starters: the alerts array is not being used properly at all. There's a lot of code that does not function, or does not follow the example of how to use alerts
You do not anywhere call anything to add to the $scope.alerts adding the code <span>alert length: {{ alerts.length}}</span> to the html shows the length is always zero. Additionally the code to close is never called at all. Even if it was, as it sits, would not be able to close the pop-up since the reference to it isn't in the $scope.alerts array
The problem is caused by this:
ng-focus="vm.open($event,'opened1')"
I´m using the Bootstrap UI datepicker directive and I´m trying to have an datepicker button that opens the datepicker popup like in the original example but it does not work in a modal window.
See PLUNKER
What am I doing wrong?
Just change to: is-open="opened" to:
is-open="$parent.opened"
Fixed Demo Plunker
So relevant snippets of HTML will look like:
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd.MM.yyyy"
ng-model="dt"
is-open="$parent.opened"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn btn-default" ng-click="open()">
<i class="icon-calendar"></i></button> <b><- button not working</b>
</span>
</div>
I had to put a timeout to make it work:
function toggleStart($event) {
$event.preventDefault();
$event.stopPropagation();
$timeout(function () {
vm.isStartOpen = !vm.isStartOpen;
});
}
My template looks like this:
<input type="text" class="form-control"
datepicker-popup ng-model="vm.startDate"
is-open="vm.isStartOpen" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="vm.toggleStart($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
datepicker directive creates its own scope which is not accessible outside.So to solve this you can use.
$parent.isopen
or use some Object property name to avoid prototype Inheritance, like
$scope.config.isopen=true;
ng-model="config.isopen" instead of ng-model="isopen".
You also work like that to initialize the date picker by icon.
HTML
<p class="input-group" ng-disabled="invoiceDateDisable">
<input is-open="opened" type="text" datepicker-popup="M/d/yyyy" ng-model="Date" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
JavaScript
$scope.open = function () {
$scope.opened = true;
};
You don't really need an open function:
<div class="input-group">
<input type="text" class="form-control"
datepicker-popup="dd.mm.yyyy"
ng-model="dt"
is-open="$parent.opened"
ng-required="true"
close-text="Close" />
<span class="input-group-btn">
<button style="height:34px;" class="btn btn-default" ng-click="$parent.opened=!$parent.opened">
<i class="icon-calendar"></i></button> <b><- button not working</b>
</span>
</div>