angular-datepicker: get ng-model value into scope

Question

I'm new to AngularJs and I want to show the selected date and time of my datepicker in a <pre> tag by the scope of the ng-model="abc".

angular-datepicker (github), angular-datepicker (demo)

Html:

<div class="container">
    <div class="row">
      <div class="col-md-4">
        <div ng-controller="foo">
          <input type="datetime" class="form-control" date-time ng-model="myDate" format="dd-MM-yyyy HH:MM" placeholder="Select datetime">
          <pre>myDate: {{myDate}}</pre>
        </div>
      </div>
    </div>
  </div>

JS:

angular.module('demo', ['datePicker']).controller('foo', ['$scope', function($scope) {
  //empty
}]);

Here is a plnkr

score 4 · Accepted Answer · edited May 23 '17 at 11:44

4

Here's the updated plnkr - http://plnkr.co/edit/Qagb78UDqXQrabcZucr6.

To get it working, I had to make ng-model point to an object.property (myDate.value) in the input. And you can get the model value in the template like this:

<pre>
      myDate: {{myDate.value | date: "dd-MM-yyyy HH:MM"}}
</pre>

Controller:

$scope.myDate = {
        value: ''
};

Hope this answers your question. Here's the reason why ng-model need to have a dot - Does my ng-model really need to have a dot to avoid child $scope problems?.

edited May 23 '17 at 11:44

Community

1
1

answered Jan 20 '16 at 03:20

Sabarish Senthilnathan

333
2
11

Now the problem is, that once a date is selected, the scope value does not update, when I select another date. How to achieve that? – herrh Jan 20 '16 at 14:33
That's weird. It was updating yesterday. Let me take a look. – Sabarish Senthilnathan Jan 20 '16 at 14:35
Ah, I see what you mean. If you update it by typing, it doesn't update the date. – Sabarish Senthilnathan Jan 20 '16 at 14:39
Hmm, can't make it work. What needs to be done to show the updated time with seconds too, without any formatting? – herrh Jan 20 '16 at 14:43
If you remove the formatting (`| date: "dd-MM-yyyy HH:MM"`), the result would give the minutes as well in UTC like this `2016-02-17T17:40:00.000Z`. – Sabarish Senthilnathan Jan 20 '16 at 14:47
1

Ah thanks. Updated plnkr can be found [here](http://plnkr.co/edit/AqHyru2MVpdQn8oKe97S?p=preview). Additional Question: Is it possible to add ng-change="barFunc()" to the input and work with the scope values in this function? – herrh Jan 20 '16 at 14:54
Ah yes, remove the ` format="dd-MM-yyyy HH:MM"` in `input`, this would pick up the changes in minutes. Then change the result like this `myDate: {{myDate.value | date: "yyyy-MM-dd HH:mm"}}`. This would make the `myDate` pick up changes in minutes. Update fiddle - http://plnkr.co/edit/Qagb78UDqXQrabcZucr6/. Hope this helps. Let me know if not :). – Sabarish Senthilnathan Jan 20 '16 at 14:55
1

I tried ng-change, but that doesn't seem up pick the the changes you make to the input typing. Let me try with ng-watch. – Sabarish Senthilnathan Jan 20 '16 at 14:56
Would be great if you can make it work with one of these. – herrh Jan 20 '16 at 15:02

angular-datepicker: get ng-model value into scope

1 Answers1