Inline datepicker closing issue


Topic: Inline datepicker closing issue

Revature Pro priority asked 2 years ago

When dealing with multiple date-pickers, if we have multiple datepickers , and if the first one is in the open state, then clicking on other datepicker, it should close the first datepicker. OnBlur event is not working properly. It is only working when we click outside the control.

And there were also other cases, when we open a date picker and click on the other elements like ck-editor or the mdb-file-upload angular plugin to upload any file. Then the expectation is, the date picker should close. But it's not closing.

  <mdb-date-picker [inline]="true" name="startDate" #startDate [options]='datePickerOptions'
                [(ngModel)]="selectedStartDate">
  </mdb-date-picker>

Arkadiusz Idzikowski staff commented 2 years ago

Please provide some more code on which we will be able to reproduce those problems.


Revature Pro priority commented 2 years ago

This is the date picker options which we are using:

{
  dayLabels: Constants.DATE_PICKER_DAY_LABELS,
  dayLabelsFull: Constants.DATE_PICKER_FULL_DAY_LABELS,
  monthLabels: Constants.DATE_PICKER_MONTH_LABELS,
  monthLabelsFull: Constants.DATE_PICKER_FULL_MONTH_LABELS,
  todayBtnTxt: 'Today',
  clearBtnTxt: 'Clear',
  closeBtnTxt: 'Close',
  dateFormat: this.getLocaleBasedDateFormat().toLowerCase(),
  firstDayOfWeek: 'mo',
  minYear: new Date().getFullYear() - 20,
  maxYear: new Date().getFullYear() + 20,
  disableUntil: { year: new Date().getFullYear(), month: new Date().getMonth() + 1, day: new Date().getDate() - 1 },
  showTodayBtn: true,
  showClearDateBtn: true,
  markCurrentDay: true,
  markWeekends: undefined,
  disableHeaderButtons: false,
  showWeekNumbers: false,
  height: '100px',
  width: '50%',
  selectionTxtFontSize: '15px'
};

Arkadiusz Idzikowski staff commented 2 years ago

We need some example code/app on which we will be able to reproduce the mentioned problems with onBlur event and component closing. We just need to make sure that we use a similar code/approach to yours while debugging the component, it will help us to find the cause of the problems.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue
  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: Desktop
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No