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: Datepicker Validation and HTML5 Input Field Type for Date?

aking pro asked 3 years ago


Expected behavior: Datepicker shouldn't allow any input except numbers in date format - same as HTML5 standarrd.

HTML5 "date" field type should be compatible with MDB input fields.

Actual behavior: MDB Datepicker uses "text" field type and therefore accepts anything as input including alphabetic characters. Requires validation to be implemented manually by end use, meanwhile HTML5 already provides spec for this (see below).

HTML5 date type field is broken in MDB, placeholder text overlaps with HTML5 date format text.

Resources (screenshots, code snippets etc.): The text validation can be demonstrated using the MDB Docs page for Datepicker.

The HTML5 date field type issues can be seen here:https://mdbootstrap.com/snippets/standard/jmarkham/3123060


UNNdev priority answered 3 years ago


It would be nice if the behavior whether to allow custom input or not would be configurable.


Dawid Wajszczuk staff commented 3 years ago

I have already added this to our ideas list https://mdbootstrap.com/support/standard/datepicker-should-have-an-option-to-only-allow-picking-dates-without-free-text-input/. Keep coding :)


Dawid Wajszczuk staff answered 3 years ago


Hi,

Datepicker needs to have input type text due to possibility of setting up date format as a string. Here is the link https://mdbootstrap.com/docs/standard/forms/datepicker/#section-formats.

As for issues with the HTML5 date field type, we will try to fix it as soon as possible.

Keep coding,
Dawid



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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.7.1
  • Device: Laptop
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: Yes