How to handle dates from database with AngularJS

Question

I'm getting data from SQLite and assign it to my $scope.loans:

{
    "id": 1,
    "book_id": 2,
    "patron_id": 3,
    "loaned_on": "2016-12-28",
    "return_by": "2017-01-25",
    "returned_on": "2017-01-17",
}
{
    "id": 2,
    "book_id": 3,
    "patron_id": 4,
    "loaned_on": "2016-12-28",
    "return_by": "2017-01-25",
    "returned_on": null,
}

In my view I'm trying to bind the data into inputs tags so the user can edit and submit the changes (I'm using pug template engine)

table
  thead
    tr
      th Loaned On
      th Return By
      th Returned On
  tbody
    tr(ng-repeat='loan in loans')
      td(type='date' ng-model='loan.loaned_on' value='{{loan.loaned_on}}')
      td(type='date' ng-model='loan.loaned_on' value='{{loan.return_by}}')
      td(type='date' ng-model='loan.loaned_on' value='{{loan.returned_on}}')

Now I'm getting an AngularJS error says that the ngModel is not a date object.
I understand that I should use the date constructor to convert the date string to a date object, But my question is what is the best way to do such a thing?

solution

I thought that maybe I'll find a better way, but I didn't.
So I loop through the loans array and assign a date object for each date string.

youloking for a smart table and have solution [here](http://stackoverflow.com/a/28502150/6617798) — omer cohen, Jan 15 '17 at 15:23
you can look [here](http://stackoverflow.com/a/28502150/6617798) has a solution for your table — omer cohen, Jan 15 '17 at 15:26

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

Creating a date

You can simply use the default constructor of Date, if your date is in this ISO 8601 form.

new Date("2017-01-25")

If you want to do some calculations with the date or if you want to pass the date in another format, I would recommend using moment.js:

var myDate = moment("2017-01-25", "YYYY-MM-DD");
var newDate = myDate.add(7, "days");

Passing it to the scope

The simplest way to pass the Date to the HTML is to pass it in a scope function. In this way, you can simply call it in the HTML.

Controller (with Date Constructor):

$scope.createDate = function(dateString) {
    return new Date(dateString);
};

Controller (with moment.js):

$scope.createDate = function(dateString) {
    return moment("2017-01-25", "YYYY-MM-DD");
};

HTML (pug template):

td(type='date' ng-model='createDate(loan.loaned_on)' value='{{loan.loaned_on}}')

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 15 '17 at 12:34

ssc-hrep3

15,024
7
48
87

The value of the input is not the problem, the `ng-model` requires the modal to be a date object. and you can't pass a function inside it.. – Liad Idan Jan 15 '17 at 12:51
You do not pass a function but rather the return value of this function - which is a `Date` object. You only need the expression to be executed. If `createDate(loan.loaned_on)` is passed as String, try `ng-model='{{createDate(loan.loaned_on)}}'` – ssc-hrep3 Jan 15 '17 at 12:53

score 0 · Answer 2 · answered Jan 15 '17 at 12:34

0

You can just do this, which is simple and inline.

td(type='date' ng-model='new Date(loan.loaned_on)' value='{{loan.loaned_on}}')

answered Jan 15 '17 at 12:34

graycodes

373
2
13

score 0 · Answer 3 · answered Jan 15 '17 at 12:39

You gave the input type as date but you assigning date string to the model which the model is not expecting. Instead, convert the value to a date object and assign it as shown below :

tbody
tr(ng-repeat='loan in loans')
  td(type='date' ng-model='loan.loaned_on' value='{{new Date(loan.loaned_on)}}')

score 0 · Answer 4 · answered Jan 15 '17 at 18:27

Try this :

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function ($scope) {
    $scope.loans = [{
    "id": 1,
    "book_id": 2,
    "patron_id": 3,
    "loaned_on": "2016-12-28",
    "return_by": "2017-01-25",
    "returned_on": "2017-01-17"
},
{
    "id": 2,
    "book_id": 3,
    "patron_id": 4,
    "loaned_on": "2016-12-28",
    "return_by": "2017-01-25",
    "returned_on": null
}];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table>
    <thead>
      <tr>
        <th>Loaned On</th> 
        <th>Return By</th>
        <th>Returned On</th>   
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='loan in loans'>
        <td><input type='date' ng-model='loan.loaned_on' value='{{loan.loaned_on}}'/></td>
      <td><input type='date' ng-model='loan.return_by' value='{{loan.return_by}}'/></td>
      <td><input type='date' ng-model='loan.returned_on' value='{{loan.returned_on}}'/></td>
      </tr>  
    </tbody>
  </table>
</div>

How to handle dates from database with AngularJS

solution

4 Answers4

Creating a date

Passing it to the scope