Time zones in JavaScript
-
Upload
adam-hodowany -
Category
Software
-
view
434 -
download
0
Transcript of Time zones in JavaScript
![Page 2: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/2.jpg)
https://en.wikipedia.org/?title=Time_zone#/media/File:World_Time_Zones_Map.png
![Page 3: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/3.jpg)
Daylight Saving Time Explained by CGP Grey
https://youtu.be/84aWtseb2-4
![Page 4: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/4.jpg)
![Page 5: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/5.jpg)
<select>
![Page 6: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/6.jpg)
![Page 7: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/7.jpg)
Time Zone != Offset
![Page 8: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/8.jpg)
UTC - time standard GMT - time zone
(since 1972)
![Page 9: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/9.jpg)
Date formats
![Page 10: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/10.jpg)
Best case scenario - ISO 8601
offset
2015-06-25T07:38:12+00:00
2015-06-25T07:38:12+0000
2015-06-25T07:38:12+04:30
2015-06-25T07:38:12-01:00
2015-06-25T07:38:12-04
![Page 11: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/11.jpg)
2015-06-25T07:38:12Z
![Page 12: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/12.jpg)
2015-06-25T07:38:12ZZulu time == UTC
![Page 13: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/13.jpg)
Other formats
![Page 14: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/14.jpg)
![Page 15: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/15.jpg)
2018-10-06T23:21:00+01:00
My system’s offset: +2
![Page 16: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/16.jpg)
date = '2018-10-06T23:21:00+01:00'
$filter('date')(date, 'dd-MM-yyyy')=> 07-10-2018
moment(date).format('DD-MM-YYYY')=> 07-10-2018
new Date(date).toString()=> Sun Oct 07 2018 00:21:00 GMT+0200 (CEST)
![Page 17: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/17.jpg)
date = '2018-10-06T23:21:00'
$filter('date')(date, 'dd-MM-yyyy')=> 06-10-2018
moment(date).format('DD-MM-YYYY')=> 06-10-2018
new Date(date).toString()=> Sun Oct 07 2018 01:21:00 GMT+0200 (CEST)
![Page 18: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/18.jpg)
date = '2018-10-06'
$filter('date')(date, 'dd-MM-yyyy')=> 06-10-2018
moment(date).format('DD-MM-YYYY')=> 06-10-2018
new Date(date).toString()=> Sat Oct 06 2018 02:00:00 GMT+0200 (CEST)
![Page 19: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/19.jpg)
date = '2018-10-06'
$filter('date')(date, 'dd-MM-yyyy')=> 06-10-2018
moment(date).format('DD-MM-YYYY')=> 06-10-2018
new Date(date).toString()=> Fri Oct 05 2018 21:00:00 GMT-0300 (BRT)
My system’s offset now: -3
![Page 20: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/20.jpg)
WHAT IF
We’d like to show date and time in user’s time zone that doesn’t equal her operating system’s time zone?
![Page 21: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/21.jpg)
![Page 22: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/22.jpg)
AngularJS
![Page 23: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/23.jpg)
AngularJS
![Page 24: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/24.jpg)
![Page 25: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/25.jpg)
angular.module('project').filter('myDate', function($filter, User) { return function(input) { return $filter('date')(input, 'dd-MM-yyyy', User.current.timezone_offset); };});
![Page 26: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/26.jpg)
How to get offset?
![Page 27: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/27.jpg)
1. It’s back-end problemtz = ActiveSupport::TimeZone.new("Europe/Warsaw")
tz.utc_offset=> 3600 # offset in seconds: +1 hour even thoughcurrently it’s DST and it should be +2
tz.now.dst? # now -> passing the context=> true
tz.at(6.months.ago).dst?=> false
tz.now.utc_offset=> 7200
![Page 28: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/28.jpg)
2. It’s front-end problem
jmp momenttimezone
![Page 29: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/29.jpg)
Moment Timezone
![Page 30: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/30.jpg)
![Page 31: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/31.jpg)
moment('2018-10-06T23:21:00+01:00') .tz('America/Los_Angeles') .format()=> 2018-10-06T15:21:00-07:00
![Page 32: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/32.jpg)
moment.tz .setDefault('America/Los_Angeles')
moment('2018-10-06T23:21:00+01:00') .format()=> 2018-10-06T15:21:00-07:00
![Page 33: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/33.jpg)
Possible problem?
'America/Los_Angeles'
Rails match this format:
https://github.com/rails/rails/blob/a0a6e0292f66b546a3aee6893136a89bfd10579c/activesupport/lib/active_support/values/time_zone.rb#L43
![Page 34: Time zones in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022051502/58f284f91a28ab72588b4629/html5/thumbnails/34.jpg)
Thank youQuestions?