I'm experiencing odd behaviors (behaviours): I'm trying to understand, with regards to, a custom dialog and reused umbraco editors.

The first issue is a relationship between the dialog and a datetimepicker:

If I change leave the dialog.options.container property alone the dialog opens, the onclick events are fine (for all property editors) except the datepicker modal timepicker never opens. I can edit the time manually from the text box, but the modal timepicker never opens if you click the "calendar" icon.

If I change the dialog.options.container property to "$('#contentcolumn')" for instance. the datetimepicker timepicker modal opens.. but then a "close" event on the whole dialog is fired. clicking a new value from the dropdown closes the dialog, clicking off of the datetime picker closes the dialog.

i have a custom propertyeditor "committeemeetings.edit.controller" where i define a button with an "onClick" event to open the dialog:

$scope.onEdit = function (committeeId) { // id of the committee/session that is being edited from the given $scope.model.value array

    var item = $scope.model.value.filter(function (itm) { return itm.CommitteeId == committeeId;});; // list of committees/sessions for this meeting.

    var config = {
        animation: "fade",
        modalClass: "umb-overlay",
        // width: "100%",
        // inline: true,
        // iframe: false,
        show: true,
        template: "/App_Plugins/PublicInformation/propertyEditors/directives/committeemeetings/committeemeetings.dialog.html",
        callback: done,
        // element: undefined,
        //this allows us to pass in data to the dialog if required 
        //which can be used to configure the dialog
        //and re-use it for different purposes. It will set on to the 
        //$scope.dialogData if it is defined.
        dialogData: item[0]
    };

    function done(data) { console.info(data); };

    var committeeDialog = dialogService.open(config);
};

The onClick event opens my editor. The dialogData object has my data. My dialog has 2 propertyeditors I'm reusing as such:

<div ng-controller="committeemeetings.dialog.controller" class="umb-overlay umb-overlay-right">
<ng-form name="propertyForm" class="umb-overlay__form ng-pristine ng-valid">
    <div class="umb-overlay-header">
        {{Committee.model.value}}<br/>
        <span ng-if="Committee.model.config.items">{{CommitteeName}} - {{StartTime.model.value | date:'h:mm a'}}</span>
    </div>
    <div class="umb-overlay-container">
        <umb-property ng-if="Committee.model" property="Committee.model">
            <umb-editor ng-if="Committee.model" model="Committee.model"></umb-editor>
        </umb-property>
        <umb-property ng-if="StartTime.model" property="StartTime.model">
            <umb-editor ng-if="StartTime.model" model="StartTime.model"></umb-editor>
        </umb-property>
    </div>
    <div class="umb-overlay-drawer" ng-class="{'-auto-height': true}">
        <!--<div class="umb-overlay-drawer__align-right ng-scope" >
            <umb-button model="model.closeOverlay"></umb-button>
            <umb-button model="model.submit"></umb-button>
        </div>-->
    </div>
</ng-form>

The Committee.model is a dropdown (initialized as such in the my dialog controller):

var Committee = {
    model: {
        alias: "CommitteeName",
        editor: "Umbraco.DropDown",
        label: "Committee/Session Name",
        description: "Please select a committee or sesssion.",
        hideLabel: false,
        view: "dropdown",
        value: null,
        validation: {
            mandatory: false,
            pattern: ""
        },
        config: {
            multiple: false,
            items: [{ id: -1, value: "-- Please select one. --" }]
        }
    },
    existingValue: null,
    hasValue: false
};

The StartTime datatimepicker is initialized as such:

 var StartTime = {
        model: {
            editor: "Umbraco.DateTime",
            label: "Start Time",
            description: "Please provide the time this session is scheduled to begin.",
            hideLabel: false,
            view: "datepicker",
            alias: "CommitteeStartTime",
            value: null,
            validation: {
                mandatory: false,
                pattern: ""
            },
            config: {
                format: "H:mm A",
                pickDate: false,
                pickTime: true,
                useSeconds: false
            }
        },

        existingValue: null,
        hasValue: false
    };