Sunday, August 20, 2017

Set calendar timezone in angular-bootstrap-calendar?

By Hường Hana 7:00 PM Leave a Comment

I'm using angular-bootstrap-calendar to display the calendar of an short term rental listing. Currently, the calendar displays the dates in the timezone of the browser but the user isn't always in the same timezone as the listing they are managing.

How can I set the calendar's timezone so that it shows the dates in the timezone of the listing and not the timezone of the bowser?

1 Answers

Answers 1

Try using this library: https://github.com/mde/timezone-js.

In their documentation have a large sort of examples from what you can do.

The timezoneJS.Date constructor is compatible to the normal JavaScript Date constructor, but additional allows to pass an optional tz (timezone). In the following cases the passed date/time is unambiguous:

timezoneJS.Date(millis, [tz]) timezoneJS.Date(Date, [tz]) timezoneJS.Date(dt_str_tz, [tz])

dt_str_tz is a date string containing timezone information, i.e. containing Z, T or a timezone offset matching the regular expression /[+-][0-9]{4}/ (e.g. +0200). The one-stop shop for cross-browser JavaScript Date parsing behavior provides detailed information about JavaScript date formats.

In the following cases the date is assumed to be a date in timezone tz or a locale date if tz is not provided:

timezoneJS.Date(year, mon, day, [hour], [min], [second], [tz]) timezoneJS.Date(dt_str, [tz])

Examples

Create a timezoneJS.Date the same way as a normal JavaScript Date, but append a timezone parameter on the end:

var dt = new timezoneJS.Date('10/31/2008', 'America/New_York'); var dt = new timezoneJS.Date(2008, 9, 31, 11, 45, 'America/Los_Angeles');

EDIT

I believe that you problem is the same of the following post: Angular UI DatePicker adjusting for timezone

So, according they answers you have two options:

  1. Use a directive to reformatting the value whenever a date is selected on the datepicker (This one, by example)
  2. Use the bootstrap-calendar 2.3.1 (or later) version, where you can use the datepicker like this:
input  uib-datepicker-popup  ng-model="$ctrl.myModel"  ng-model-options="{timezone: 'utc'}"
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment