My code is too large to post here, so I just post the relevant parts.
I have a fairly large app and now I want to add a datapicker. I copied the code from the Angular UI bootstrap site.
In my controller I initialize
$scope.popup1 ={'opened': false}
$scope.dt = new Date();
and declare
$scope.open1 = function()
{
$scope.popup1.opened=true;
}
and, in my view I have
<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>
when I click the button, the function is called and $scope.popup1.opened is set to true.
However, the datepicker does not pop up.
Am I missing something obvious? Do I need to enable the datepicker or something?
I had a similar problem once that a calendar popup didn't show up. It turned out to just be a CSS problem, it was hidden behind another object. See if you can find the popup anywhere in the DOM and then check what it's z-index CSS property is set to.
Related
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 am using Angularjs ui bootstrap date picker but the icon <i class="glyphicon glyphicon-calendar"></i> is not appearing properly in firefox but the icon is fine in Chrome. Please see the attached screen shot for Mozilla. How can I fix it?
The following is my jsp code:
<input type="text" class="form-control" ng-disabled=true datepicker-popup="dd-MMM-yyyy" style="height: 20px; width: 79px" ng-model="ui3DataSet.toDate" is-open="openedSecond" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<button type="button" class="btn btn-default" ng-click="openSecond($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
In my app I use the tag span
instead of the tag i. This works for me. (I can't write comments)
I have two datepickers that now work but I still can't get the button to work.
I implemented the solution from here but it gets rid of the button. I'd like to keep the calendar button.
How can I keep the calendar button working?
edit: to clarify, it works only for the first click
<div class="input-group">
<input type="text"
datepicker-popup="MM/dd/yyyy"
ng-model="report_args.start_date"
is-open="opened1"
ng-click = "report_args.start_date.open = true"
max-date="maxDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
class="form-control">
<span class="input-group-addon" ng-click="open($event,'opened1')">
<i class="fa fa-calendar"></i>
</span>
</div>
JS
$scope.open = function($event, opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
What's happening is that the directive is making it's own copy of $scope.opened1 in it's child scope. When it first opens up, it works because it reads the value from the parent scope, but then when it is closed, the opened1 value is updated in the child scope and now you can't modify from outside the child.
What you need to do is use the "dot" notation.
JS
$scope.dpOpened = {
opened1: false,
opened2: false
};
$scope.open = function($event, opened) {
$event.preventDefault();
$event.stopPropagation();
$scope.dpOpened[opened] = true;
};
HTML
<div class="input-group">
<input type="text"
datepicker-popup="MM/dd/yyyy"
ng-model="report_args.start_date"
is-open="dpOpened.opened1"
ng-click = "report_args.start_date.open = true"
max-date="maxDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
class="form-control">
<span class="input-group-addon" ng-click="open($event,'opened1')">
<i class="fa fa-calendar"></i>
</span>
</div>
Read this wiki entry on Understanding Scope in AngularJs
I am working on Angular application. I have 2 Angular Datepickers on the page. Right now I am able to open the datepicker popup when i click the datepicker icon and when I focus the field but my requirement is that datepicker popup should be available only when user clicks on calendar icon. I dont want datepicker popup opened on focus of datepicker field.
Assuming you are talking about angular-ui directives, use the example in the official documentation
<h4>Popup</h4>
<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>
I have used the same code but somehow its opening the datepicker popup when I focus the date field. I dont know how to prevent it to open the popup on the focus.
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