0

I'm new to Angular (and javascript), so there's probably a pretty simple reason that this isn't working. I've got a datepicker that gives me a date based on which I generate some content to display. So if the date from the datepicker changes, I need to regenerate the content. That I can do (ng-change is executing)---the problem is that I'm getting the same content, because the date isn't actually changing. I can confirm it with alerts to display the date being used on the generation of the content. The date is originally set to a default (yesterday's date) so the first time the content is generated, it works fine, but when I try to change the date with the datepicker, it doesn't change.

HTML code:

<p class="col-xs-2 col-md-2 col-md-offset-5 text-center input-group">
    <span class="form-control input-sm" style="cursor:pointer" ng-click="openDatePicker($event, 'openedDaily')"> 
        {{ds_date | date:'MM/dd/yyyy'}}
    </span>
    <input type="hidden" class="form-control input-sm"
        ng-model="ds_date" ng-change="regenerate();"
        ng-required="true"
        format-day-title="MM/dd/yyyy"
        datepicker-popup="MM/dd/yyyy"
        show-button-bar="false"
        is-open="openedDaily"
        min-date="onemonthago"
        max-date="yesterday"
        close-text="Close" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-sm btn-default" ng-click="openDatePicker($event, 'openedDaily')"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p> 

Controller:

angular.module('twApp')
.controller('ReportsCtrl', function ($scope, $modal, $filter, LoginData, $timeout, $http) {
    $scope.yesterday = new Date();
    $scope.yesterday.setDate($scope.yesterday.getDate() - 1);
    $scope.reportOutput = null;
    $scope.ds_date= $scope.yesterday;


    $scope.openDatePicker = function($event, name) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope[name] = true;
  alert($scope.ds_date);
    };


    function dateString(input) {
        return $filter('date')(input, 'yyyy-MM-dd');
    }

    $scope.goBack = function(){
  $scope.reportOutput = null;
    };

    $scope.regenerate = function(){
  $scope.generate($scope.which);
    };

    $scope.generate = function(id) {
        var promise = requestReport(id);
        if (promise !== null) {
    alert('generated!!   '+$scope.ds_date);
            $scope.loading = true;
            promise.then(
                function() {
                    $scope.loading = false;
                }, function() {
                    alert('There was a problem generating the report.  Please try again.');
                    $scope.loading = false;
                }
            );
        }
    };

    var requestReport = function(id) {
         //do stuff
    };
});

EDIT: Here is what generates the datepicker:

<script id="template/datepicker/datepicker.html" type="text/ng-template">
        <div role="application" ng-keydown="keydown($event)">
          <daypicker tabindex="0"></daypicker>
        </div>
    </script>
    <script id="template/datepicker/popup.html" type="text/ng-template">
        <ul class="dropdown-menu" ng-style="{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}" ng-keydown="keydown($event)">
            <li ng-transclude></li>
            <li ng-if="showButtonBar" style="padding:10px 9px 2px">
                <span class="btn-group">
                    <button type="button" class="btn btn-sm btn-info" ng-click="select('today')">{{ getText('current') }}</button>
                    <button type="button" class="btn btn-sm btn-danger" ng-click="select(null)">{{ getText('clear') }}</button>
                </span>
                <button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>
            </li>
        </ul>
    </script>
    <script id="template/datepicker/day.html" type="text/ng-template">
        <table class="datepickertable">
          <thead>
            <tr>
              <th><button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
              <th colspan="{{5}}" class="text-center"><strong>{{title}}</strong></th>
              <th><button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
            </tr>
            <tr>
              <th ng-repeat="label in labels track by $index" class="text-center"><small aria-label="{{label.full}}">{{label.abbr}}</small></th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in rows track by $index">
              <td ng-repeat="dt in row track by dt.date" class="text-center" role="gridcell" id="{{dt.uid}}" aria-disabled="{{!!dt.disabled}}">
                <button type="button" style="width:100%;" class="btn btn-default btn-sm" ng-class="{'btn-info': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="{'text-muted': dt.secondary, 'text-info': dt.current}">{{dt.label}}</span></button>
              </td>
            </tr>
          </tbody>
        </table>
    </script>
8
  • What exactly is generating the datePicker? Commented Jan 9, 2015 at 16:59
  • @itamar Template added to the question. Commented Jan 9, 2015 at 17:07
  • @senschen what is openedDaily? Are you considering it as dateValue? Commented Jan 9, 2015 at 18:22
  • @pankajparkar I think (this isn't code that I wrote, so I'm not sure what all of it is doing--there's a lot going on, which is part of why I'm having so much trouble with this) openedDaily is a boolean that's used to set a style on the datepicker. Commented Jan 9, 2015 at 18:35
  • 1
    @pankajparkar Iguess I don't understand how the date is (supposed to be) getting set from the datepicker, because I had assumed that $scope.openDatePicker took care of that. But when it stopped working and I started hunting down the problem, I took a closer look at the code there, and now I'm not sure how it ever worked. But like I said, I'm new to angularjs, so there's a ton of stuff going on here that I don't fully understand. Commented Jan 9, 2015 at 18:39

1 Answer 1

0

You need to put some sort of ng-model in the daypicker wrapper to pass the value back to the scope. Try adding ng-model="ds_date"

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

2 Comments

Where in the wrapper would you recommend putting it?
@senschen <div role="application" ng-model="ds_date" ng-keydown="keydown($event)"> <daypicker tabindex="0"></daypicker> </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.