Angular UI Datepicker model binding not working

Question

I have the following HTML on my page

<input type="date" class="form-control" datepicker-popup ng-model="mdl.active_date" 
is-open="opened" min-date="minDate" datepicker-options="dateOptions" 
date-disabled="disabled(date, mode)" close-text="Close" />

mdl.active_date is set to "/Date(1437626784877)/" when viewed in the browser console.

I'm getting the error Datepicker directive : ng-model value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.

What am I doing wrong here?

If the `/` in `"/Date(1437626784877)/"` is not a typo then that's your problem. It should be a date object but you're giving it a string — logee, Jul 29 '15 at 03:01
That's what I thought, but this date is retrieved from a database and sent the the page via JSON, in a .net MVC app. Why would the slashes be added? — CaptainMorgan, Jul 29 '15 at 03:04
Have you checked the network log so see if the JSON response is a string or number? Need to determine if it's the server sending back `"/Date(1437626784877)/"` or if it's the client code that does it — logee, Jul 29 '15 at 03:06
Th JSON response string is definitely "/Date(1437626784877)/". The database field is a datetime. — CaptainMorgan, Jul 29 '15 at 03:17
Ok, that's not an angular issue then. If you can't change the server then you'll need to parse the string yourself and create a date object when you receive the response. See [this](http://stackoverflow.com/questions/726334/asp-net-mvc-jsonresult-date-format) SO post or [this article](http://www.developer.com/net/dealing-with-json-dates-in-asp.net-mvc.html) — logee, Jul 29 '15 at 03:26
`JavascriptSerialzer` will serializes the datetime object from server as `/Date(1437626784877)/` so its your responsibility to parse the server value to date object. — Madhu, Jul 29 '15 at 04:00

Janty · Accepted Answer · 2015-07-29T05:53:04.890

1

Its not issue of angularjs. you can use new Date(YourVariable).

 var datesting='/Date(1437626784877)/';
 $scope.today  =new Date(parseInt(datesting.replace('/Date(', '')));

Updated for date as string input.

See JSFiddle

edited Jul 29 '15 at 05:53

answered Jul 29 '15 at 05:29

Janty

1,708
2
15
29

Samuel Neff · Answer 2 · 2015-07-29T05:12:37.957

JSON does not support dates as their own recognized data type. Dates are serialized to strings using one of several formats when serializing (depending on the serializer), and are only sometimes deserialized to date objects when deserializing (browsers never do this by default, it's not part of the JSON spec).

The format looks like how .NET serializes dates to string within JSON. On the receiving side before working with the deserialized JSON you need to convert the date strings to date object. Neither Angular or JSON.parse do this for you.

You can inject custom parsing using $httpProvider.defaults.transformResponse.

https://docs.angularjs.org/api/ng/service/$http

A JSON.parse implementation that includes support for dates is available here:

http://weblog.west-wind.com/posts/2014/Jan/06/JavaScript-JSON-Date-Parsing-and-real-Dates

if (window.JSON && !window.JSON.dateParser) {
    var reISO = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*))(?:Z|(\+|-)([\d|:]*))?$/;
    var reMsAjax = /^\/Date\((d|-|.*)\)[\/|\\]$/;

    JSON.dateParser = function (key, value) {
        if (typeof value === 'string') {
            var a = reISO.exec(value);
            if (a)
                return new Date(value);
            a = reMsAjax.exec(value);
            if (a) {
                var b = a[1].split(/[-+,.]/);
                return new Date(b[0] ? +b[0] : 0 - +b[1]);
            }
        }
        return value;
    };

}

var date = JSON.parse(json,JSON.dateParser);  
console.log(date);

Angular UI Datepicker model binding not working

2 Answers2