1

I implemented a date picker in a nuxtjs with the vuetify app. It's working fine when selecting any date from the calendar. I need to enable the same functionality while typing also. If I am typing like 12122021, it should be formatted to 12/12/2021 on typing itself. Here is what I have tried so far.

https://stackblitz.com/edit/github-fms71e?file=pages/index.vue

I am getting an undefined error when I lose focus. How can I implement the functionality?

  • I'm not exactly familiar with Nuxt or Vue, but you should be able to simply attach a function to the onChange event of your input field. When doing so, it will trigger a function and then properly validate and format the results using something like Regex. Here's a post to show you the Regex. There may be other plugins like day.js or moment.js that can help as well. But hopefully this makes sense! https://stackoverflow.com/questions/15491894/regex-to-validate-date-formats-dd-mm-yyyy-dd-mm-yyyy-dd-mm-yyyy-dd-mmm-yyyy – DOZBORNE Jan 15 '22 at 19:51
  • Thanks for this but I am not able to figure it out in coding :( –  Jan 15 '22 at 20:50
  • Please do not recommend Moment.js, it's deprecated. – kissu Jan 15 '22 at 20:52
  • @kissu can you show me the right way? –  Jan 15 '22 at 21:12
  • I use a couple js funcs to format dates, I have them in a custom lib that I add as a mixin. Also made a custom v-date-picker component to avoid configuring it everytime. I can made an example codesandbox for you. – cmfc31 Jan 17 '22 at 17:13

1 Answers1

0

Check this codesandbox I made, I'm not using Nuxt but you can make yourself an idea to implement it on your project: https://codesandbox.io/s/stack-70724804-sryk8?file=/src/components/custom/CustomDatePicker.vue

This is a custom date picker component that I made for one of my projects. You can customize it to your needs but the component already come with multiple customization options that you can enable/modify through props.

The date picker can display dates in 3 formats. It use vue-the-mask library to control manual date inputs and some auxiliary functions to control date convertions that I import as a mixin.

  1. dd/MM/yyyy
  2. MM/dd/yyyy (Using "month-first" prop)
  3. yyyy/MM (using "month" prop)

Regardless of the format you choose to display to the end user, the custom date picker will always work internally with yyyy-MM-dd or yyyy-MM date format

cmfc31
  • 1,385
  • 2
  • 8
  • 9
  • Wow! Thank you so much, brother. Sorry for the late reply but you saved my life <3 –  Feb 02 '22 at 18:55