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.
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.
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
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