g00fy- / angular-datepicker

calendar and datepicker directives for angular
MIT License
722 stars 421 forks source link

Date time with timezone #298

Open taguenizy opened 7 years ago

taguenizy commented 7 years ago

Hello,

When using the dateTime directive with a defined timezone it doesn't with the correct timezone parsing as it happens with the datePicker directive.

For instance, <div date-picker="date" timezone="Asia/Hong_Kong" view="hours"></div> <input date-time ng-model="date" timezone="Asia/Hong_Kong" />

When you update it gets correct so I'm assuming it's something related with the initialization of the directive.

As a quick hack I've added value = (value && timezone) ? datePickerUtils.createMoment(value) : value; in the formatter function of the dateTime directive. It solves my particular problem but was hoping for a more permanent and elegant solution.

Best regards

DanTalash commented 7 years ago

I'm either unable to replicate the problem, or I am not understanding what the problem is.

See here for a plunkr with my attempt to reproduce your issue. The timezones appear correct to me both on initialization and after selecting new date values.

taguenizy commented 7 years ago

I might have left out an important detail. As the date I'm providing is a string.

See the plunkr. Based on your example I just passed the today date to a string and as you can see datePicker and dateTime behave differently. DatePicker still shows what we intended but DateTime doesn't.

DanTalash commented 7 years ago

The problem was with the mFormat filter, which completely ignores timezones when passed a non-moment object.

Here is a plunkr with the filter fixed. I will update my current PR with this fix tomorrow.

ovaldi commented 7 years ago

Here is a workaround solution, just re-define 'mFormat' filter in your app:

  app.filter('mFormat', function () {
    return function (m, format, timezone) {  
      m = moment.isMoment(m) ? m : moment(m);  
      if (m.isValid()) {  
        return timezone ? m.tz(timezone).format(format) : m.format(format);  
      }  
    };  
  });