AngularJS: How to edit parts of a datetime from different html controls

Issue

I would like to have 2 textboxes assigned to the same ng-model initialized to Date.now() and allow them to be edited by the user.

My template looks like:

<div ng-controller="MainCtrl">
  <input type="text" ng-model="date | date:'yyyy-MM-dd'" />
  <input type="text" ng-model="date | date:'HH:mm'" />

  <button ng-click="submit()">Submit</button>

  <div ng-if="show">
    {{ date }}
  </div>
</div>

And my controller looks like:

angular.module('app', []).controller('MainCtrl', function($scope) {
  $scope.show = false;
  $scope.date = new Date(Date.now());

  $scope.submit = function () {
    $scope.show = true;
  }
});

Plunker: http://plnkr.co/edit/d2slQW6pDTLM4KTo

In my example, the textboxes are not editable, and I get a console error stating the expression is non-assignable.

How can I modify this example to allow the date parts to be modifiable?

Solution

If you're willing to use date and time inputs instead of text, this is very easy to do.

<input type="date" ng-model="date" />
<input type="time" ng-model="date" />

Because they're bound to the same Date instance, leap days daylight savings (where a day might be 23 or 25 hours) are supported.

If you don't like the native date and time inputs and want some more control over the style/functionality and consistent UI across devices, you can try Kendo UI's DatePicker and TimePicker widgets. They both have AngularJS support and are included in the free offering called Kendo UI Core.

And if you want to avoid having milliseconds in your time picker, make sure they're stripped from whatever Date instance is bound to your scope property.

$scope.date = new Date(Date.now());
$scope.date.setMilliseconds(0)

As an aside, I don't believe filters work in ng-model expressions, which is probably the source of your error message.

Answered By - Jacob Stamm