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.
Related
I have the following code:
<input class="form-control"
uib-datepicker-popup="dd.MM.yyyy"
ng-readonly="!isEditable"
datepicker-append-to-body="true"
ng-model="logicalDepotVo.rtCreationDate"
is-open="isDatepickerOpen"
placeholder="Enter Creation Date"
ng-click="isEditable ? onCreationDateDatepickerClick() : ''"/>
The value does not view value of model, but bind model works as ng-model. When I removed uib-datepicker-popup, all works fine. I tried to remove custom format, play with other attributes, but have no any successful result. Maybe, somebody has an idea what should be done?
Probably this could explain your issue (check you ng-model for correct date format):
ng-model - The date object. Must be a Javascript Date object. You may use the uibDateParser service to assist in string-to-object conversion.
angularjs bootstrap
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);
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.
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
In my project I am using angularJS and momentJS for fixing the painful date formating part. I have two scenarios, here we go:
Retrieving the date from db and rendering it in UI:
I am getting the response from service in this formate "2016-01-31T20:30:00.000Z". I am using the above and rendering the date and time separately in the following way in UI
<input ng-model="data.startDate" type="date" name="startDate" disabled>
<input ng-model="data.startDate" type="time" name="startTime" disabled>
Its displaying like the image attached below
Its being displayed as YYYY-MM-DD in firefox and in the chrome as DD-MM-YYYY. I want to use the same object for displaying the date and time maintaining the date formate across all the browsers. How it can be achieved ?
I am using this datepicker. When the user selects the date I want show the date in the same format. In this scenario date and time inputs are taken separately and combined in the background.
So can someone help me in fixing the issue.
Convert all date format into string like .ToString("YYYY-MM-DD")
Format datepicker as dateFormat: "yyyy-mm-dd"