Date in UTC format

[fizerkhan]

If i select 07/16/2014 (16th July 2014), it gives a date value as 2014-07-15T18:30:00.000Z. When i convert this string in server side in UTC format, it gives me one day before date.

[mattpattinson]

I think the datepicker will use a localised time. I have resolved this for now by adjusting the value before posting it to the server. I'll be looking into it more closely later. Here's the adjustment in case it is of use:
function adjustDateForTimeOffset(dateToAdjust) {
var offsetMs = dateToAdjust.getTimezoneOffset() * 60000;
return new Date(dateToAdjust.getTime() - offsetMs);
}

[brandontineo]

This is a good solution for sending information back to the server using UTC, but it doesn't help if you're storing defaults and want those to be used on load (and filled in the input boxes). Anyone else have a solution?

[kumarharsh]

@fizerkhan As you would have noticed, the datepicker gives the time in the ISOString format date.toISOString().

If you select 07/16/2014 in your local time, say India, then the related UTC/ISO time will be 5:30 hours behind the local time. What you are seeing is the correct output, and not a bug.

To get back the correct time on server-side, you need to know what Timezone the data was sent from. But I'd advice against doing that. Keep your server-side data to be always in the UTC format, and on the client-side, just do a fetchedDate.toLocaleDateString() to get the localized date.

[fizerkhan]

@kumarharsh Thanks, i understood your points. But I am really surprised that someone selecting date 15 August, i would expect two possibilities

1. Give the date string in user TimeZone just like new Date().
2. Give UTC date value without time(T00:00:000Z) since i am selecting the date. It will be much better because most of us don't need time value for date.

Here, It is giving current time in UTC. This is really confusing behaviour. I never seen this behaviour in any date picker

[kumarharsh]

But this is the correct behaviour.

The Date object itself can show you data in ANY timezone. I can't comment on the way it stores it internally, but that date which is given out of the plugin is easily transformable, as I underlined above.

The reason the plugin shows time in UTC is the same reason we communicate in GMT (if we are talking to anyone in another country) It's easiest to understand (after a little adjustment) and it's unambiguous.

Anyways, you are just ONE developer, and can write a few lines of code to do the transforms. The only thing to keep in mind is that the users should never see time in UTC, but in localized time only.

This issue can be closed IMO.

[fizerkhan]

@kumarharsh Thanks for your points.

It is not about whether we can do it by few lines of code. Why this date picker behave different from other date pickers? I expected to get more thoughts from others on this issue.

[kumarharsh]

Which other date pickers are you talking about? Perhaps you could share the links?

[fizerkhan]

Following are the date pickers that i used in other projects (Backbone.js and Ember.js)

• pickadate - This date picker is awesome.
• Bootstrap date picker
• Jquery UI Date picker

[kumarharsh]

I think you can ask the maintainer of the repo, he'd be the best person to get the answers from!

---

That being said, you can specify your own format, failing which the plugin falls back to ISO format.

[kumarharsh]

On second thoughts, I see your point that there is a strong reason to expect the local time to be given by the picker as the default.

[dmytro-shchurov]

There is one use case when local-UTC conversions must not happen: DoB. No one expect a timezone in this case. It's an absolute date. Angular's input[date] takes this by offering to specify ng-model-options.timezone. This option fixes incompleteness of ECMA Date() type.
Check out this

ctrl.$parsers.push(function(value) {
      if (ctrl.$isEmpty(value)) return null;
      if (regexp.test(value)) {
        // Note: We cannot read ctrl.$modelValue, as there might be a different
        // parser/formatter in the processing chain so that the model
        // contains some different data format!
        var parsedDate = parseDate(value, previousDate);
        if (timezone === 'UTC') {
          parsedDate.setMinutes(parsedDate.getMinutes() - parsedDate.getTimezoneOffset());
        }
        return parsedDate;
      }
      return undefined;
    });

    ctrl.$formatters.push(function(value) {
      if (value && !isDate(value)) {
        throw $ngModelMinErr('datefmt', 'Expected `{0}` to be a date', value);
      }
      if (isValidDate(value)) {
        previousDate = value;
        if (previousDate && timezone === 'UTC') {
          var timezoneOffset = 60000 * previousDate.getTimezoneOffset();
          previousDate = new Date(previousDate.getTime() + timezoneOffset);
        }
        return $filter('date')(value, format, timezone);
      } else {
        previousDate = null;
        return '';
      }
    });

I expect something similar to this with the date picker

[alexanderchan]

@dmytro-shchurov thanks for this feedback, I'll try to check this out when I get a chance but PRs with tests are welcome if you have any time.

[harsh5400]

Hi

I need a absolute date from the date picker. Is there any possibilities. I do not want to convert the date between different time zone

[harsh5400]

Hi Guys I Solved this issue u need to change the date to localestring in date directive(date.js) as shown below.

//Old Code: controller.$setViewValue(element.datepicker('getDate'));

//Change Code:
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
controller.$setViewValue(element.datepicker('getDate').toLocaleString("en-GB", options));

Thanks