Dates, Angularjs, WebAPI

Question

We've been having some real confusion about how to handle dates between Angularjs and WebAPI. We only care about the date,don't care about the time or timezone. The angular site posts a date object back to our api but the date object still has the timezone on it so, depending on where the user is, the date that gets saved is off by one day.

I'd rather not have to deal with these dates on a one by one basis so we put in an http interceptor for all puts and posts that is looping thru all form fields and stripping timezone off dates and just returning the date but this doesn't feel right.

Any suggestions on the best way to handle this?

UPDATE:

More details if it helps. We are using kendo date pickers and setting the model values with k-ng-model. This helps us get a valid Date object. Today I removed the interceptor and added the following:

               kendo.ui.DatePicker.prototype.valueOld = kendo.ui.DatePicker.prototype.value;
           kendo.ui.DatePicker.prototype.value = function (e) {
               var val = this._value;
               if (val != null) {
                   this._value = moment(val).format("YYYY-MM-DD");
               }
               return this.valueOld(e);
           }

Now when a user changes a date the model value will be only the date and the time zone is ignored when sent back to the API.

In the API when dates are sent to the front end we have a formatter that strips off the timezone as well:

config.Formatters.JsonFormatter.SerializerSettings.Converters.Add(
            new IsoDateTimeConverter() { DateTimeFormat = "yyyy-MM-dd" });

I don't want our devs to handle dates on an individual basis. We were originally doing this and there was no consistency in the code.

You should use UTC dates. Stripping the timezone without converting the date to UTC can cause even more bugs. — ichigolas
– ichigolas, Commented Oct 26, 2017 at 19:04

Igor · Accepted Answer · 2017-10-26 19:13:00Z

2

Send and receive your dates as UTC. In Web API you can add this so that everything sent would be sent as UTC assuming the DateTime instance has property Kind set to DateTimeKind.Utc.

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // add this to whatever code you have now
        config.SetTimeZoneInfo(TimeZoneInfo.Utc);
    }

From angularjs send your Dates in the ISO8601 format as UTC yyyy-MM-ddTHH:mm:ss.fffffZ. Then you only have to worry about the time portion in any UI control that you use to display the date.

answered Oct 26, 2017 at 19:13

Igor

62.5k10 gold badges111 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lenilsondc Over a year ago

I think Jon's case is confuse because his api expect the given field to be a Day (which is a Time Range) not a DateTime which is a Time Moment. So should we use a Moment to represent a Day which sounds incorrect, or two Moments to represent the Day which is a Time Range or is there a better approach? Anyways, dates usually have confusing implementations whatever language I use, but it worth the discussion.

Collectives™ on Stack Overflow

Dates, Angularjs, WebAPI

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related