Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: A set of questions about using new Date Picker plugin

p_manageroksoft-ru pro asked 4 years ago


Here's some issues i faced using new plugin. Can you help me to solve it?

1) How to disable typing non formated text in a datepicker textbox?

2) How to remove calendar icon and enable clicking on a whole texbox area?

3) How to disable dates that less min and more than max date settings? (Even don't show the years if it's not in a range)

4) How to show weekdaysShort in an .picker__weekday-display span? How property showWeekdaysFull works?

5) How to hide label SELECT DATE in a .picker__title-display span or replace(it's better) it with a selected Year, like it was in a previous version of datepicker?

Example: https://mdbootstrap.com/snippets/jquery/p_manageroksoft-ru/2370964

Thanks in advance!



Yes, i understand it, but how to make value visible by default?


Krzysztof Wilk staff commented 4 years ago

For now, you can't. That's a bug that we'll try to fix as soon as possible :)



Thank you for reply!

6) If I set input type date and set default value it won't show, why? How to fix it?

Snippet: https://mdbootstrap.com/snippets/jquery/p_manageroksoft-ru/2370964


Krzysztof Wilk staff commented 4 years ago

Hi!

It works, the default value is set, but firstly label is shown. When you click on it your default value will show :)

Best regards


Krzysztof Wilk staff answered 4 years ago


Hi!

1) You can use some javascript or just plugin to validate your date input. The easiest way is something like this

$('#Birthday').on('change', function() {
  if ($('#Birthday').val() !== 'someRegexpCheck') {
    $('#Birthday').val('Choose proper date')
  }
});

2) You can't

3) Remove

    min: new Date(1910,3,20), //[1910, 3, 20],
    max: new Date(2020,8,5), //[2022, 7, 14],

in JS Object

4) You can't / It's just property that contains array with full names of weekdays, that date picker mechanism applies to HTML

5) Try to use this:

$('.fas.fa-calendar.input-prefix').on('click', () => {
  setTimeout(() => {
    const el = document.querySelector('.picker__title-display');
    el.textContent = $('#Birthday').val();
  }, 100);
});

Best regards



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: PC
  • Browser: Google Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes