Basically,
I received a date from my server which is, when printed out in the web console, this : Date 2016-05-04T09:00:00.000Z
Since, im using AngularJs, I did a binding using ng-model with an input time type.
Now the problem, is when ever I show the date in that input, I dont see:
9:00, but 5:00 (9:00 - 4:00) (I'm in a GMT -4 zone)
However the date isn't supposed to be a Universal Time, but as you can see it is parsed to local time. Any way to stop this?
The time zone to be used to read/write the Date instance in the model can be defined using ngModelOptions. By default, this is the timezone of the browser. AngularJS API input[time]
In your case the following option should do the trick.
<input type="time" ng-model-options="{ timezone: '-0400' }">
But beware with this option you are overwriting the browser's timezone. That means if a user operates in UTC+2 the input time is still treated as UTC-4.
Related
I am using this calendar https://github.com/mattlewis92/angular-bootstrap-calendar for showing events and time slots for people all over the world. During sign up, every user has to set his timezone and then my application uses this timezone for further date computation rather than client machine timezone.
The problem is that when I make user timezone default using moment.tz.setDefault(timezone) and change the machine's timezone, the calendar calculates dates wrongly.
Here is my excerpt of my code:
moment.tz.setDefault($rootScope.timezone)
vm.calendarView = 'month';
vm.viewDate = moment().startOf('month').toDate();
vm.cellIsOpen = true;
Attached is the screenshot:
[Screenshot]
You can see that user's timezone is currently Asia/Karachi +5 and my machine's timezone is Beijing +8. Today's date is 8 September and the day is Friday, but on the calendar 8 September is showing as a Saturday instead of Friday.
mwl-calander did not provide support for timezone, you can use full calander
https://fullcalendar.io/
Demo https://fullcalendar.io/js/fullcalendar-2.9.1/demos/timezones.html
Its angular directive can be found at
https://github.com/angular-ui/ui-calendar
It would appear that this particular UI control does not support selecting a time zone. Simply using moment.tz.setDefault is not good enough, because everything the control is doing both internally and in its external API is using Date objects, which cannot represent arbitrary time zones. In other words, the author of that control would have to remove all .toDate() calls and use Moment objects as the primitive in the control instead of Date objects. That would be a breaking change for them.
I suggest filing an issue in that project's GitHub repository, and reference this page.
Is it possible to prevent an AngularJS app to start during business hours ?
Let's say that I do not want the app to be working between 8h and 18h. During this time, I want to display a page saying that the user must come back at the time left.
If I got your question right, you should do this on the server side.
On business time your webserver is responding with the "please come back later" site and during out of business your webserver could serve your site with angularJS Code.
Yes it's possible.
JavaScript allows to get date, and time using Date object. For example
var date = new Date(); // Will set date variable as current date object
console.log(new Date().getTime()) // Will print time (milliseconds since midnight of January 1, 1970)
You can further process the date using Moment JS library - http://momentjs.com/
Using Moment JS you can extract hour, and minute and set simple boolean variable in scope. Let's name it businessHours.
Then you can create two div elements with ng-show/ng-hide commands:
<div ng-hide='businessHours'>
<!-- application -->
</div>
<div ng-show='businessHours'>
<!-- error message saying that the user must come back at the time left -->
</div>
BUT keep in mind it's very easy to hack. If user simply change hour on his machine the application won't show error message. So this check should be moved to server side code. But it's not Angular matter anymore.
You could do this from angular but you'd need to get the current time from a reliable source, not the client.
Some examples of free api for time check:
https://timezonedb.com/api
http://www.geonames.org/export/ws-overview.html
I'm having a hard time to have an active data for the calendar date on my system. I am using Visual Test on SilkTest, and I have noticed that whenever I am clicking a value from the calendar, I'm getting a #time property. And that time property contains the Epoch Time format.
So whenever I try to playback the script, there are instance that I will get an error where Silktest cannot locate the selected date on the recording. Do you have any idea on how can I convert the Epoch time to its specific value?
Screenshot:
Use the identify tool to see whether there are other properties that you can use to identify the control instead of using the #time value.
I am evaluating angular-bootstrap-datetimepicker, is there a way to set the timezone for the component so the dates on the screen would appear in some custom timezone like UTC? E.g. when I am in GMT+3 and I click on the UI button for "Aug 13 2PM", and output the following:
From: {{date.date}}<br>
From: {{date.date | date:'yyyy-MM-dd HH:mm'}}
The output will be 3 hours apart, where the local time corresponds to the button in the UI, meaning that on the UI, I see local times - not UTC time. For example:
From: "2015-08-13T11:00:00.000Z"
From: 2015-08-13 14:00
I also tried running moment().utcOffset(0) immediately after loading moment.js, it didn't help.
How do I set the component to show the UI in a custom timezone?
There is currently no way to set the timezone, it always uses the timezone of the browser.
If you just need utc dates (i.e. milliseconds), there is a new modelType setting that allows you to always work in UTC.
Let's assume I have an object saved to $scope.person as follows:
{name:"John",birthday:1381227352421}
In order to keep clean and universal, the server keeps all date/time stamps as universal from epoch.
When I display the object, I want to be able to do
<span>{{ person.birthday | date }}</span>
The above works just fine in presenting the browser local date/time, but I want it user-controlled, or perhaps I have different objects, each of which needs a different time presented.
How can I control the date filter so it presents for specific timezones?
EDIT: as requested, further explanation. I want to be able to do something like
<span>{{ person.birthday | date:'tz-'mytime }}</span>
Then I can have a pull-down where the user picks "EDT" or "UTC" or "PST" etc. When they do, the date of 1381227352421 is presented in the appropriate timezone.
What I'd do is implement a custom directive. As you said, you'd like to have a selectbox/pulldown where the user selects its favourite timezone. This is DOM manipulation, right ? And DOM manipulation, in AngularJS, should always been done in a directive.
A directive that would look like that :
<timezonechooser data='birth'></timezonechooser>
Here's a simple Fiddle : http://jsfiddle.net/Bm2Mh/
Have you looked at angular-moment ?