Hi,

Which version of Umbraco are you using? I developed it against an early 7.0.x version, so maybe there are issues in later version? If you let me know I'll test and fix.

Hi Dan,
currently using Umbraco 7.1.0
Would be nice if you could fix it.

Thank you

/horst

Hi,

I'm not quite sure what has changed in 7.1 but it seemed to have broken something. I've uploaded a new 1.1 version to the project page - http://our.umbraco.org/projects/backoffice-extensions/diplo-date-range-picker - this has a quick fix that should work. You should be able to just download and install over current version. Just make sure to restart site so you don't get any cached files.

Let me know if that works (but I'm offline for a couple of days from Thursday).

Hi Dan,

seems not to work.
Cancel button does nothing. Deleting values manually from input and publishing - nothing changes.

removed  property from doctype
deleted datatype
deinstalled package
installed package
added datatyle
added datatype to doctype 
deleted browser cache
restarted application 

hm, any more ideas?

Thank you

/horst 

I tested it on 7.1.3 and it definitely worked for me.

If you look in /App_Plugins/DateRangePicker you should see daterangepicker.controller.js  Ensure this contains:

angular.module("umbraco")
.controller("Diplo.DateRangePicker",
//inject umbracos assetsService
function ($scope, $timeout, assetsService) {

    assetsService
        .load([
            "/App_Plugins/DateRangePicker/lib/moment.min.js",
            "/App_Plugins/DateRangePicker/lib/daterangepicker.js"
        ])
        .then(function () {

            var uFormat = "YYYY-MM-DDTHH:mm:ss"
            var timePicker = $scope.model.config.timePicker != 1 ? false : true;
            var enableEditing = $scope.model.config.enableEditing == 1 ? true : false;
            var initialiseCurrent = $scope.model.config.initialiseCurrent == 1 ? true : false;

            var dateFormat;

            var hasDateFormat = $scope.model.config.dateFormat != null && $scope.model.config.dateFormat.length > 0;

            if (timePicker) {
                dateFormat = !hasDateFormat ? uFormat : $scope.model.config.dateFormat;
            }
            else {
                dateFormat = !hasDateFormat ? "YYYY-MM-DD" : $scope.model.config.dateFormat;
            }

            var showDropdowns = $scope.model.config.showDropdowns != 1 ? false : true;

            var timePickerIncrement = $scope.model.config.timePickerIncrement == null ? 15 : parseInt($scope.model.config.timePickerIncrement);
            var timePicker12Hour = $scope.model.config.timePicker12Hour == null ? false : true;

            $timeout(function () {

                var dateBox = $('#diplo-drp-' + $scope.model.alias);

                var current = $scope.model.value;

                if (current) {
                    var parts = current.split(",");
                    var startDate = moment(parts[0])
                    var endDate = moment(parts[1]);
                    $(dateBox).val(startDate.format(dateFormat) + " - " + endDate.format(dateFormat));
                }
                else if (initialiseCurrent) {
                    var startDate = moment();
                    var endDate = moment().add('days', 1);
                    $(dateBox).val(startDate.format(dateFormat) + " - " + endDate.format(dateFormat));
                }

                if (enableEditing) {
                    $(dateBox).removeAttr("readonly");
                }

                $(dateBox).daterangepicker({ 
                    format: dateFormat,
                    showDropdowns: showDropdowns,
                    timePicker: timePicker,
                    timePickerIncrement: timePickerIncrement,
                    timePicker12Hour: timePicker12Hour
                },
                function (start, end) {
                    $("#diplo-drp-json-" + $scope.model.alias).val(start.format(uFormat) + "," + end.format(uFormat)).trigger('input');
                }
                );

                $('#diplo-drp-cal-' + $scope.model.alias).click(function () {
                    $('#diplo-drp-' + $scope.model.alias).focus();
                });

            }, 1000);
        });

    //load the seperate css for the editor to avoid it blocking our js loading
    assetsService.loadCss("/App_Plugins/DateRangePicker/lib/daterangepicker-bs2.css");
});

I know U7 caches aggresively. If you set debug=true in web.config and disabled cache in Chrome (when in console like http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development ) then that should ensure you get latest version of file.

If that doesn't work, I'm not sure, but I'll look next weekend as I'm away for a few days. Sorry for any inconvenience.

Hi Dan,

doesn't work on my installation. A once set daterange is like burned in. Changing yes, resetting no.
Checked everything what you suggested.

/horst

Hi Horst,

OK, I think I misunderstood what you wanted to do. Basically you want to be able to clear the current date, so that it is empty? There isn't anything built in to do this, but it's quite easy to add a 'clear' button to the picker:

If you go to /App_Plugins/DateRangePicker/ folder and then edit these two files to be this:

editor.html

<div ng-controller="Diplo.DateRangePicker" class="drp-holder">
    <div class="input-prepend">
        <span class="add-on" id="diplo-drp-cal-{{ model.alias }}"><i class="icon-calendar"></i></span>
        <input type="text" name="diplo-drp-{{ model.alias }}" id="diplo-drp-{{ model.alias }}" readonly="readonly" class="date-box"  />
    </div>
    <a ng-click="clearDate()" class="btn" title="Clear date">clear</a>
    <input type="text" id="diplo-drp-json-{{ model.alias }}" ng-model="model.value" style="display:none"  />
</div>

daterangepicker.controller.js

angular.module("umbraco")
.controller("Diplo.DateRangePicker",
//inject umbracos assetsService
function ($scope, $timeout, assetsService) {

    assetsService
        .load([
            "/App_Plugins/DateRangePicker/lib/moment.min.js",
            "/App_Plugins/DateRangePicker/lib/daterangepicker.js"
        ])
        .then(function () {

            var uFormat = "YYYY-MM-DDTHH:mm:ss"
            var timePicker = $scope.model.config.timePicker != 1 ? false : true;
            var enableEditing = $scope.model.config.enableEditing == 1 ? true : false;
            var initialiseCurrent = $scope.model.config.initialiseCurrent == 1 ? true : false;

            var dateFormat;

            var hasDateFormat = $scope.model.config.dateFormat != null && $scope.model.config.dateFormat.length > 0;

            if (timePicker) {
                dateFormat = !hasDateFormat ? uFormat : $scope.model.config.dateFormat;
            }
            else {
                dateFormat = !hasDateFormat ? "YYYY-MM-DD" : $scope.model.config.dateFormat;
            }

            var showDropdowns = $scope.model.config.showDropdowns != 1 ? false : true;

            var timePickerIncrement = $scope.model.config.timePickerIncrement == null ? 15 : parseInt($scope.model.config.timePickerIncrement);
            var timePicker12Hour = $scope.model.config.timePicker12Hour == null ? false : true;

            $timeout(function () {

                var dateBox = $('#diplo-drp-' + $scope.model.alias);

                var current = $scope.model.value;

                if (current) {
                    var parts = current.split(",");
                    var startDate = moment(parts[0])
                    var endDate = moment(parts[1]);
                    $(dateBox).val(startDate.format(dateFormat) + " - " + endDate.format(dateFormat));
                }
                else if (initialiseCurrent) {
                    var startDate = moment();
                    var endDate = moment().add('days', 1);
                    $(dateBox).val(startDate.format(dateFormat) + " - " + endDate.format(dateFormat));
                }

                if (enableEditing) {
                    $(dateBox).removeAttr("readonly");
                }

                $(dateBox).daterangepicker({ 
                    format: dateFormat,
                    showDropdowns: showDropdowns,
                    timePicker: timePicker,
                    timePickerIncrement: timePickerIncrement,
                    timePicker12Hour: timePicker12Hour
                },
                function (start, end) {
                    $("#diplo-drp-json-" + $scope.model.alias).val(start.format(uFormat) + "," + end.format(uFormat)).trigger('input');
                }
                );

                $('#diplo-drp-cal-' + $scope.model.alias).click(function () {
                    $('#diplo-drp-' + $scope.model.alias).focus();
                });

            }, 1000);

            $scope.clearDate = function () {
                console.log("clear date");
                $('#diplo-drp-' + $scope.model.alias).val('');
                $scope.model.value = '';
            }
        });

    //load the seperate css for the editor to avoid it blocking our js loading
    assetsService.loadCss("/App_Plugins/DateRangePicker/lib/daterangepicker-bs2.css");
});

This should add a 'clear' button next to the date that, when clicked, empties the date range and resets it.

Again, to ensure you get changes after you have edited these files restart Umbraco (or put web.config into "debug" and hit CTRL-F5 or use chrome dev tools to disable caching).

Hope that works :)

Hi Dan,

perfect, that's it. So we talked at cross purposes. I thought the "Cancel" Button should be responsible for resetting.
Thank you very much

/horst

is working on a reply...