[SOLVED] Bootstrap 3 Datetimepicker and time zones

help
1

I have a problem with feeding my datetimepicker with the right date value as the picker’s default value to display on a page rendering. I use tsega:bootstrap3-datetimepicker.

The picker converts all dates to UTC+0 no matter how I feed it. I can feed it with a string value, UTC Date, even using moment.tz. It STILL ends up with UTC+0 anyway.

Let’s say I want to feed it with current time (Swedish Time Zone)

2018-01-02T15:59:23+01:00

I want the picker to display:

2018-01-02 16:59

Instead it displays

2018-01-02 15:59

This is my code in Meteor:

Template.addObject.onRendered( function() {
  var swe = moment.tz(new Date(), "Europe/Stockholm");
  this.$('.datetimepicker').datetimepicker({
    calendarWeeks: true,
    format: "YYYY-MM-DD HH:mm",
    locale: moment.locale('se'),
    defaultDate: swe
  });
});

<div class="input-group datetimepicker">
   <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
   <input class="set-due-date form-control" type="text" id="closingdate"/>
</div>

I rather avoid adding and subtracting time in the javascript Date Object, since swedish time zone has daylight savings, so it varies between UTC+01:00 and UTC+02:00. Moments.tz takes this into account when converting dates. Any ideas?

2

According to the moment-timezone documentation you need to add the timezone first

moment.tz.add("Europe/Stockholm|CET CEST|-10 -20|01010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010|-2azC0 TB0 2yDe0 1a00 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1fA0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1fA0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1fA0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 WM0 1qM0 WM0 1qM0 11A0 1o00 11A0 1o00|15e5");

console.log( moment.tz( "Europe/Stockholm").format(), moment.tz.names() );
3

Thanks for the input, jamgold. But my problem is not converting between dates with different timezones when using moment.tz. My package https://atmospherejs.com/aldeed/moment-timezone already handles that and has inclusion of all timezone data files built in by default. I get the expected/desired results when converting my dates, that is not my issue.

The problem is that the datetimepicker don’t accept a moment.tz-date. It still shows the UTC+00:00 date. Exactly as I described above.

4

Sorry, I missed that. Have tried setting the date picker option useCurrent to false?

5

Yup, tried that earlier. Tested setting the useCurrent option to false again to be sure, but still not working. I can not for the world of me understand this problem… :frowning:

6

ok, I just added tsega:bootstrap3-datetimepicker and aldeed:moment-timezone to a bootstrap project and initialized it like this

Template.datetimepicker.onRendered(function() {
  var swe = moment.tz(new Date(), "Europe/Stockholm");
  this.$('.datetimepicker').datetimepicker({
    useCurrent: false,
    locale: moment.locale('se'),
    defaultDate: swe,
    inline: true,
    sideBySide: true
  });
});

and this is my output (I am in Pacific Timezone)

bsdt
bsdt1224×416 41.5 KB

2 Likes
7

Bingo! Your combo did the trick! It works perfectly. Will try it on my production server with a different time zone and see what happens. I probably need to adjust the dates on the server, but that’s a breeze with moment timezone. Thanks a heap jamgold.

8

Sorry, I was too quick. The old code in memory was playing a trick with me and messed things up. The only way around this problem for me, is to add +1 hour for a date I feed the picker with. I just use:

Template.addObject.onRendered( function() {
  // It seems to be needed to add an hour for the picker to work with correct time.
  // On the server, we will subtract the time
  var dpDate = new Date();
  dpDate.setHours(dpDate.getHours() + 1);
  this.$('#datetimepicker').datetimepicker({
    calendarWeeks: true,
    locale: moment.locale('se'),
    defaultDate: dpDate,
    inline: true,
    sideBySide: true
  });
});

I will polish the code with some parsing of the time zone to parry the daylight settings. But it works for now.