ng-bs-daterangepicker icon indicating copy to clipboard operation
ng-bs-daterangepicker copied to clipboard

it is not updating start date and end date in input text while updating model manually. it seems $watch on model is not working. angular version 1.4.3 i am using.

Open vinaykevadia opened this issue 9 years ago • 7 comments

vinaykevadia avatar Aug 14 '15 07:08 vinaykevadia

I suppose this is a bug and what is needed is a manual ngModel.$render(); call after value initialization by directive itself (after line 70). @luisfarzati I'm going to submit a pull request.

ivkremer avatar Sep 01 '15 16:09 ivkremer

@ivkremer @luisfarzati Hi, my angular version is 1.2.16. When I use ng-bs-daterangepicker, I encounter a problem and i can't get correct daterange, the result in input filed is [object object]. Then I find your submit, and I comment "ngModel.$render()", then it works. I think it's strange, and it may relate to angular's version. What do you think about it? AND thanks for your contribution.

djheart0710 avatar Sep 18 '15 07:09 djheart0710

@djheart0710 I'm not sure because I didn't participate in this directive development but I consider direct $render() call there is required since it's set manually and not parsed or rendered so as for me it's not so strange. Didn't know about angular v1.2.16, the behaviour is different but still is buggy.

ivkremer avatar Sep 18 '15 13:09 ivkremer

@ivkremer What I mean about the strange thing is the result and behavior I got, not the statement you add. The method you add is reasonable, but it fails in my project. I get something when I go through the code, but I'm not sure about it. I need sometime to verify it.

djheart0710 avatar Sep 19 '15 02:09 djheart0710

@djheart0710 Ok, I got your idea. Actually I failed with testing and didn't understand that my fix is not working for an older version at least for v1.2.16 resulting in [Object object] in the input. To fix this just try to add priority: 1, to directive's options, like:

restrict: 'E',
priority: 1,
require: '?ngModel',
link: function(...) {
...

ivkremer avatar Oct 07 '15 12:10 ivkremer

can you update this in your code. So it will helpful for people, when they use bower install .

riturajratan avatar Oct 18 '15 10:10 riturajratan

I cannot update the model after I make a request to the server and fill the date object with the new dates. It's show [object Object]. This is the directive:

/**

  • @license ng-bs-daterangepicker v0.0.5

  • (c) 2013 Luis Farzati http://github.com/luisfarzati/ng-bs-daterangepicker

  • License: MIT */ (function(angular) {

    'use strict';

    angular .module('ngBootstrap', []) .directive('input', ['$compile', '$parse', '$filter', function($compile, $parse, $filter) { return { restrict: 'E', require: '?ngModel', link: function($scope, $element, $attributes, ngModel) {

     			if ($attributes.type !== 'daterange' || ngModel === null) {
     				return;
     			}
    
     			var options = {};
     			options.format = $attributes.format || 'D MMM YYYY';
     			options.separator = $attributes.separator || ' - ';
     			options.minDate = $attributes.minDate && moment($attributes.minDate);
     			options.maxDate = $attributes.maxDate && moment($attributes.maxDate);
     			options.dateLimit = $attributes.limit && moment.duration.apply(this, $attributes.limit.split(' ').map(function(elem, index) {
     				return index === 0 && parseInt(elem, 10) || elem;
     			}));
     			options.ranges = $attributes.ranges && $parse($attributes.ranges)($scope);
     			options.locale = $attributes.locale && $parse($attributes.locale)($scope);
     			options.opens = $attributes.opens || $parse($attributes.opens)($scope);
    
     			if ($attributes.enabletimepicker) {
     				options.timePicker = true;
     				angular.extend(options, $parse($attributes.enabletimepicker)($scope));
     			}
    
     			function datify(date) {
     				return moment.isMoment(date) ? date.toDate() : date;
     			}
    
     			function momentify(date) {
     				return (!moment.isMoment(date)) ? moment(date) : date;
     			}
    
     			function format(date) {
     				return $filter('date')(datify(date), options.format.replace(/Y/g, 'Y').replace(/D/g, 'D')); //date.format(options.format);
     			}
    
     			function formatted(dates) {
     				return [format(dates.startDate), format(dates.endDate)].join(options.separator);
     			}
    
     			ngModel.$render = function() {
     				if (!ngModel.$viewValue || !ngModel.$viewValue.startDate) {
     					return;
     				}
     				$element.val(formatted(ngModel.$viewValue));
     			};
    
     			$scope.$watch(function() {
     				return $attributes.ngModel;
     			}, function(modelValue, oldModelValue) {
    
     				if (!$scope[modelValue] || (!$scope[modelValue].startDate)) {
     					ngModel.$setViewValue({
     						startDate: moment().startOf('day'),
     						endDate: moment().startOf('day')
     					});
     					return;
     				}
    
     				if (oldModelValue !== modelValue) {
     					return;
     				}
    
     				$element.data('daterangepicker').startDate = momentify($scope[modelValue].startDate);
     				$element.data('daterangepicker').endDate = momentify($scope[modelValue].endDate);
     				$element.data('daterangepicker').updateView();
     				$element.data('daterangepicker').updateCalendars();
     				$element.data('daterangepicker').updateInputText();
    
     			});
    
     			$element.daterangepicker(options, function(start, end, label) {
    
     				var modelValue = ngModel.$viewValue;
    
     				if (angular.equals(start, modelValue.startDate) && angular.equals(end, modelValue.endDate)) {
     					return;
     				}
    
     				$scope.$apply(function() {
     					ngModel.$setViewValue({
     						startDate: (moment.isMoment(modelValue.startDate)) ? start : start.toDate(),
     						endDate: (moment.isMoment(modelValue.endDate)) ? end : end.toDate()
     					});
     				});
    
     			});
    
     		}
    
     	};
    
     }]);
    

})(angular);

kenjfg avatar Feb 16 '17 18:02 kenjfg