How to avoid datetimepicker to be open everytime a modal is opened up #6980

8 Answer(s)

• 

  0

  Anjali_Musmade created one month ago

  Support Team Support Team Member

  Hello,

  If you want to disable datetime picker opened automatically every time then you have to customize your code. Please check this below code and try at your side. <abp-input asp-for="Book.FromDate" value="@DateTime.Now.ToString("yyyy-MM-dd")" type="date" abp-data-datepicker="false" />

  Thank you.

  Save Cancel
• 

  0

  rafael.gonzales created one month ago

  But this is not the expected behavior. The data is not being bonded to the control and the style and functionality are not the same as using the <abp-date-picker> tag. It should be an option in the same abp-date-picker tag to activate or deactivate the automatic opening of the datepicker. Using the <abp-input> as a workaround forces me not to use what abp can offer me from its core and makes me handle the bootstrap datetimepicker activation by my self and the data binding which is not what we are looking for.

  

  Save Cancel
• 

  0

  liangshiwei created one month ago

  Support Team Fullstack Developer

  This is because the Publish date is the first input, when the modal is on, it gets the focus and opens automatically.

  You can move Title input to the top

  Save Cancel
• 

  0

  rafael.gonzales created one month ago

  Hi Liangshiwei,

  It still happens if you have, for example, a dropdown as a first control. I made a loom video for that. How can you handle that situation? https://www.loom.com/share/6bcadeb599ac4a519e7f14b68c5098b0?sid=e1486af3-9d5d-4585-b93e-80f449cd5c45

  Save Cancel
• 

  0

  liangshiwei created one month ago

  Support Team Fullstack Developer

  Hi,

  Have you tried to move Title to the top?

  Save Cancel
• 

  0

  rafael.gonzales created one month ago

  This is just a demo project. My real project has the requirement to have dropdowns at the beginning

  Save Cancel
