Convert Json parsed date to fit html5 input date

Question

I am using Knockout to make a nice looking Gui like so

Javascript:

viewModel = {
    lookupCollection: ko.observableArray()
};

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url:  "@Url.Action("GetView", "FakturaOmfangs", new {area = "" , id = ViewBag.id})",
    }).done(function (data) {
        $(data).each(function (index, element) {
            var mappedItem =
                {
                    FakturaId: ko.observable(element.FakturaId),
                    FakturaProdukterId: ko.observable(element.FakturaProdukterId),
                    Beskrivelse: ko.observable(element.Beskrivelse),
                    Periode: ko.observable(element.Periode),
                    EndDate: ko.observable(element.EndDate),
                    procent: ko.observable(element.procent),
                    Rabat: ko.observable(element.Rabat),
                    Pris: ko.observable(element.Pris),
                    Ialt: ko.observable(element.Ialt),
                    Value: ko.observable(element.Value),
                    Mode: ko.observable("display")
                };
            console.log(mappedItem);
            viewModel.lookupCollection.push(mappedItem);
        });
        ko.applyBindings(viewModel);
    });
});

the EndDate is a Datetime? parsed from controller like this

return Json(list, JsonRequestBehavior.AllowGet);

This is my input where i would like to put the Date into, so i can edit it.

<td><input class="form-control" type="date" data-bind="value: EndDate" /></td>

How do i format the date to the correct format? so that i can use it in input type=Date ?

Output from Log EndDate: "/Date(1494885600000)/"

Modelclass:

 public class FakturaOmfang
{
    //if selected type dropdown
    [Key]
    public int Id { get; set; }

    public string Beskrivelse { get; set; }
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime? Periode { get; set; }
    [JsonProperty]
    [JsonConverter(typeof(ShortDateConverter))]
    public DateTime? EndDate { get; set; }

    public int? Dage { get; set; }
    [DisplayName("Ydet %")]
    [Range(0,100)]
    public int? procent { get; set; }
    [Range(0, 100)]
    public int? Rabat { get; set; }
    [DisplayFormat(DataFormatString = "{0:N}", ApplyFormatInEditMode = true)]
    public decimal Pris { get; set; }
    [DisplayFormat(DataFormatString = "{0:N}", ApplyFormatInEditMode = true)]
    public decimal Ialt { get; set; }

    public int FakturaId { get; set; }
    public Faktura Faktura { get; set; }

    public int FakturaProdukterId { get; set; }
    public FakturaProdukter FakturaProdukter { get; set; }



}
public class ShortDateConverter : DateTimeConverterBase
{
    public override object ReadJson(JsonReader reader, Type objectType, object existingValue, JsonSerializer serializer)
    {
        return DateTime.Parse(reader.Value.ToString());
    }

    public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer)
    {
        writer.WriteValue(((DateTime)value).ToString(System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.ShortDatePattern));
    }
}

Edit to show updated Action:

`  public ContentResult GetView(int? id)
        {

            var list = db.FakturaOmfangs.Where(x => x.FakturaId == id).ToList();

            ViewBag.FakturaProdukterId = new SelectList(db.FakturaProdukters, "Id", "Overskrift");

            var result = new ContentResult(
                  Content = JsonConvert.SerializeObject(new { success = list }), Formatting.None, new JsonSerializerSettings()
                  {
                      ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
                      NullValueHandling = NullValueHandling.Include,
                      DateFormatString = "dd/MM/yyyy"
                  },
                   ContentType = "application/json");
            return result;



        }`

Thanks. Benny.

Please post the output of the console.log and the desired format for the date. — JazzCat, Jun 02 '17 at 10:30

Thulasiram · Answer 1 · 2017-06-02T10:55:57.443

0

    Updating Model Class:-

    [JsonProperty]
    [JsonConverter(typeof(ShortDateConverter))]
    public DateTime EndDate { get; set; }

    //// Adding New File:-
    public class ShortDateConverter : DateTimeConverterBase
    {
        public override object ReadJson(JsonReader reader, Type objectType, object existingValue, JsonSerializer serializer)
        {
           return DateTime.Parse(reader.Value.ToString());
        }

        public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer)
        {         
            writer.WriteValue( ((DateTime)value).ToString(CurrentCulture.DateTimeFormat.ShortDatePattern));
        }
    }

======================================================================

    EndDate: ko.observable(new Date(parseInt(element.EndDate.substr(6))))

//// Or 

    Updating Model Class:-
    [JsonProperty]
    [JsonConverter(typeof(IsoDateTimeConverter))]
    public DateTime EndDate { get; set; }

//// Or

     WebApiConfig.cs File:-
     config.Formatters.JsonFormatter.SerializerSettings.Converters.Add(
             new IsoDateTimeConverter());

edited Jun 02 '17 at 10:55

answered Jun 02 '17 at 10:33

Thulasiram

8,432
8
46
54

