How can I show correctly Dates yyyy-MM-dd hh:mm:ss with HTML5 and Angularjs?

I'm trying to create an input with date and time but I don't get the way of doing it.

I've tried with input datetime, 

<tr>
  <td>Date</td>
    <td><input type="datetime" name="fecha"
    placeholder="dd-MM-dd HH:mm:ss" size="16"
    ng-model="data.action.date" /></td>
  <tt>value = {{data.action.date | date: "yyyy-MM-dd HH:mm:ss"}}</tt>
</tr>

and I get this

enter image description here

And I've tried as well input datetime-local like the example in angular doc

<tr>
  <td>Date</td>
    <td><input type="datetime-local" name="fecha"
    placeholder="dd-MM-dd HH:mm:ss" size="16"
    ng-model="data.action.date" /></td>
  <tt>value = {{data.action.date | date: "yyyy-MM-dd HH:mm:ss"}}</tt>
</tr>

and I get this

enter image description here

How could I show the input with a date and time?

I recommend using the angular-moment directive for doing all date formatting in Angular: https://github.com/urish/angular-moment.

Moment.js is a great JavaScript library for formatting, converting and doing all date/time related tasks - angular-moment just exposes this library easily within Angular.

You can simply use the amDateFormat filter within your template as shown below.

<span>{{message.time | amDateFormat:'dddd, MMMM Do YYYY, h:mm:ss a'}}</span>

See the above link for more information.

You could try using date $filter component:

$scope.tToDisplay = $filter('date')($scope.timestamp, 'yyyy-MM-dd HH:mm:ss');

and bind it to HTML like:

<input ng-model="tToDisplay"></input>

Make sure to include $filter as a dependency. More info on the formats.