Is it possible to automatically format a date as mm/dd/yyyy when typing into a date picker textfield in Nuxt.js?

In my Nuxt.js with Vuetify app, I successfully implemented a date picker that works well when selecting dates from the calendar. Now, I want to extend this functionality to allow users to type in dates as well. For example, if someone types "12122021", it should automatically format to "12/12/2021" while typing. Here is what I have attempted so far.

Visit link for code

However, I am encountering an undefined error when input field loses focus. Can anyone provide guidance on how to implement this feature successfully?

javascriptvue.jsnuxt.jsvuetify.js

Answer №1

Take a look at this Codesandbox I created, even though I'm not using Nuxt you can still get an idea on how to implement it in your own project: https://codesandbox.io/s/stack-70625482-dhj89?file=/src/components/custom/CustomDatePicker.vue

I developed this unique date picker component for a project of mine. It is highly customizable and already includes various customization options that can be adjusted through the use of props.

The date picker has the ability to display dates in 3 different formats. It utilizes the vue-the-mask library for managing manual date inputs and incorporates additional functions for handling date conversions as a mixin.

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

Irrespective of the chosen display format for end users, the custom date picker will always operate internally with either yyyy-MM-dd or yyyy-MM date formats.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Include jQuery, jQuery UI, and plugins seamlessly to avoid any version conflicts

My goal is to inject my custom code into a webpage using a bookmarklet. This code requires jQuery, jQuery UI, and additional plugins to be included on the page. I'm aware of the noConflict function, but I have concerns about potential conflicts if ot ...

javascriptjquerybookmarklet

Struggling to effectively use XPath to target LI elements that contain specific text

Below is the HTML code for the list item in question: <li class="disabled-result" data-option-array-index="1" style="">4" (0)</li> Here is my attempt at using JavaScript to hide this list item, but it's not working as expected: var xpat ...

javascripthtmlcsswordpressxpath

Simultaneously, two identical messages arrived in the form of push notifications via FCM

I have been working on implementing WebPush notifications using Vue.js and FCM. However, when testing the functionality, I am facing an issue where instead of receiving just one notification from Firebase, TWO IDENTICAL PUSH NOTIFICATIONS are being receive ...

javascriptfirebasevue.jsfirebase-cloud-messaging

Troubleshooting Angular JS loading problems

I'm attempting to implement the Angular-Spinner in my project: Specifically, I want to use it with http.get calls. This is what I have so far: Within controllers: $scope.loading = true; $http.get('js/data/test.json').success(function(resu ...

javascripthtmlangularjs

React Native: Avoiding Infinite Loops in useEffect

I am facing an issue where my app goes into an infinite loop because pointsData is inside the useEffect function. How can I resolve this situation? function useGetPoints() { const [pointsData, setPointsData] = useState<PointTbleType[]>([]); ...

javascriptreactjsreact-nativeredux

Integrating a bokeh chart within a Flask application

Upon accessing localhost:5002/simpleline via Flask, I was hoping for a straightforward bokeh plot. Instead, what I encountered was unexpected: ('', ' ') I have two essential files involved in this process. Firstly, the Python file: f ...

javascriptpythonflaskbokeh

My Next.js application is successfully making Axios API calls to my localhost while running on the server-side

In my Next.js and React application, I am utilizing the axios library. Initially, I was able to successfully call the API from the server using getStaticProps() and render the initial data properly. However, when attempting to fetch more data from the clie ...

javascriptreactjsaxiosnext.js

Querying data from a promise and embedding it in a JSON object in AngularJS

Attempting to retrieve data from a promise within a JSON object for the first time has presented me with a challenging task. The typical approach looks something like this: Service JS app.factory("dataService", ["$http", function ($http) { fu ...

javascriptangularjspromise

Peruse a spreadsheet for relevant information

I am currently facing an issue with a search bar that I implemented to filter through a table. However, for some reason, the filtering function does not seem to work on the tbody section of the table. The content in the tbody is generated dynamically usi ...

javascript

The art of implementing a search feature to remember previous searches in Vue.js

I have two vuejs pages below. On my list page, I have implemented filters for searching by user name and email. The filter is functioning properly, but the issue arises when I type something in the search box, perform a search, click on the edit user link, ...

vue.jsvuex

How come my countdown application functions properly when accessed through the browser via the HTML page, but encounters issues when utilized with an HTTP server?

I have encountered an issue where the app functions correctly when I open the HTML file in my browser, but fails to load the CSS and JavaScript when accessing it through localhost:3000. HTML: <html> <head> <link href="./main.css" rel="st ...

javascriptjqueryhtmlcss

Utilizing PHP Variables in Jquery Ajax Success Response

I have a webpage that displays a list of routes. When a user clicks on a route, an AJAX request is sent to save the selected route in the database. On the same page, in a different tab, I am running a query to fetch related information about the selected ...

javascriptphpjquery

Instructions on keeping a numerical counter at its current value for all site visitors

Recently, I integrated a number counter into my website. However, I am facing an issue where the count resets to zero whenever a new visitor accesses the site. I'd like the count to remain persistent and update based on the previous count. For instanc ...

javascripthtml

What is the best way to eliminate specific duplicate characters from a string using JavaScript?

I have a project involving managing email responses, where the reply function includes pre-written content like Re: ${Subject of the email} The issue I'm facing is that after the 2nd reply, there is a repeated Re: , so I created a function to remove ...

javascript

Is there a simpler method to access the source element for an event?

I'm just starting to learn JavaScript and jQuery, and right now I have the following code in my HTML: <a id="tog_table0" href="javascript:toggle_table('#tog_table0', '#hideable_table0');">show</a> After that, I hav ...

javascriptjqueryhtmleventsdom

What is the best way to send a variable or query to a Python script from PHP using an Ajax request?

A Python script I have takes parameters or a SQL query from the PHP file, which I am running by calling an Ajax function. The PHP and Ajax call code has been added here. A variable "action" is created to check different cases. While I can execute action = ...

javascriptpythonphpjqueryajax

Adjust the JavaScript variable upon pressing the "c" key

I'm trying to figure out how I can toggle the value of variable x in JavaScript when the key "c" is pressed. Specifically, I want x to change from 0 to 1 when "c" is pressed and revert back to 0 when it's released. I have already defined and name ...

javascripthtmlcssvariablesfrontend

Error encountered: Unknown token '<' and Loading chunk 16 unsuccessful

Having a react app created with create-react-app, I encounter errors whenever I deploy to netlify and there is a new build. Uncaught SyntaxError: Unexpected token '<' 16.0fcd6807.chunk.js:1 Immediately after this error, another one pops up: ...

javascriptreactjscreate-react-app

Tasks should be defined prior to being referenced in order to avoid any issues

Utilizing multiple files with gulp@4, the main gulpfile.js includes all other files within the ./tasks/ directory. We have implemented the npm gulp-hub package to incorporate multiple gulpfiles within the ./tasks/ directory. However, upon calling the tasks ...

javascriptnode.jsnpmgulp

How do I resolve the issue of PHP sendmail form sending empty emails and fix the JavaScript?

I spent the whole day dealing with sendmail.php. Initially, I had an issue with not receiving emails, which I managed to fix. However, after that, I started receiving blank emails. It wasn't a problem with my PHP or HTML code, but rather with the Java ...

javascriptphpsendmail