Handling two datepickers in a form with angularjs

Question

Here's I am using simple form with angularjs. Everything works fine. I am having watchgroup for EndDateFrom & EndDateTo datepickers. When it's defined I am logging the value to console. I am constructing an expression based on my if conditions if value is defined from datepickers, But i feel my code is little messy. Is there any better way to format this to make more simple.

I know we can't use switch case for this, but just checking if there is any other way to make less messy

$scope.$watchGroup(['$scope.EndDateFrom', '$scope.EndDateTo'], function () {

        if (!angular.isUndefined($scope.EndDateFrom) && !angular.isUndefined($scope.EndDateTo)) {

           return console.log(('expr://' + $filter('date')(new Date($scope.EndDateFrom), 'MM/dd/yyyy') + ' and ' + $filter('date')(new Date($scope.EndDateTo), 'MM/dd/yyyy')));
            // $scope.Test1 = 'expr://' + $filter('date')(new Date(disbursementsScheduleVm.processEndDateFrom), 'MM/dd/yyyy') + ' and ' + $filter('date')(new Date(disbursementsScheduleVm.processEndDateTo), 'MM/dd/yyyy');
        }
        else if(!angular.isUndefined($scope.EndDateFrom))
        {
            return console.log(('expr://' + $filter('date')(new Date($scope.EndDateFrom), 'MM/dd/yyyy')));
        }
        else if (!angular.isUndefined($scope.EndDateTo))
        {
            return console.log(('expr://' + $filter('date')(new Date($scope.EndDateTo), 'MM/dd/yyyy')));
        }

    });

Answer 1

Would something like that work better?

$scope.$watchGroup(['$scope.EndDateFrom', '$scope.EndDateTo'], function () {
  const FORMAT = 'MM/dd/yyyy';
  const dates = [];

  if (!angular.isUndefined($scope.EndDateFrom))
    dates.push($filter('date')(new Date($scope.EndDateFrom), FORMAT));

  if (!angular.isUndefined($scope.EndDateTo))
    dates.push($filter('date')(new Date($scope.EndDateTo), FORMAT));

  const expression = `expr://${dates.join(' and ')}`;
  console.log(expression);
  return expression;
});

---

• Array.join() will help avoid branching. In your case we don't really save any branches, but in more complex cases it may save a lot.
• I left angular.isUndefined(...) untouched since I don't know how different it is from the native JavaScript's analogue, but if it's equivalent you may want to use $scope.EndaDateFrom !== undefined instead.
• Original return console.log is counter-intuitive. Is it returning a value, or logging it to the console, or both? I split that into two separate operations.
• FORMAT is a reusable constant.
• expr://${dates.join(' and ')} uses string interpolation to create result object.

Update 1

`expr://${dates.join(' and ')}`

in older versions of JavaScript should be replaced with a classic equivalent

'expr://' + dates.join(' and ')