Hey, thanks for the quick answer. I have tried first and 2nd method couldn't get any of them to work. when parsed to view EndDate looks like this : "/Date(1494885600000)/". – Benny Jun 02 '17 at 10:43
@Benny: I had updated the answer. Please try ShortDateConverter solution – Thulasiram Jun 02 '17 at 11:03
Because type="date" expect mm/dd/yyyy current culture date only.... https://jsfiddle.net/wrkhxs84/ – Thulasiram Jun 02 '17 at 11:04
i have tried it with the ShortDateConverter, but my output to the view is still EndDate: "/Date(1494885600000)/". – Benny Jun 02 '17 at 11:17
Can u please take screen short of the code (Model Class) and share link? – Thulasiram Jun 02 '17 at 11:21
i have edit question, and added the modelclass + the ShortDateConverter – Benny Jun 02 '17 at 11:26

score 0 · Answer 2 · edited Jun 02 '17 at 16:05

0

You can apply Json Serializer setting to your required date format while returning JSON date from your Controller's Action Method something like this :

 new JsonSerializerSettings()
                {
                    ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
                    NullValueHandling = NullValueHandling.Include,
                    DateFormatString = "dd/MM/yyyy"
                })

You can return your collection from Controller something like this [You need to change return type of action to ContentResult :

 var result = new ContentResult
        {
            Content = JsonConvert.SerializeObject(new { success = Collection },
            Formatting.None,
            new JsonSerializerSettings()
            {
                ReferenceLoopHandling = ReferenceLoopHandling.Ignore,
                NullValueHandling = NullValueHandling.Include,
                DateFormatString = "dd/MM/yyyy"

            }),

            ContentType = "application/json"
        };
        return result;

You will get Json response in "success" object , you can change it as per your requirement.

And then you can deserealize it before binding it to your datepicker control by something like this :

JsonConvert.DeserializeObject<DateTime>(yourDate);

edited Jun 02 '17 at 16:05

Benny

3
4

answered Jun 02 '17 at 10:45

Nikunj Patel

249
3
13

To do it like this, i guess i will have to return my object diffrently? then return Json? – Benny Jun 02 '17 at 10:50
Hey @nikunj Patel, i get this error when trying to chance "Non-invocable member 'ContentResult' Cannot be used like a method" – Benny Jun 02 '17 at 11:36
@Benny , I have missed new keyword while returning it ! Please check updated answer ! – Nikunj Patel Jun 02 '17 at 11:40
Still doesn't work because ContentResult doesn't have a constructor that supports 3 arguments – Benny Jun 02 '17 at 11:52
Yes! @Benny, You are right ! Please see my updated answer! – Nikunj Patel Jun 02 '17 at 12:01
still same errior, since ContentResult doesn't take 4 arguments. – Benny Jun 02 '17 at 12:07
@Benny, I have modified code, try it and let me know ! – Nikunj Patel Jun 02 '17 at 12:23
cannot assign to 'Content' because it is a 'method group' The error i get – Benny Jun 02 '17 at 12:29
@Benny, if you assign to var result = new ContentResult (); then you wont get any error. Because I have solved same error by assigning my ContentResult to var result and returns the result. Can you show your Action method code ?? – Nikunj Patel Jun 02 '17 at 12:31
@Benny, It's bracket that causing issue !!. We have used `new ContentResult ()`. It should be `new ContentResult{ }`. I have updated my answer !! – Nikunj Patel Jun 02 '17 at 13:01
your ContentType is that standard mime? – Benny Jun 02 '17 at 13:30
Not Understood ! We have apply content typle already to `"application/json"` !! – Nikunj Patel Jun 02 '17 at 13:35
the name 'ContentType*' does not exist in the current context – Benny Jun 02 '17 at 13:57
No way @Benny, no chances of error now ! By the way why 'ContentType*' ? From where it gets '*' ? – Nikunj Patel Jun 02 '17 at 13:58
From no where right now, it suggest it could get it from System.net.mime but that wouldn't make sense :) Sorry for all the errors – Benny Jun 02 '17 at 14:05
fixed the brackets you had placed wrong ;) Works now. – Benny Jun 02 '17 at 14:35
@Benny , Great !! Then Close the question ! – Nikunj Patel Jun 03 '17 at 05:05

score 0 · Answer 3 · answered Jun 02 '17 at 11:28

0

Check out this post:

How do I format a Microsoft JSON date?

which illustrates a way to do it:

var date = new Date(parseInt(jsonDate.substr(6)));

In your instance, either change the value when you go to assign the value to the view model, or add a computed observable that will convert it when retrieving it out.

answered Jun 02 '17 at 11:28

Brian Mains

50,520
35
148
257

The issue is that my date is nullable, this fails when my Element is null – Benny Jun 02 '17 at 11:55
Right, well, isn't that a simple null-check then? if jsonDate != null convert otherwise just leave it null?? – Brian Mains Jun 02 '17 at 13:34

Convert Json parsed date to fit html5 input date

3 Answers3