how to format text entered in a textbox into a Date value

Question

I am not very experienced in Angular. the version that we are using is Angular 10. There is a textbox , the user is expected to enter a date value ex. 10202020. This value has to be formatted into 10/20/2020 and immediately shown in the textbox. How can i do this? please let me know .

Answer 1

Not exactly a perfect answer but have you tried using a date picker instead. When using Angular I don't know why you would want to allow free-text date entry that will then be formatted into a date.

Not only is this incredibly hard to achieve, especially since people could technically enter a date in any format; e.g. 20-Oct-2020, 20th October 2020, 2020-10-20, 2020/10/20, 2020-20-10 etc etc etc.

Now all of these could technically represent the 20th of October, 2020; but they are all written in very different ways making formatting into a date near impossible or at the very least extremely complicated.

I would suggest that unless you absolutely need it to be a textbox that formats the date, to instead look into perhaps using Angular Material and using the Datepicker from them.

Link is here: https://material.angular.io/components/datepicker/api