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

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

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

• 

  eh1160

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  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

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 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

• 

  eh1160

  • Post Options:
  • Link
    Copy

  Posted 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”
• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 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