Adding date to a date input field Angular

Question

I have some logic that i simplified in this JSFiddle: http://jsfiddle.net/r7vyjg4h/ and that works.

html:

<div ng-controller="MyCtrl">
<div ng-repeat="line in lines">
    <div style="display: inline-block">
      {{line.id}}
    </div>
    <div style="display: inline-block">
      <input type="text" ng-model="line.date" />
    </div>
  </div>
  <input type="button" ng-click="update()" value="update" />
</div>

js:

function MyCtrl($scope) {
    $scope.lines = [{
        id:"1",
        date: new Date()
      },{
        id:"2",
        date: new Date()
      },{
        id:"3",
        date: new Date()
      }
      ];
      var newDates = [{id:"1", date: new Date('10-10-2010 10:10:10')}, {id:"3", date: new Date('11-11-2011 11:11:11')}];

      $scope.update = function(){
        for(var i = 0; i < newDates.length;i++){
            for(var j = 0; j < $scope.lines.length; j++){
              if($scope.lines[j].id == newDates[i].id){
                  $scope.lines[j].date = newDates[i].date;
              }
            }
          }
      }

What it does it picks some dates from a web request and are supposed to add it to the right boxes in an ng-repeat. So far it still works out correct.

But when i change the input type from text to date, nothing happens. The values i picks out is correct but the date elements does not update.

http://jsfiddle.net/vd347sfa/

What am i missing here? Am i doing something wrong ?

user1924627 · Accepted Answer · 2016-05-11 11:04:04Z

1

The HTML-5 date input specification relies on RFC3339 section 5.6 which specifies a date format equal to yyyy-MM-dd. (Note: that is exactly the error message in the console when you run your jsfiddle). You just have to supply the date string in the correct format: http://jsfiddle.net/yxkvm0zm/1/

answered May 11, 2016 at 11:04

user1924627

3594 silver badges11 bronze badges

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

1 Comment

user1924627 Over a year ago

Just an aside: Google's Quick FAQs on input[type=date] in Chrome explicitly states "When setting the input.value programmatically, the value accepts only yyyy-mm-dd style regardless of the presentation format for both the initial value and the JavaScript injected value". (I tripped over this myself some time ago ...).

Murlidhar Fichadia · Accepted Answer · 2016-05-11 10:56:34Z

0

The reason its not reflecting in date input field is because the formatting.

The date input field is looking for the format mm/dd/yyyy and you are providing 10-10-2010 10:10:10 in this format.

You can use the function to convert the date into toISOString() format and it should do the trick.

There you go check this Solution :

 var newDates = [{id:"1", date: new Date('10-10-2010 10:00:00').toISOString().substring(0, 10)},{id:"2", date: new Date('10-10-2010 11:00:00').toISOString().substring(0, 10)}, {id:"3", date: new Date('11-11-2011 12:00:00').toISOString().substring(0, 10)}];

http://jsfiddle.net/vd347sfa/3/

edited May 11, 2016 at 10:56

answered May 11, 2016 at 10:49

Murlidhar Fichadia

2,6298 gold badges47 silver badges104 bronze badges

Comments

Avantika Saini · Accepted Answer · 2016-05-11 11:18:47Z

0

You need to give the date and time in proper format. the correct way to do this is:

var newDates = [{id:"1", date: new Date('2010', '10', '10', '10', '10', '10')}, 
{id:"3", date: new Date('2011', '11', '11', '11','11','11')}];

the format is:

new Date('yyyy', 'mm', 'dd', 'hh', 'mm', 'ss');

answered May 11, 2016 at 11:18

Avantika Saini

7924 silver badges9 bronze badges

Collectives™ on Stack Overflow

Adding date to a date input field Angular

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related