Hi I want to build a simple “from date” and “to date” data type so in the “to date” I won’t be able to select a date that is smaller than “from date”.

I have built a package that contains two date pickers and created a new data type, and tried listening to the scope event using $watch function, but it created an error related to $digest object.

The controller:

angular.module("umbraco")
    .controller("Moranmono.RangeDatePickerController", function ($scope) {
        var today = new Date();
        $scope.day = today.getDate();
        $scope.month = today.getMonth();
        $scope.year = today.getFullYear();

        $scope.datepickerFrom = {
            view: 'datepicker',
            config: {
                pickDate: true,
                pickTime: false,
                pick12HourFormat: false,
                format: "DD/MM/YYYY",
                minDate: moment({ y: $scope.year, M: $scope.month, d: $scope.day })
            },
        };

        $scope.datepickerTo = {
            view: 'datepicker',
            config: {
                pickDate: true,
                pickTime: false,
                pick12HourFormat: false,
                format: "DD/MM/YYYY",
                minDate: moment({ y: $scope.year, M: $scope.month, d: $scope.day })
            },
        };
    });

The html file:

<div class="rangedatepicker" ng-controller="Moranmono.RangeDatePickerController">
    <form name="insertkeyvalue_form" novalidate ng-submit="submit(datepicker.value)">
        <div class="tab-content umb-control-group">
            <label class="control-label">Date From</label>
            <umb-editor model="datepickerFrom"></umb-editor>
        </div>
        <div class="tab-content umb-control-group">
            <label class="control-label">Date To</label>
            <umb-editor model="datepickerTo"></umb-editor>
        </div>
    </form>
</div>

The watch function I tried, but created error in the console:

$scope.$watch('datepicker', function () {
   if ($scope.datepicker != undefined && $scope.loaded) {
       $scope.form.PubDate = $scope.datepicker.value;
   }
}, true);