0

I'm using Eonasdan's DateTimePicker in a directive, specifically example 9 on that page, to get a date range for a search. The date picker is easily set up, but I can't get a reference to DateTimePicker that is used in the example to call setMinDate and setMaxDate. The match $attr holds the id of the other date time picker so I can set up the onChange event. I can get the element by id using $( $attrs.match ) but the rest doesn't resolve and is undefined. Anyone know what the issue might be?

Using $element.data('DateTimePicker') gets a reference, but I need to get the paired date picker so I can change the min and max values that are allowed to be set on one with regards to the other. So for example if the fromDatePicker is Sept 1, 2014 then the toDatePicker can't choose anything before Sept 1, 2014 using the code from example 9, and vice versa.

Angular directive

.directive('datePicker', [function() {

    var datePickers = [];

    return {
        restrict: 'A',
        scope: {},
        link: function( $scope, $element, $attrs ) {

            $element.datetimepicker({
                pickDate: true,
                pickTime: false,
                useCurrent: false, 
                showToday: true,
                format: 'MMM DD, YYYY',
                language: 'en'
            });

            // Check if date picker is used for determining a date range
            if( $attrs.match ) {

                // Check if date range minimum
                if( $attrs.datePicker === 'min' ) {

                    // Setup date change event, and set the minimum date
                    $element.on( 'dp.change', function( e ) {

                        // NOTE: can get ref of element using match id, but 
                        // data('DateTimePicker') doesn't resolve so setMaxDate is undefined

                        $( $attrs.match ).data('DateTimePicker').setMinDate( e.date );
                    });
                }
                // Check if date range maximum
                else if( $attrs.datePicker === 'max' ) {

                    // Setup date change event, and set the maximum date
                    $element.on( 'dp.change', function( e ) {

                        // NOTE: can get ref of element using match id, but 
                        // data('DateTimePicker') doesn't resolve so setMaxDate is undefined

                        $( $attrs.match ).data('DateTimePicker').setMaxDate( e.date );
                    });
                }
            }
        }
    };

Markup housing both directives:

<div class='col-md-4'>
    <div class="form-group">
        <label for="listDateRangeFrom">Date From</label>
        <div class='input-group date' 
             id='listDateRangeFrom'
             date-picker="min" 
             match="listDateRangeTo">
            <input type='text' 
                   class="form-control" >
            <span class="input-group-addon">
                <span class="fa fa-calendar"></span>
            </span>
        </div>
    </div>
</div>

<div class='col-md-4'>
    <div class="form-group">
        <label for="listDateRangeTo">Date To</label>
        <div class='input-group date' 
             id='listDateRangeTo' 
             date-picker="max" 
             match="listDateRangeFrom">
            <input type='text' 
                   class="form-control">
            <span class="input-group-addon">
                <span class="fa fa-calendar"></span>
            </span>
        </div>
    </div>
</div>
mtpultz
  • 17,267
  • 22
  • 122
  • 201
  • I don't fully understand what you've tried but we are using the same datetimepicker in our angular apps. We also have a case using min/max date. We decided to bind the input to a `$scope` value via `ng-model` and used `$watch` to detect model changes and update datetimepicker range. – glepretre Nov 10 '14 at 13:30
  • Hi @glepretre do you have an example? I see what you're saying about model change and watch, but not sure how you set up the directive so each of the date pickers will update each other. – mtpultz Nov 10 '14 at 18:38
  • Hi! Our app is very specific but you're on the right way: 1) require [ngModelController](https://docs.angularjs.org/api/ng/type/ngModel.NgModelController) in your directive by adding the `require: 'ngModel'` option 2) bind each input to a `$scope` value using ``ng-model`: `` 3) implement an `updateModel` function called on `dp.change` event: `$element.on('dp.change', updateModel);` this function will have to use ngModelController APÏ ;) – glepretre Nov 12 '14 at 15:36
  • Hi @glepretre, I'm still having issues with this. I've got it so on dp.change I can change min/max date of my paired date pickers to get a range. But, I can't figure out how to use ngModelCtrl to either set the input value on load if a value is available, or update the modelValue when the dp.change occurs. The datepicker sets the input value that I can grab using $element.val(), and I can set $modelValue, but not sure how to get it to propagate up to the parent directive. The $watch I have in there never fires on change, unless I physically type in the input field. – mtpultz Nov 14 '14 at 05:31
  • When you pick a date with the picker the input is not updated? – glepretre Nov 14 '14 at 08:03
  • No it was the model, I managed to find a solution I really haven't used / don't really understand $scope.$apply, but it turns out to get the ngModelController to update it needs to be: $scope.$apply(function() { ngModelCtrl.$setViewValue($element.val()); ngModelCtrl.$render(); }); – mtpultz Nov 14 '14 at 08:13
  • You generally need to use `$scope.$apply(fn)` when your directive is modifying something outside of the "angular context" to let angular run a `$digest` phase and react to the changes you made. For more understanding: [angular wiki](https://github.com/angular/angular.js/wiki/When-to-use-%24scope.%24apply%28%29), [blog post](http://jimhoskins.com/2012/12/17/angularjs-and-apply.html), [famous SO question](http://stackoverflow.com/q/15112584/3049002) – glepretre Nov 14 '14 at 10:51
  • Thanks for the links, that blog post was great. – mtpultz Nov 14 '14 at 17:44

0 Answers0