Update wj-input-date to accommodate multiple formats of user-entered dates

Posted by: eh1160 on 15 April 2019, 7:04 am EST

  • Posted 15 April 2019, 7:04 am EST

    By default, the wj-input-date component displays and accepts entry in the 'd' format (i.e. "4/15/2019").

    But when in that format, the component will not accept if the user enters a date with a slightly different format, like 4-15-2019 or 4.15.2019. I'm wondering if we can add code to accommodate other user-entered formats that don't exactly match the declared format.

    See my stackblitz for some background: https://stackblitz.com/edit/angular-ph393z
  • Replied 15 April 2019, 11:32 pm EST

    Hi,

    By design, InputDate control only accepts the date in the specified format and no other. Alternatively, you could set the mask for InputDate. This way, there will be only one format in which the user can enter the date. Please refer to the sample below:
    https://stackblitz.com/edit/ckkyne-ork1yf

    If you still require that the user can enter the date in any format, you can handle the keyup event to parse the date using javascript and then set it to the control. Please refer to the sample demonstrating the same:
    https://stackblitz.com/edit/ckkyne-jwkikg

    Regards
  • Replied 22 April 2019, 3:53 am EST

    The solution seems interesting, but it breaks the ability to select a date using the mouse once the user has entered a date using the keyboard.

    1. Load the component/page
    2. Enter "5/4/2019" and press enter. The component successfully accepts the entered date.
    3. Using your mouse, select "5/1/2019". The component displays "5/1/2019" (so far so good)
    4. Click outside the component. The component reverts back to "5/4/2019"
  • Marked as Answer

    Replied 22 April 2019, 9:18 pm EST

    Hello,

    Please refer to the sample. Let me know if you have additional questions.

    https://stackblitz.com/edit/ckkyne-jz4svy
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels