trigger datepicker on clear date - Extending Umbraco and using the API

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Max 80 posts 437 karma points

Nov 29, 2017 @ 14:30

Trigger $dirty Datepicker on "clear date" or change

Extending Umbraco and using the API

Umbraco 7

I can't get my datepicker to go dirty on change or when it's cleared.

Is there a configuration I need to add to make $dirty work on the ng-form?

CONTROLLER:

 $scope.StartTime = {
    model: {
        editor: "Umbraco.DateTime",
        label: 'Start Time',
        description: 'Enter the date/time the meeting will start.',
        hideLabel: false,
        view: "datepicker",
        alias: 'StartTime',
        value: "",
        required: true,
        validation: {
            mandatory: true,
            pattern: ""
        },
        config: {
            format: "YYYY-MM-DD HH:mm",
            pickDate: true,
            pickTime: true,
            useSeconds: false
        }
    }
};

VIEW:

<ng-form name="meetingsEdit" ng-controller="meetings.edit.controller as vm" ng-show="loaded" ng-submit="save()" val-form-manager ng-model="meeting">
<umb-panel>
    <umb-editor-view ng-if="loaded">
        <umb-editor-header name="meetingTitle(MeetingType.model.value, MeetingTitle)" name-locked="true" hide-icon="true" alias="formTitle" hide-alias="true" description="StartTime.model.value" description-locked="true">
        </umb-editor-header>
        <umb-editor-container>
            <h1 ng-show="meetingsEdit.$dirty==true">DIRTY</h1>
            <div class="umb-pane">
                <umb-property property="StartTime.model">
                    <umb-editor model="StartTime.model" class="ng-pristine"></umb-editor>
                </umb-property>
            </div>
        </umb-editor-container>
        <umb-editor-footer>
            <umb-editor-footer-content-right>
                <a href="" class="btn btn-link" ng-click="close()"><localize key="general_cancel">Cancel</localize></a>
                <umb-button type="submit"
                            button-style="success"
                            state="vm.page.saveButtonState"
                            shortcut="ctrl+s"
                            label="Save"
                            label-key="buttons_save">
                </umb-button>
            </umb-editor-footer-content-right>
        </umb-editor-footer>
    </umb-editor-view>

Copy Link

Max 80 posts 437 karma points

Nov 29, 2017 @ 15:14

made a change to \Umbraco\Js\umbraco.controllers.js:

function dateTimePickerController: added the currForm.$setDirty()

//handles the date changing via the api
    function applyDate(e) {
        // set form to dirty to tricker discard changes dialog
        var currForm = angularHelper.getCurrentForm($scope);
        currForm.$setDirty();

        angularHelper.safeApply($scope, function () {
            // when a date is changed, update the model
            if (e.date && e.date.isValid()) {
                $scope.datePickerForm.datepicker.$setValidity('pickerError', true);
                $scope.hasDatetimePickerValue = true;

                $scope.datetimePickerValue = e.date.format($scope.model.config.format);
            } else {
                $scope.hasDatetimePickerValue = false;
                $scope.datetimePickerValue = null;
            }
            setModelValue();
            if (!$scope.model.config.pickTime) {
                $element.find('div:first').datetimepicker('hide', 0);
            }
        });
    }

Added currForm.$setDirty()

$scope.clearDate = function () {
        $scope.hasDatetimePickerValue = false;
        $scope.datetimePickerValue = null;
        $scope.model.value = null;
        $scope.datePickerForm.datepicker.$setValidity('pickerError', true);
        // set form to dirty to tricker discard changes dialog
        var currForm = angularHelper.getCurrentForm($scope);
        currForm.$setDirty();
    };

Copy Link

is working on a reply...

Please Sign in or register to post replies