Is there a possibility to also use $parser and $formatter for an input field and not only for a directive?
This is my input field (AngularJs DateTimePicker)
<input type="text"
class="form-control date"
name="date"
data-ng-model="vmModal.account.creationDate"
datepicker-popup="dd.MM.yyyy"
is-open="vmModal.openedDatePicker"
close-text="schließen"
current-text="heute"
clear-text="löschen"
datepicker-options="{startingDay: 1}"
placeholder="Datum">
[EDIT]
Actually I don't know what to do, I need the string representation of the date because I show it elsewhere in the application. The only possibility I know would be to have another field in my javascript object which represents a date object.
I may have miss-understood your problem, but from your EDIT, it seems that you need to display or use the date selected through the input in some other place. This is standard stuff to have one model and several views. In your case, you can just display vmModal.account.creationDate with a different format as the one used in the datepicker, using the angular date filter.
E.g. when you select the following date in the datepicker: 25.12.2016
<em>{{vmModal.account.creationDate | date:'EEEE, dd MMMM yyyyy' }}</em>
shall display
Sonntag, 25 Dezember 2016
See the plunker in action.
Note that you can specify alternate date formats for manual entry. In the plunker I added alt-input-formats="['dd/MM/yy']". The user can now enter 25.12.2016 or 25/12/16, both formatted dates will be parsed as date objects.
Related
I have a requirement to present a time input field using a timezone offset determined by the selection of a user-profile on the same form.
I am defining a getTzOffset fn on scope in a link function so that I can use it in ng-model-options like this:
<input ng-model="myTimeObject" type="time" ... ng-model-options="{timezone: getTzOffset()}" ... >
But that doesn't work. getTzOffset never gets called.
I'm using a datepicker with the input field, which requires a timezone. I don't need a modified date object or a string representation of it, I need the timezone-offset so the datepicker can know how to translate the date object properly into UTC time. I need that timezone to change when a different user is selected through the interface.
Is there any way to dynamically change an ng-model-options property?
You can use the angular date filter option : timezone.
Sample Plunker.
The idea is to use the third parameter to the date filter and make it changeable via a variable.
{{ inputTime | date: "HH:mm:ss": tzInput }}
You could also use $filter to generate values in code and store it, like:
$scope.inputTime = $filter('date')($scope.inputTime , "HH:mm:ss", $scope.tzInput);
I'm using the angular-moment-picker component for handling dates in my application and I'm working on introducing i18n support. I have the datepicker rendering correctly with arabic labels, however the submitted date string is also in arabic text. Is it possible to have the labels remain in the locale specified, but have the underlying model value remain in English format (to submit in, for example, YYYY-MM-DD format)?
The component has a change event, which I can use to listen to the date changing and reformat the date using the following code, however obviously the underlying model still contains Arabic text.
vm.onChange = function(newValue) {
var englishDate = moment(newValue, 'LL', 'ar').locale('en');
var date = englishDate.format('YYYY-MM-DD HH:mm');
// date correctly contains the english format date however it is not on the model variable
}
Thank you!
You can use different objects for the moment-picker and ng-model, where the one for moment-picker will be formatted and the ng-model will be a moment.js object.
<div id="fromDatePicker" class="input-group" moment-picker="vm.fromDateFormatted" format="L" ng-model="vm.fromDate">
<input class="form-control" ng-model="vm.fromDateFormatted" ng-model-options="{ updateOn: 'blur' }" placeholder="From date...">
<span class=" input-group-addon "><i class="icon icon-calendar "></i></span>
</div>
Use vm.fromDateFormatted for display and vm.fromDate in code like the change event
Formatted date: {{ vm.fromDateFormatted}}
Please see the answer in this issue for more information: https://github.com/indrimuska/angular-moment-picker/issues/92
Here's my html code:
<label>D.O.B: </label>
<input type="date" ng-model="dob">
In the Browser, datepicker pops up, when I pick a particular date and try to display, both date and time are displayed,something like this "2016-04-02T18:30:00.000Z".
My question is what should I do, so that only Date gets saved(i.e. excluding time)?
In Javscript there is no Date-only type. So instances new Date() always contain time. You should ignore them in code where you treat it.
When date is displayed in angular app you can use a filter, ex.:
<div>value = {{dob | date: "yyyy-MM-dd"}}</div>
As an option you can zero time part by dob = dob.getDate() before sending it somewhere...
Does angular localization provide this: Can the value format bound to ngModel change depending on the locale? I have an input control :
<input type="text" value={{from| date: 'shortDate'}} ng-model="from">
Currently the date is displayed in MM/dd/yyyy format. When i change the locale to German, the value bound to ngModel should update the format to TT/MM/JJJJ.
Should we write a filter for this? or Angular locale provides it?
for all date filter
Have you seen https://docs.angularjs.org/api/ng/filter/date?
From the docs it seems it does support
Angular supports i18n/l10n for date, number and currency filters.
I have found an issue with validation of a manually typed date value that falls outside of the minDate or maxDate values when using the datepicker-popup.
This can be demonstrated with the datepicker popup on the angular ui site by following the steps below: http://angular-ui.github.io/bootstrap/#/datepicker
Ensure the min date option is turned on (min date should equal today)
Type in yesterdays date to the datepicker-popup
This shows a red border around the inline datepicker (as it is flagged as ng-invalid-date) however the input box for the datepicker-popup is still valid.
On further investigation it seems that the ng-invalid-date attribute has been set against the popup part of datepicker and not against the input box. This causes issues because firstly, the user cannot see that the element is invalid and secondly the popup does not have a name property so I am unable to check validity from the ng-form (e.g. myForm.myDate.$invalid
Does anyone know any way around this?
You can do an additional validation on ng-change for the text field and setValidity of that field to false to achieve what you want. Here is a plunker that demonstrates the idea.
http://plnkr.co/edit/N9Hk9QFIfj3IXfHoWwbt?p=preview
I added a little css styling to get the red border to show when the field is invalid. The validity test is very basic; you'd want to enhance it to allow the current day.
If you have the input set up like this, <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="date" is-open="open" datepicker-options="datePickerDateOptions" close-text="Close" ng-change="change()" />
then in your controller you can check what $scope.date is in your $scope.change() function. If $scope.date is undefined then its not valid. If its null then its empty. Anything else is a valid date.