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
– logee, Commented Jul 29, 2015 at 3: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
– CaptainMorgan, Commented Jul 29, 2015 at 3: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
– logee, Commented Jul 29, 2015 at 3:06
Th JSON response string is definitely "/Date(1437626784877)/". The database field is a datetime. — CaptainMorgan
– CaptainMorgan, Commented Jul 29, 2015 at 3: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 SO post or this article — logee
– logee, Commented Jul 29, 2015 at 3:26

Janty · Accepted Answer · 2015-07-29 05:53:04Z

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, 2015 at 5:53

answered Jul 29, 2015 at 5:29

Janty

1,7142 gold badges15 silver badges29 bronze badges

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

Comments

Samuel Neff · Accepted Answer · 2015-07-29 05:12:37Z

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);

Collectives™ on Stack Overflow

Angular UI Datepicker model binding not working

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related