I don't know of a simple way to describe this, so this description will be kind of long. Apologies beforehand.
Okay, imagine you live Chicago and you own a business. You write a web app such that you can make an online schedule for your employees that they can check to see when they work each week. Ie, you select a date (in this instance with Angular-UI Bootstrap Datepicker), then you pick to pick a time (using Timepicker) and set an employee to work at that time.
Now, one week you need to go out to California for a business trip. However, you still need to make the schedule out for the next week while you're out of town. Because javascript dates always adjust to local time, if you put "Jake works at 8 pm" on the schedule while you're in California when Jake logs in to look at it, he will see that he works at 10 pm because the 8 pm local California time is 10 pm local CST time.
So, you want all dates and times chosen in your schedule maker to always been in your "home" time zone. IE, no matter where you are, if you set "Jake works at 8 pm", it will always show up as 8 pm CST.
Okay, that's the basic setup. I have all of that working using a little bit of a hacky workaround server side after the "Jake works at 8 pm" message gets sent over. I pull the month, date, year, hours, and minutes out of the sent time, use moment-timezone.js to make a new moment with that date/time but in my "home" time zone, then I convert that new moment into UTC and save it to the DB.
So, back to the client side. I have 3 pages. "New Schedule", which sends the schedule off to the server where it does all the transformation stuff. Then a "View Schedule" page, where I get all of those UTC times back and display them in my 'home' timezone using
Date.toLocalString('en-US', {set of locale options including timeZone: 'America\Chicago'})
So, my "New Schedule" and "View Schedule" pages are working fine. All of the times get remade as a CST time using the exact input time, then converted to UTC. Then the display view outputs them as the correct timezone.
Now, my problem is the last page. My "Edit Schedule" page for making changes to a schedule that's already been saved.
I can't figure out a way to re-adjust my times after they come back from the server to the edit page. So, in this instance, I originally put in "Jake works at 8 pm (and I was in PST when I made it)", which gets converted to "Jake works at 8 pm CST", which gets converted to "Jake works at 15:00 UTC" and saved. Now, my 'View Schedule' page pulls that information, when I load that into the model for my Timepicker, it takes that 15:00 UTC and loads the time picker with 6 pm PST because I'm still in Cali while trying to edit the schedule.
I can't figure out a good way to deal with this. Or maybe there's a better time picker widget I could use that lets you set a default timezone from which it parses the ng-model Date object? I don't know, any ideas would be appreciated!
