Invalid date with BreezeJS and Hottowel

Question

i've a problem whit breeze returned DateTime... i've tried also to update BreezeJs to the latest version but nothing change. I use breezeJs with HotTowel SPA

Controller:

[BreezeController]
public class ContribuentiController : ApiController
{
    readonly EFContextProvider<LarksTribContext> _contextProvider =
    new EFContextProvider<LarksTribContext>();

    [System.Web.Http.HttpGet]
    public string Metadata()
    {
        return _contextProvider.Metadata();
    }


    // ~/api/todos/Todos
    // ~/api/todos/Todos?$filter=IsArchived eq false&$orderby=CreatedAt 
    [System.Web.Http.HttpGet]
    public IQueryable<Contribuente> Contribuenti()
    {
        if (_contextProvider.Context.Contribuente != null)
        {
            return _contextProvider.Context.Contribuente.Include("Residenze.Strada");//.Include("Residenze").Include("Residenze.Strada");
        }
        else
        {
            return null;
        }
    }


    [System.Web.Http.HttpPost]
    public SaveResult SaveChanges(JObject saveBundle)
    {
        return _contextProvider.SaveChanges(saveBundle);
    }
}

Model:

[Table(name: "Contribuenti")]
public class Contribuente
{
    [Key]
    public int Id { get; set; }

    [MaxLength(30,ErrorMessage = "Il cognome non deve superare i 30 caratteri")]
    public string Cognome { get; set; }

    [MaxLength(35, ErrorMessage = "Il nome non deve superare i 35 caratteri")]
    public string Nome { get; set; }

    [MaxLength(16, ErrorMessage = "Il Codice fiscale non deve superare i 16 caratteri")]
    public string CodiceFiscale { get; set; }

    public virtual ICollection<Residenza> Residenze { get; set; }

}

[Table(name: "Residenze")]
public class Residenza
{
    [Key, Column(Order = 0)]
    public int Id { get; set; }



    public int ContribuenteId { get; set; }
    [ForeignKey("ContribuenteId")]   
    public Contribuente Contribuente { get; set; }


    public DateTime? DataInizio { get; set; }

    public int StradaId { get; set; }
    [ForeignKey("StradaId")]
    public Strada Strada { get; set; }

    public int Civico { get; set; }
    public string Interno { get; set; }
    public string Lettera { get; set; }


}

[Table(name: "Strade")]
public class Strada
{

    [Key]
    public int Id { get; set; }

    [MaxLength(20,ErrorMessage = "Il toponimo deve contenere al massimo 20 caratteri")]
    public string Toponimo { get; set; }

    [MaxLength(50, ErrorMessage = "Il nome deve contenere al massimo 50 caratteri")]
    public string Nome { get; set; }

}

when i make this query:

var query = breeze.EntityQuery.
            from("Contribuenti").expand(["Residenze"], ["Strada"]);

the json response is:

[{"$id":"1","$type":"LarksTribUnico.Models.Contribuente, LarksTribUnico","Id":1,"Cognome":"Manuele","Nome":"Pagliarani","CodiceFiscale":"HSDJSHDKHSD","Residenze":[{"$id":"2","$type":"LarksTribUnico.Models.Residenza, LarksTribUnico","Id":5,"ContribuenteId":1,"Contribuente":{"$ref":"1"},"DataInizio":"2012-12-10T22.00.00.000","StradaId":4,"Strada":{"$id":"3","$type":"LarksTribUnico.Models.Strada, LarksTribUnico","Id":4,"Toponimo":"Via","Nome":"Milano"},"Civico":0}]}]

But in result of query "DataInizio" is always marked as "Invalid date".

Any idea aout the problem? Thanks

Answer 1

Breeze server side converts SQL Server DateTime to ISO 8601. In my code (breeze v0.72) dates seem to end up in UTC in SQL, and get converted back to local somewhere in breeze.

Check the Breeze docs on dates. http://www.breezejs.com/documentation/date-time

or, as suggested in the breeze docs, you can add moment.js to your project if HotTowel does not. https://github.com/moment/moment

Moment recognizes the JSON you are describing.

A moment() is different than a JavaScript date, but it is easier to manipulate and parse. This code you the current browser date from moment.

var now = window.moment().toDate();

This code demonstrates how to turn an ISO into a JavaScript Date object through moment.

// ISO 8601 datetime returned in JSON.  
// In your code, you would pull it out of your the 
// return variable in your dataservice.js
var DataInizio = "2012-12-10T22.00.00.000" 

// convert your variable to a moment so you can parse it 
var momentdatainizio = window.moment(DataInizio); 

// convert the ISO to a javascript Date object so you can use it in js.
var mydate = window.moment(DataInizio).toDate();  

Your Stada will end up in the breeze Metadata store which you use to populate your viewModel.

Retrieve the strada from the Metadata store or the database with something like this code in your dataservice.js. I am being a little more verbose than necessary so you can debug.

var getStrada  = function (stradaId, callback) {
    var query = EntityQuery.from("Strada")
        .using(manager);
    var pred = new breeze.Predicate("idd", "eq", stradaId);
    // create the query
    var queryb = query.where(pred);

    // check the MetadataStore to see if you already have it
    var localsession = queryb.executeLocally();
    if (localsession) {
        if (localsession.length > {          
           window.app.vm.strada.strada(data.results);
           return localsession;
        }
    }
    // get it from the server
    else {
        // return the promise to prevent blocking
        //  then set your viewModel when the query fulfills
        //  then make your callback if there is one
        //  handle the fail in your queryFailed function if there is a problem
        return manager.executeQuery(queryb)            
        .then(function (data) {
            window.app.vm.strada.strada(data.results);
        })
        .then(function () {
            if ((typeof callback !== 'undefined' && callback !== null)) {
                callback();
            }
        })
        .fail(function () {
            queryFailed();
        });
    }
};

Here is a fragment of a ko viewModel in strada.js

app.vm.strada = (function ($, ko, dataservice, router) {
    var strada = ko.observable();
    ...
    return {
         strada : strada,
         ...
 })($, ko, app.dataservice, app.router);

Here is the custom binding handler for knockout in the ko.bindingHandlers.js. This code is slightly verbose so you can debug the intermediate variables.

window.ko.bindingHandlers.DataInizio = {
  // viewModel is a Strada
  update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var value = valueAccessor(), allBindings = allBindingsAccessor();
    var valueUnwrapped = window.ko.utils.unwrapObservable(value);
    var $el = $(element);
    if (valueUnwrapped.toString().indexOf('Jan 1') >= 0)
        $el.text("Strada not Started");
    else {
        var date = new Date(valueUnwrapped);
        var d = moment(date);
        $el.text(d.format('MM/DD/YYYY'));
    }
  }
};

Here is the html for the binding handler ... Strada DataInizio: ...

I wrote this code based upon my code using Breeze v0.72 which uses sammy.js as the router. Your mileage may vary with newer versions of breeze and Durandel.