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.
Related
I am using Ant Design (3.x) in my react application. It's a timezone based application. we have timezone list as dropdown in the top bar. when we select any timezone, all the date and time fields ( Table column data, Tooltip, summary data, etc...) in the app are changing accordingly.
HKT Time:
IST Time:
But, Inputting date and time in DatePicker is not changing based on Timezone
HKT Time:
IST Time:
It is only taking the computer's timezone (My guess). I am using moment timezone package for converting date and time based on Timezone. This package only antd is using.
Try setting/updating the timezone upon drop-down value change with moment-timezone (call the setDefault with specific timezone value upon drop-down change). For example,
moment.tz.setDefault("America/New_York");
Ant design DatePicker is picking the timezone as per moment.tz.setDefault - CodeSandbox example for the same
For additional information on default timezone check the official docs
With dayjs the accepted solution didn't work for us. We wanted our date to be displayed in UTC and ended up making a custom format like
format={date => date.utc().format("MMM DD, YYYY HH:mm:ss")}
You could do something similar with a timezone like
format={date => date.tz("America/Los_Angeles").format("MMM DD, YYYY HH:mm:ss")}
Note: you will need to add the utc and timezone plugins
import utc = from 'dayjs/plugin/utc';
import timezone = from 'dayjs/plugin/timezone';
dayjs.extend(utc)
dayjs.extend(timezone)
I'm using React Big Calendar week's view. The default locale is en-US and this one I'm using currently and would like to still use it. Also I'm staying in +1 timezone.
When I'm fetching some calendar data from API all data I get is given in UTC. What I find strange is that when time change occurs (week: 29.03 - 4.04) 3:00 AM is shown twice. Also which is even stranger all my events are moved lower by one hour. For example, before time change from API I'm getting event starting at 4AM UTC so it is correctly shown as 5AM in calendar (due to my +1 timezone). After time change I'm getting 4AM UTC but it is shown as 6AM UTC.
I'm not sure if it is deliberately that way but I would like to have it shown exactly the same (ie. 5AM before and after time change).
Thank you for helping.
I've imported localizer in that way:
import { Calendar as BigCalendar, momentLocalizer } from 'react-big-calendar';
const localizer = momentLocalizer(moment);
<BigCalendar ... localizer={localizer} ... />
The (0.36.0) latest version of RBC has full timezone support now, when using either the momentLocalizer or the new luxonLocalizer. Doc site isn't up to date yet, but if you run the 'examples' locally you'll find all the info.
The issue of seeing 3AM twice is that date is the beginning of Daylight Savings for your timezone.
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.
Given a ui control that when you select 01/01/2017 it returns a Javascript date as "Sun Jan 01 2017 05:00:00 GMT+0000" (note, an actual Javascript Date object) so its not a string...
However, I definitely need the date part (01/01/2017) and "as UTC"
C# has a DateTime.SpecifyKind(datetimevalue, DateTimeKind kind) method
Basically whats the equivalent to this that doesnt convert it:
moment(vm.theDate).specifyKind(utc)
Looking for to get a moment instance that is 01/01/2017, isUtc=true, from that type of Javascript Date UI control. (Its the Angular ui-datepicker control)
You should look in the UI control's docs for a way to retrieve the selected value as a string instead of a date object. A date object will be influenced by the local time zone, which will throw off your results - especially around DST transitions. Many good datepicker controls will offer this as a separate property (ex, theControl.value or theControl.text instead of theControl.date). Without knowing the specific control you are using, I can't offer anything more specific.
Once you have the string, use moment.utc(yourInputString, yourInputFormat)
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.