luisfarzati/ng-bs-daterangepicker

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.

Opened this issue · 7 comments

vinaykevadia commented
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.
ivkremer commented

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.

djheart0710 commented

@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.

ivkremer commented

@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.

djheart0710 commented

@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.

ivkremer commented

@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(...) {
...
riturajratan commented

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

  • 👍1
kenjfg commented

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);