Skip to content
This repository has been archived by the owner on May 12, 2018. It is now read-only.

opening a mdp-time-picker cause closing of Md-Dialog where it is located #200

Open
kuajia opened this issue Jan 4, 2018 · 1 comment
Open

Comments

@kuajia
Copy link

kuajia commented Jan 4, 2018

I am having a problem with a portion of code I wrote... I want to display a dialog which allows the user to modify some hours pamethers. So I used the mdp-time-picker to get and desplay the data. The issue comes when I open the picker, because the open dialog closed immediatly after the picker has displayed.
I tried to use the 'multiple' value, like this :

$mdDialog.show({
  controller: DialogController,
  templateUrl: './OrariCounter/modal.html',
  parent: angular.element(document.body),
  targetEvent: ev,
  multiple: true,
  clickOutsideToClose:false,
  fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
});

Has I read in another post of @alenaksu, but this don't solved the problem, probably because I misinterpret the utility of the components.

@Celadora
Copy link

Celadora commented Feb 20, 2018

The problem occurs because the underlying $mdDialog that is instantiated when mdp-timepicker is built does not have the "multiple: true" option.

The "$mdpTimePicker" provider starts around line 800 in mdPickers.js. Adding the multiple: true option will fix this problem.

module.provider("$mdpTimePicker", function() {
    var LABEL_OK = "OK",
        LABEL_CANCEL = "Cancel";

    this.setOKButtonLabel = function(label) {
        LABEL_OK = label;
    };

    this.setCancelButtonLabel = function(label) {
        LABEL_CANCEL = label;
    };

    this.$get = ["$mdDialog", function($mdDialog) {
        var timePicker = function(time, options) {
            if(!angular.isDate(time)) time = Date.now();
            if (!angular.isObject(options)) options = {};
            return $mdDialog.show({
		multiple: true,
		...

Update:
A (possibly) better solution is to configure mdDialog when your application starts so that the "multiple" argument is set to true by default.

module.config(function($provide) {
    $provide.decorator("$mdDialog", function ($delegate) {
      var show = $delegate.show;
      $delegate.show = function decorateDialogShow () {
        var args = angular.extend({}, arguments[0]);
        if(args.multiple === undefined) args.multiple = true;
        return show(args);
      }
      return $delegate;
    });
  })

We hope this helps you!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants