Javascript new Date() Concat Date and Time Doesn't Work on Mobile Browsers

Question

I'm using an open-source script that adds an event to an external calendar. I am also using moment to alter time format.

  this.addToCalendar = createCalendar({
    options: {
      class: 'addtocal-btn',
      id: 'event-' + this.item.id                                // You need to pass an ID. If you don't, one will be generated for you.
    },
    data: {
      title: this.item.title,     // Event title
      start: new Date(this.calendarDate(this.item.start_date) + ' ' + moment(this.item.start_time, ["h:mm A"]).format("HH:mm")),   // Event start date
      end: new Date(this.calendarDate(this.item.end_date) + ' ' + moment(this.item.end_time, ["h:mm A"]).format("HH:mm")),     // You can also choose to set an end time.
      address: this.item.location,
      description: this.item.description,
      timezone: 'America/Detroit'
    }
  });

Unfortunately, the date and time are separate in the database, and so I have to concatenate the two inside of the Date() function.

A sample start_date would be '2018-10-15 00:00:00', while a sample start_time would be '10:00 p.m.' Hence why I have to run start_date through a function and start_time through moment to get the proper formatting.

// If 2018-10-15 00:00:00 is passed, returns 2018-10-15
calendarDate: function (value) {
  var arr = value.split(' ');
  return arr[0]
},

Anyway the problem is that, while this works just fine on desktop browsers, it does NOT work on mobile browsers. And as I am unable to do any testing directly on the mobile device, I can't diagnose the problem directly.

I've been able to narrow the issue down to the concatenation of the date and time, but I don't know why the desktop browsers accept it and the mobile browsers don't (FYI, I have tried this in Safari and Chrome on an iPhone6s Plus)

score 0 · Answer 1 · answered Oct 15 '18 at 20:33

So it looks like the mobile browsers (for whatever reason) didn't like the .format("HH:mm") of moment. So I just ditched moment altogether and converted AM/PM to 24-hour format manually (using code from here):

convertTimeformat: function(time) {
    var hours = Number(time.match(/^(\d+)/)[1]);
    var minutes = Number(time.match(/:(\d+)/)[1]);
    var AMPM = time.match(/\s(.*)$/)[1];
    if (AMPM == "p.m." && hours < 12) hours = hours + 12;
    if (AMPM == "a.m." && hours == 12) hours = hours - 12;
    var sHours = hours.toString();
    var sMinutes = minutes.toString();
    if (hours < 10) sHours = "0" + sHours;
    if (minutes < 10) sMinutes = "0" + sMinutes;
    return sHours + ':' + sMinutes;
}

Then to make the new Date():

var start_datetime = moment(this.calendarDate(this.item.start_date) + ' ' + this.convertTimeformat(this.item.start_time));

var end_datetime = moment(this.calendarDate(this.item.end_date) + ' ' + this.convertTimeformat(this.item.end_time));

  this.addToCalendar = createCalendar({
    options: {
      class: 'addtocal-btn',
      id: 'event-' + this.item.id                                // You need to pass an ID. If you don't, one will be generated for you.
    },
    data: {
      title: this.item.title,
      start: new Date(start_datetime),
      end: new Date(end_datetime),
      address: this.item.location,
      description: this.item.description,
      timezone: 'America/Detroit'
    }
  });

Javascript new Date() Concat Date and Time Doesn't Work on Mobile Browsers

1 Answers1