mdPickers
mdPickers copied to clipboard
opening a mdp-time-picker cause closing of Md-Dialog where it is located
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.
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!