onDateSelected is passing the wrong date

[randomprogramming]

I have a simple CalendarStrip component and I am trying to log the date using the onDateSelected prop. Here's my code:

    <View>
      <CalendarStrip
        scrollable
        style={{height: 100, paddingHorizontal: 8}}
        calendarHeaderStyle={{color: 'white'}}
        dateNumberStyle={{color: 'white'}}
        dateNameStyle={{color: 'white'}}
        iconStyle={{display: 'none'}}
        calendarHeaderPosition="below"
        onDateSelected={(date) => console.log(date)}
      />
    </View>

but the date that is being passed in my function is wrong by one hour. When I click on 26th Dec I get LOG "2020-12-25T23:00:00.000Z". Is this maybe supposed to happen and I'm supposed to increase the date by one hour manually or is something broken? Could this be a timezone issue?

[peacechen]

It looks like you're in timezone with a +1:00 offset. The datetime printed in the log is UTC midnight. If you're east of UTC, it could offset to the previous date unfortunately. A relatively easy solution would be to set all dates internally to 12pm UTC. That way no matter what TZ the user is in, the date portion should always stay the same. If you have time, please submit a PR that sets the hour after the Moment date is created. This could be done in createDays(), though it may be easier to set it on startingDate since the rest of the days are created from that.

[randomprogramming]

Sorry I'm not very familiar with the moment library used here, but when you create a new Date() in JavaScript, you get the local current date. I'm wondering if there would be a way to replicate that with the moment library since the current time doesn't matter in this context, it's only the date we are interested in.

[peacechen]

RNCS creates a new date for startingDate in the current TZ if none is passed to it. The console.log is changing it from local TZ to UTC, as indicated by the "Z" at the end of the datetime string.

As a test to see whether the 12pm trick works, try passing this to startingDate:

const startingDate = moment();
startingDate.set({ hour: 12});
...

      <CalendarStrip
        startingDate={startingDate}
        ...
      />

If that works, I'll modify the code to create dates with the 12pm offset.

[randomprogramming]

Hey thanks a lot for that solution. I'm sorry for taking so long to respond, it's been a shaky few days here in Croatia...

Anyways, that solution you provided fixed the problem. The onDateSelected now passes the correct date. I'm just wondering if this will work the way it should once the clock gets moved by one hour again? Again, thanks so much!

[peacechen]

It should remain on the same date because the 12 hour offset prevents it from crossing the date boundary.

I'll update the code in RNCS to do that internally so you don't need to. Depending on how much time I have, hopefully the next release will be in a few days.

[peacechen]

Published in 2.1.1 Happy New Year 🎆