Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Date number doesn't accommodate zone

See original GitHub issue


  1. Set the timezone for moment globally: to America/New_York
  2. Set you computer’s clock to America/Los_Angeles (Pacific time)
  3. Observe the calendar day numbers are shifted off by one:

Power Calendar:

Google Calendar:

Proposed solution

If the date is November 7 2019, this line:

produces: 6 as the date. This is because JS Date objects always use the local computer’s zone. And 2019-11-07T12:00:00 in America/New_York is 2019-11-06T09:00:00 in America/Los_Angeles. Note the date number is different.

moment(date).date() produces: 7. Here moment’s date method accounts for the zone that is set to the default.

In short a fix would be to replace:

number: date.toDate(),


number: moment(date).date(),

Anywhere else in the code that uses native JS Date functions will possibly introduce this same issue since they won’t account for the zone that is set for moment.

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:4
  • Comments:9 (1 by maintainers)

github_iconTop GitHub Comments

patrickberkeleycommented, Apr 20, 2020

@jamesdixon yeah we monkey patch it:

// components/power-calendar/days.ts
import moment from 'moment';
// @ts-ignore
import EmberPowerCalendarDaysComponent from 'ember-power-calendar/components/power-calendar/days';

export default class PowerCalendarDaysComponent extends EmberPowerCalendarDaysComponent {
  buildDay(...args) {
    const day = super.buildDay(...args);
    day.number = moment(;
    return day;

And if you are using range you’ll need:

// components/power-calendar-range/days.ts
import moment from 'moment';
// @ts-ignore
import EmberPowerCalendarRangeDaysComponent from 'ember-power-calendar/components/power-calendar-range/days';

export default class PowerCalendarRangeDaysComponent extends EmberPowerCalendarRangeDaysComponent {
  buildDay(...args) {
    const day = super.buildDay(...args);
    day.number = moment(;
    return day;

Initialize the components (only needed if your overrides are done in one of your own addons):

// instance-initializers/power-calendar-overrides.ts
import ApplicationInstance from '@ember/application/instance';
import PowerCalendarDaysComponent from 'path/to/your/components/power-calendar/days';
import PowerCalendarRangeDaysComponent from 'path/to/your/components/power-calendar-range/days';

export function initialize(appInstance: ApplicationInstance): void {
  appInstance.register('component:power-calendar/days', PowerCalendarDaysComponent);
  appInstance.register('component:power-calendar-range/days', PowerCalendarRangeDaysComponent);

export default {

We are using moment, so run the date through it, but I’m assuming the above will work if you are using luxon and replace moment with luxon.

Boukecommented, Jun 22, 2020

Beware that the datetime you’re provided with in the action specified in onSelect is also in the browser’s local date. So when working with this date, make sure you convert it to whatever timezone your app is using.

Ideally we could set the display timezone of the calendar component, and work with either luxor or moment instances as well.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Working with Time Zones - W3C
6.5 Working with Date and Time Values that Require a Time Zone ... For example, Feburary does not always have the same number...
Read more >
Ten-Digit Dialing | Federal Communications Commission
A 10-digit dialed telephone call requires entering both the three-digit area code and the seven-digit telephone number to complete the call, even if...
Read more >
Date() constructor - JavaScript - MDN Web Docs - Mozilla
A library can help if many different formats are to be accommodated. Date-only strings (e.g. "1970-01-01" ) are treated as UTC, while date-time...
Read more >
International Date Line - Wikipedia
This date line is implied but not explicitly drawn on time zone maps. It follows the 180° meridian except where it is interrupted...
Read more >
Vault search FAQ - Google Vault Help
An incorrect time zone can lead to incorrect search results · the date and time · the query that generated the count ·...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found