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);
Related
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
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 want to apply a format filter on an input's text but NOT on it's model, but update the ngModel with the proper ("pure") value when the user changes the value in the input field. Here is what i mean...
For example lets say i have this object:
$scope.myObject = {
value: 1234434.12,
format:"currency"
};
And this input:
<input type="text" ng-model="myObject.value" format="myObject.format" />
<pre>{{myObject.value|json}}</pre>
What i want is:
The text in the input to be: 1,234,434.12
The ngModel's value to be: 1234434.12
And when the user changes the input text from 1,234,434.12 to 1,234,555.60 i want:
The text in the input to be: 1,234,555.60
The ngModel's value to be: 1234555.60
As you can see i want to keep the binding but i also want the model to not be affected by the formatting. How can i achieve this?
You should be able to use the default currency filter provided by Angular.
If you use a filter, only the output to the screen is changed - the internal model remains intact. To see this, you can write something like this:
<br>internal model value: <span>{{data.value}}</span>
<br>formatted as currency (USD$): <span>{{data.value | currency}}</span>
You'll see that the internal model value is unchanged.
Here's a plunker with the full code.