Having trouble wrapping my head around how to handle dates

Question

I'm working on a scheduling system for music venues. The basic idea is that there's an "Create new schedule" page, on which there is a DatePicker calendar (using AngularUI Bootstrap). The user selects a Date, then adds performers into timeslots. The built object looks something like this:

{
  date: 2017-6-22 00:00:00.000-5:00
  venue: VenueID
  performances: [
    {
      performer: performerID,
      time: 2017-06-22 22:00:23.231-5:00
    },{
      perfomer: performer2ID,
      time: 2017-06-22 23:00:42.523-5:00
    }
  ]
}

There's a couple of problems here. For the original date selection, I set the time (using myDate.setHours(0,0,0,0)) to midnight because the time doesn't really matter, I only care about the actual date. Likewise for the timeslots, their date doesn't matter (since they belong to the schedule for that day), so I only care about the time. Then in another project, we have a node/mongo app that saves these schedules, and returns them to a page in the angular project that lets you select a schedule for editing/etc. It selects which ones to return by grabbing all the schedules for a specific venue, and doing "if (schedule.date >= new Date().setHours(0,0,0,0)) { add schedule to return list }"

Anyway, on to the actual problem. The angular app does all of the date calculations client side. What I mean is, I'm in CST. If I select a Date on the calendar and save a schedule for that date, then someone in EST selects the same day on the calendar and saves a schedule, they have different dates in the database. For example, when I make the schedule, the date in the DB is "2017-06-22 00:00:00.000-5:00". When the EST friend makes a schedule on the same date, it gets saved as "2017-06-22 00:00:00.000-4:00".

In the "Select a schedule to view/edit" page, I do something like this:

<select ng-model="schedule" ng-options="s.date|date:'fullDate' for s in schedules" ng-show="schedules.length>=1"></select>

Of course this doesn't work because when my EST friend looks at the list, he sees the correct date. But when I look at one that he created, the date is one day off because "2017-06-22 00:00:00.000-4:00" converted to local timezone is "2017-06-21 23:00:00.000-5:00".

I guess TL;DR is I'm not sure how to handle it since the venue and anyone creating/editing the schedules may not share the same time zone. I want all of the dates/times to show up in the timezone of the venue (which I have the address for. I guess I could geolocate to find timezone?). I'm just not sure how to go about it.

have a look at [moment.js](https://momentjs.com/) and make your life easier — Slim, Jun 23 '17 at 07:55

score 0 · Answer 1 · answered Jun 23 '17 at 05:53

The DatePicker gives you a date object. Instead of storing the entire value string just grab the day month and year Date(value).getYear() + '-' + Date(value).getMonth() + '-' + Date(value).getDate(). As for the times do the same as the dates. Store those values in the DB and then when you get them back you will have to convert them back to a date object so that the date picker can understand them.

Ultimately with this solution your just trying to store dates without the timezones. Make sure to state in your app that the times are for those areas.

*getFullYear* should be used instead of *getYear*, months are zero based so `getMonth()` should be `getMonth()+1`, continually parsing *value* is inefficient and problematic as it is not a standard format and returns an invalid Date in Safari at least. — RobG, Jun 23 '17 at 07:58

score 0 · Answer 2 · answered Jun 23 '17 at 07:07

You have to distinguish between the format the date/time is transported, saved vs. how the date will be shown to the user.

For transportation and saving use UTC in a format that is easy computable (eg. ISO8601).
For visualization to the user convert this value to the timezone and desired user format by using some helper library.

Having trouble wrapping my head around how to handle dates

2 Answers2