How can I send a date from my front end (Angular) to C# .net datetime (webAPI)?

Question

On my front-end I have a HTML input box where the user can enter a date. This adds data to my AngularJS modal and I then try to send it to the server as a JSON object when the user clicks save.

On the server I have used this which I think modifies the way dates are expected. All I know is that it allows AngularJS to nicely read the dates coming from the back-end.

     config.SuppressDefaultHostAuthentication();
        config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
        config.Formatters.Remove(config.Formatters.XmlFormatter);
        var json = config.Formatters.JsonFormatter;
        json.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
        json.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
        json.SerializerSettings.Converters.Add(new IsoDateTimeConverter { DateTimeFormat = "yyyy-MM-ddTHH:mmZ" });

Does anyone have any ideas how I can take a date entered into the input box in a format such as YYYY-MM-DD, modify in some way and then pass this to the server and have the server read it as a datetime?

The problem I have is that I am not sure how I can modify the YYYY-MM-DD date. When I try entering in a date like "2011-12-31" it does not get accepted by the server and the column that it should be entered into shows a null value for the date.

Answer 1

Have you ever tried to create a subclass of IsoDateTimeConverter? Try this:

public class MyJsonDateTimeConverter : IsoDateTimeConverter
{
    public MyJsonDateTimeConverter()
    {
        base.DateTimeFormat = "yyyy-MM-dd";
    }
}

Then use it in place of the last line:

json.SerializerSettings.Converters.Add(new MyJsonDateTimeConverter());

Hope this helps :)

Answer 2

Does anyone have any ideas how I can take a date entered into the input box in a format such as YYYY-MM-DD, modify in some way and then pass this to the server and have the server read it as a datetime?

Why dont you use a date picker component of the angular ui team.

The problem I have is that I am not sure how I can modify the YYYY-MM-DD date. When I try entering in a date like "2011-12-31" it does not get accepted by the server and the column that it should be entered into shows a null value for the date.

Is YYYY-MM-DD the accepted date format on your server side ? Then you can convert the existing date format on your client to this format before posting it to the server. Check your network tab to see the value being posted.

Hope this helps.

Answer 3

Try using DateTime.ParseExact if you know the format, or just DateTime.Parse if you don't:

DateTime dt = DateTime.ParseExact("2011/12/31", "yyyy/d/MM", new CultureInfo("en-US"));


DateTime.Parse("2011/12/31", new CultureInfo("en-US"));

However, if the date coming from the UI has this format: YYYY-MM-DD then try the following:

DateTime dt;
DateTime.TryParseExact(dateTime, 
                       "yyyy-MM-dd hh:mm tt", 
                       CultureInfo.InvariantCulture, 
                       DateTimeStyles.None, 
                       out dt);