AngularJs, load saved json date string as object (part 1)

Html5 and new inputs types specification support in Angular

I really like Html5 new drafts and fast implement it in new browsers, improvements especially like new inputs form elements and they own new native validation attributes support, called in specification “input restrictions”, are not supported in old browser (go go away IE8). Some of those inputs types:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • more inputs

The problem

Today i write about date input, i don’t write nothing when everything goes right 😉 i write that post to save somebody many hours to resolve problem with date inputs and errors like this: ngModel:datefmt Model is not a date object. So shame ;/

What is wrong with input type = date in Angular ? Just take a look at documentation, as far i know and docs says Angular ng / input[date] to properly works with date need just and only JS Date() object initialised in the model.

This is fine until you don need a create model dynamically with children associated data.


#issue-1 How to initialise dynamically actual date for children nodes w/o create useless code ?

And still u are lose especially more when you start store a date in backend without support date object like mysql, JSON… just like in my case ;). And try load back full complex model to view by http.get request in JSON.

But whats is wrong with saving in Angular model by to API with mysql backend in JSON string . Magic is happen. What exactly ? Simple case:

angular.module('dateInputExample', [])
 .controller('DateController', ['$scope', function($scope) {
   $scope.example = {
     value: new Date(2015, 11, 30)

Angular convert the model to JSON string like this and send it to the api

  "example": {
    "value": "2015-11-30T23:00:00.000Z"

When u try load saved data to the model by http.get method, Angular model will trigger Error: ngModel:datefmt Model is not a date object.

#issue-2 How to load json saved model with data in string and convert them to the Js Data() object ?

part 2