Angular JS datepicker doesn't update model

Question

I'm trying to filter a table using a daterange, but can't get the model to update so it doesn't know what date I picked.

This is the HTML for the datepicker popup:

<label>From:</label> 
 <p class="input-group" style="width:200px">
   <input type="text" class="form-control" uib-datepicker-popup = "{{format}}" ng-model="dt" is-open="status.opened"
                                           min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
                                           ng-required="true" close-text="Close"/>
     <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
     </span>
 </p>

The JS code in my controller:

(function ()
{
'use strict';

angular.module('aml-tech-dashboard.successful-emails').controller('datepickerController', function ($scope) {
    $scope.dt = '';
    $scope.status = {
        opened: false
    };

    $scope.format = "yyyy-MM-dd"
    $scope.minDate = new Date();
    $scope.dateOptions = {
        //formatYear: 'yy',
        startingDay: 1
    };

    $scope.open = function ($event) {
        $scope.status.opened = true;

    };

    });

})();

Table:

<tr ng-repeat = 'file in files | startFrom: dt'>

Hi Andreea. I notice that $scope.dt is not set to any value inside your $scope.$watch function — Zuko Mgwili
– Zuko Mgwili, Commented Jul 22, 2016 at 8:58
Hi, I removed that, It was something I used to just log it to my console and see if it detects changes when I select different dates. Assigning a value to $scope.dt didn't change anything though — Andreea
– Andreea, Commented Jul 22, 2016 at 9:00

Aron · Accepted Answer · 2016-07-22 09:12:33Z

1

Your tr element is wrong. It should look like this:

<tr ng-repeat="file in files | startFrom: dt"></tr>

You also have a mistake in the uib-datepicker-popup directive. It should look like this:

uib-datepicker-popup="{{format}}"

This is assuming you have defined the startFrom filter elsewhere in your module, as it is not a built-in Angular filter.

edited Jul 22, 2016 at 9:12

answered Jul 22, 2016 at 9:00

Aron

9,3187 gold badges37 silver badges60 bronze badges

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

5 Comments

Andreea Over a year ago

Thanks, changed that, but it's still not updating the model. I think it's something wrong with my controller

Aron Over a year ago

Do you have a startFrom filter defined somewhere?

Andreea Over a year ago

the uib-datepicker-popup directive thing was just me being bad at copy pasting, oops.

Aron Over a year ago

As I said, there is no built in startFrom filter in Angular, so that could be it

Andreea Over a year ago

You're right, I changed that and it works now. Thanks :)

Nadeem Khoury · Accepted Answer · 2016-07-22 09:11:14Z

0

try this:

$scope.dt = new Date();

and make sure that the controller is invoked when the view render.

answered Jul 22, 2016 at 9:11

Nadeem Khoury

9378 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular JS datepicker doesn't update model

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related