Using Angularjs with spring(java)
I have following Angularjs bootstrap datepicker. it shows error when field is empty i am trying to inplace mindate validation which is today's date. if user type min-date should display error msg.
I tried placing check like 'form.offerStartDate.$error.mindate' but there is no property for mindate in error object. any help appreciated.
<p class="input-group">
<input type="text" name="offerStartDate" class="form-control" ng-required="true"
ng-class="{error: form.offerStartDate.$dirty && form.offerStartDate.$invalid}"
datepicker-popup="MM-dd-yyyy" ng-model="formData.offerStartDate"
is-open="startDateOpened" min-date="minDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
close-text="Close" /> <span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,'startDate')">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
<div ng-show="form.offerStartDate.$dirty && form.offerStartDate.$invalid">
<small class="err-msg" ng-show="form.offerStartDate.$error.required">
Offer Start Date is required.
</small>
<small class="err-msg" ng-show="form.offerStartDate.$error.mindate">
Offer mindate is today's date.
</small>
</div>
Try to change min-date to min in input
It may be related with this issue:
https://github.com/angular-ui/bootstrap/issues/2189
Related
Is there a way to change the starting day for the ui-bootstrap date picker for AngularJS? At the moment, from left to right, the days starts Monday and ends on Sunday, and I would like the days to start on Saturday and end on Friday.
Here is a plunker
<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" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
You already assign startingDay, put it to 6 and it will start on saturday.
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 trying to custom the ui.bootstrap.datepicker there http://plnkr.co/edit/?p=preview
I would like to set the format to dd-MM-yy and make it work with the input with the mask (the second one below 'Popup' in the plunkr)
<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>
I have added a new format in script.js :
$scope.formats = ['dd-MM-yy', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
Is there a way to change the format of the second datepicker (under 'Popup'), the one with <input type="date"...> ?
Thanks.
HTML5 date input types do not support custom formats. See Is there any way to change input type="date" format? for more information. I think it is better to change input type to text, like the first one.
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 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