• 

  0

  liangshiwei created one month ago

  Support Team Fullstack Developer

  Hi,

  You can try to override the modal-manager.js

  Put modal-manager.js to wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap

  var abp = abp || {};
  
  $.validator.defaults.ignore = ''; 
  (function ($) {
  
      abp.modals = abp.modals || {};
  
      abp.ModalManager = (function () {
  
          var CallbackList = function () {
              var _callbacks = [];
  
              return {
                  add: function (callback) {
                      _callbacks.push(callback);
                  },
  
                  triggerAll: function (thisObj, argumentList) {
                      for (var i = 0; i < _callbacks.length; i++) {
                          _callbacks[i].apply(thisObj, argumentList);
                      }
                  }
  
              };
          };
  
          return function (options) {
  
              if (typeof options === 'string') {
                  options = {
                      viewUrl: options
                  };
              }
  
              var _options = options;
  
              var _$modalContainer = null;
              var _$modal = null;
              var _$form = null;
  
              var _modalId = 'Abp_Modal_' + (Math.floor((Math.random() * 1000000))) + new Date().getTime();
              var _modalObject = null;
  
              var _publicApi = null;
              var _args = null;
  
              var _onOpenCallbacks = new CallbackList();
              var _onCloseCallbacks = new CallbackList();
              var _onResultCallbacks = new CallbackList();
  
              function _removeContainer() {
                  _$modalContainer && _$modalContainer.remove();
              }
  
              function _createContainer() {
                  _removeContainer();
                  _$modalContainer = $('<div id="' + _modalId + 'Container' + '"></div>');
                  var existsModals = $('[id^="Abp_Modal_"]');
                  if (existsModals.length) {
                      existsModals.last().after(_$modalContainer)
                  } else {
                      $('body').prepend(_$modalContainer);
                  }
                  return _$modalContainer;
              }
  
              function _initAndShowModal() {
                  _$modal = _$modalContainer.find('.modal');
                  _$form = _$modalContainer.find('form');
                  if (_$form.length) {
                      if (_$form.attr('data-ajaxForm') !== 'false') {
                          _$form.abpAjaxForm();
                      }
  
                      if (_$form.attr('data-check-form-on-close') !== 'false') {
                          _$form.needConfirmationOnUnsavedClose(_$modal);
                      }
  
                      _$form.on('abp-ajax-success',
                          function () {
                              _publicApi.setResult.apply(_publicApi, arguments);
                              _$modal.modal('hide');
                          });
                  } else {
                      _$form = null;
                  }
  
                  _$modal.modal({
                      backdrop: 'static'
                  });
  
                  _$modal.on('hidden.bs.modal', function () {
                      _removeContainer();
                      _onCloseCallbacks.triggerAll(_publicApi);
                  });
  
                  _$modal.on('shown.bs.modal', function () {
                      if (!options.focusElement) {
                          //focuses first element if it's a typeable input.
                          var $firstVisibleInput = _$modal.find('input:not([type=hidden]):first');
  
                          _onOpenCallbacks.triggerAll(_publicApi);
  
                          if ($firstVisibleInput.data("date")) {
                              return; //don't pop-up date pickers...
                          }
  
                          var focusableInputs = ["text", "password", "email", "number", "search", "tel", "url"];
                          if (!focusableInputs.includes($firstVisibleInput.prop("type"))) {
                              return;
                          }
  
                          $firstVisibleInput.focus();
                      } else if (typeof options.focusElement === 'function') {
                          var focusElement = options.focusElement();
                          focusElement.focus();
                      } else if (typeof options.focusElement === 'string') {
                          $(options.focusElement).focus();
                      }
                  });
  
                  var modalClass = abp.modals[options.modalClass];
                  if (modalClass) {
                      _modalObject = new modalClass();
                      _modalObject.init && _modalObject.init(_publicApi, _args); //TODO: Remove later
                      _modalObject.initModal && _modalObject.initModal(_publicApi, _args);
                  }
  
                  _$modal.modal('show');
              };
  
              var _open = function (args) {
  
                  _args = args || {};
  
                  var argsWithoutFunc = {};
                  for (var a in _args) {
                      if (_args.hasOwnProperty(a) && typeof _args[a] !== 'function') {
                          argsWithoutFunc[a] = _args[a];
                      }
                  }
  
                  _createContainer(_modalId)
                      .load(options.viewUrl, $.param(argsWithoutFunc), function (response, status, xhr) {
                          if (status === "error") {
                              var responseJSON = xhr.responseJSON ? xhr.responseJSON : JSON.parse(xhr.responseText);
                              abp.ajax.showError(responseJSON.error ? responseJSON.error : abp.ajax.defaultError);
                              return;
                          };
  
                          if (options.scriptUrl) {
                              abp.ResourceLoader.loadScript(options.scriptUrl, function () {
                                  _initAndShowModal();
                              });
                          } else {
                              _initAndShowModal();
                          }
                      });
              };
  
              var _close = function () {
                  if (!_$modal) {
                      return;
                  }
  
                  _$modal.modal('hide');
              };
  
              var _onOpen = function (onOpenCallback) {
                  _onOpenCallbacks.add(onOpenCallback);
              };
  
              var _onClose = function (onCloseCallback) {
                  _onCloseCallbacks.add(onCloseCallback);
              };
  
              var _onResult = function (callback) {
                  _onResultCallbacks.add(callback);
              };
  
              _publicApi = {
                  open: _open,
  
                  reopen: function () {
                      _open(_args);
                  },
  
                  close: _close,
  
                  getModalId: function () {
                      return _modalId;
                  },
  
                  getModal: function () {
                      return _$modal;
                  },
  
                  getForm: function () {
                      return _$form;
                  },
  
                  getArgs: function () {
                      return _args;
                  },
  
                  getOptions: function () {
                      return _options;
                  },
  
                  setResult: function () {
                      _onResultCallbacks.triggerAll(_publicApi, arguments);
                  },
  
                  onOpen: _onOpen,
  
                  onClose: _onClose,
  
                  onResult: _onResult
              };
  
              return _publicApi;
  
          };
      })();
  
  })(jQuery);
  
  

  Save Cancel
• 

  0

  liangshiwei created one month ago

  Support Team Fullstack Developer

  https://github.com/abpframework/abp/issues/19493

  Save Cancel