I'm trying to bind an input of type date to a model. I'm able to bind to time fields, but I'm having trouble with date fields. The HTML:

<div ng-app ng-controller="HistoryCtrl">
    <input type="date" nm-model="startDate" />
    <input type="time" ng-model="startTime" />
    <input type="date" nm-model="endDate" />
    <input type="time" ng-model="endTime" />
    <button ng-click="updateForm()">Update</button>
</div>

This is my controller (simplified):

function HistoryCtrl($scope) {

    $scope.result = {
        result: 'success',
        start: '2013-11-23 03:00:00',
        end: '2013-11-24 16:30:00',
        delta: 0.05681799352169
    };

    $scope.updateForm = function () {
        $scope.updateTimespan($scope.result.start, $scope.result.end);
    };

    $scope.updateTimespan = function (start, end) {
        $scope.startDate = start.split(" ")[0];
        $scope.startTime = start.split(" ")[1];
        $scope.endDate = end.split(" ")[0];
        $scope.endTime = end.split(" ")[1];
    }
}

Here's a fiddle: /

I'm using Google Chrome 31.0.1650.57 for Mac. When I click the "Update" button, the time fields update but the date fields do not. Why? Am I doing it wrong?

I'm trying to bind an input of type date to a model. I'm able to bind to time fields, but I'm having trouble with date fields. The HTML:

<div ng-app ng-controller="HistoryCtrl">
    <input type="date" nm-model="startDate" />
    <input type="time" ng-model="startTime" />
    <input type="date" nm-model="endDate" />
    <input type="time" ng-model="endTime" />
    <button ng-click="updateForm()">Update</button>
</div>

This is my controller (simplified):

function HistoryCtrl($scope) {

    $scope.result = {
        result: 'success',
        start: '2013-11-23 03:00:00',
        end: '2013-11-24 16:30:00',
        delta: 0.05681799352169
    };

    $scope.updateForm = function () {
        $scope.updateTimespan($scope.result.start, $scope.result.end);
    };

    $scope.updateTimespan = function (start, end) {
        $scope.startDate = start.split(" ")[0];
        $scope.startTime = start.split(" ")[1];
        $scope.endDate = end.split(" ")[0];
        $scope.endTime = end.split(" ")[1];
    }
}

Here's a fiddle: http://jsfiddle/t3m6r/2/

I'm using Google Chrome 31.0.1650.57 for Mac. When I click the "Update" button, the time fields update but the date fields do not. Why? Am I doing it wrong?

• javascript
• angularjs
• date
• data-binding

Share Improve this question Follow asked Nov 25, 2013 at 18:33 Ben HaroldBen Harold 6,43277 gold badges5050 silver badges7474 bronze badges 2

• 2 Perhaps because nm-model means nothing to angular. – Stewie Commented Nov 25, 2013 at 18:34
• 4 This question appears to be off-topic because it is about typo. – Stewie Commented Nov 25, 2013 at 18:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You are using ng-model but type wrongs, "nm-model".

<input type="date" ng-model="startDate" />
<input type="time" ng-model="startTime" />
<input type="date" ng-model="endDate" />
<input type="time" ng-model="endTime" />

See JS Fiddle