Show the current date in the "YYYY-MM-DD" format using the v-calendar component in VueJS

          <DatePicker
            v-model="date"
            is-expanded
            is24hr
            :attributes="attrs"
            :model-config="{
              type: 'string',
              mask: 'YYYY-MM-DD HH:mm',
            }"
            mode="date"
          >
          </DatePicker>

I attempted to include the "model-config" attribute in my code, but despite having the correct format in the date variable ("YYYY-MM-DD HH:mm"), it displayed on the screen as "MM-DD-YYYY".

The display on the screen is incorrect: "12-20-2021" => Desired format: "2021-12-20" The data in the date variable is correct: "2021-12-20 14:20"

This discrepancy is confusing. How can I modify the display format of this datetime? Thank you all for your help. I am using version 2 of v-calendar.

javascriptvue.jsdatetimefrontendvcalendar

Answer №1

            <DatePicker
                v-model="date"
                is-expanded
                is24hr
                :attributes="attrs"
                :model-config="{
                  type: 'string',
                  mask: 'YYYY-MM-DD HH:mm',
                }"
                :masks="{ L: 'YYYY-MM-DD' }"
                mode="date"
              >
              </DatePicker>

To resolve the issue, I added masks as shown below: 

:masks="{ L: 'YYYY-MM-DD' }"
and it resolved the problem successfully.

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

Don't use onchange() in place of keyup()

Issue: I am facing a problem where the keyup() function is calling ajax multiple times with each key press, and I have tried using onChange() but it did not work as expected. Here is the code to check if an email already exists in the database: $.noConf ...

javascriptjqueryajax

The interplay between React Bootstrap responsive design, React hooks, and Alan AI is not producing the desired results

As a newcomer to react hooks, I've only been using them for a few weeks now. I'm currently working with my react card component, which ideally should be divided into 3 columns in one row. However, they are stacking on top of each other vertically ...

javascriptreactjsbootstrap-4react-hooksreactstrap

$injector.modulerr problem

After spending a considerable amount of time analyzing every line of code, I can't seem to pinpoint any errors. Here is what I have: HTML: <body ng-app='myApp'> <div class="wrapper"> <nav> <ul ng-controller="pat ...

javascriptangularjsfrontendngroute

"Using Three.js GLTF, switch the material of one object to match the material of

Recently, I encountered an interesting challenge with a scene imported from a glb-file using GLTFLoader. The scene features various objects of guys in different colors, each with its own material (RedMat, BlueMat, GreenMat, etc) created in Blender. Interes ...

javascriptthree.jsblendergltf

Fascinating SQL query involving date ranges and timestamp in a join操作

Grateful for any assistance in resolving this issue, my SQL version is 17. My table is structured as follows: select * from ContractDim | UserID | ContractID | BusinessLine | StartDate | EndDate | 1 111 AAA 01/06/20 ...

mysqlsql-serverdatetimejointimestamp

The height of iScroll4 becomes incorrect following the submission of an AJAX form. The height reverts back to its original value before

I have integrated a form within an iScroll4 scroller. The form is an ajax form created using the Gravity Forms plugin in WordPress. After submitting the form, I noticed that the height of the iScroll remains the same as it was generated on page load. This ...

javascriptajaxiscroll4

In Typescript, it is not possible to use generics as a function parameter in a

Looking for a solution regarding passing the union of two specific samples of generics to a function. The function in question is as follows: function myCommonFunc<T>({ data, render, }: { data: T; render: (data: T) => number; }) { return ...

javascripttypescript

Is there a way to simultaneously modify several data variables within a Chart.js label?

I'm currently working on dynamically updating a line chart with two data entry points using the variable name "data." Take a look at the code snippet below: var lion = new Chart(ctx2, { type: "line", data: { labels: ["Apr", "May", ...

javascriptchart.js

Comparing textboxes on separate web pages to validate forms using AJAX on the server side

I am exploring the creation of a straightforward server-side form validation system using ajax. The objective is to verify if the data inputted by the user matches the data stored on another page. For instance, if a user enters the number 10 in a textbox ...

javascriptjqueryajax

A guide on setting up dark mode with @nuxt/tailwind and typography

I am in the process of creating a blog with the help of nuxt.js/content and I am looking to implement dark mode using the color mode plugin. Could you provide guidance on how to enable dark mode for the articles? My attempt to use dark: prose-dark did no ...

vue.jsnuxt.jsnuxt-content

Encountering an issue in a Vue component: "(Promise/async): "TypeError: Object(...) is not a function"

After realizing that Vue CLI comes with a plethora of node_modules, I decided to create a Vue component that can run a shell command (such as ls -l). I integrated Electron using vue add electron-builder. For VueRouter, I have set mode: process.env.IS_EL ...

javascriptvue.js

Integrating a feature for displaying No Results Found

I am struggling to modify a script for auto-completing search fields. My goal is to include a "No Results Found" option along with a hyperlink when no matching results are found. I'm having difficulty figuring out how to add an else statement to displ ...

javascriptjqueryhtml

Testing Jasmine asynchronously with promise functionality

During my Jasmine testing with angular promises, a question arose regarding timing. I came across a post at Unit-test promise-based code in Angular, but I still need some clarification on how it all functions. The concern is that since the then method is ...

javascriptangularjsunit-testingjasmine

Exploring the Power of Destructuring Results in React.js with Apollo

I have been exploring the Apollo client for my project, and I encountered an issue with two of my query functions. The first query, which retrieves a list of users, is working perfectly fine. However, I am struggling to understand why my second simple quer ...

javascriptreactjsapollo-client

Execution failure of the passport.authenticate callback

I am currently working on developing a backend using nodejs v8.7.0. For authentication, I am implementing passport and local passport. Previously, everything was running smoothly, but now I am facing an issue. Here is my code: My strategy: var passport = ...

javascriptnode.jsexpresspassport.js

Sequelize is unable to retrieve a table from the database

I am configuring Sequelize in order to streamline the manipulation of an MSSQL database. My attempt to define a table called 'Stock' has resulted in unexpected behavior when trying to query it. Below is the code snippet I used for defining the t ...

javascriptsql-servernode.jssequelize.js

Unable to modify the variable within angular.js

I have been working on developing an Ionic application with angular.js and I am almost done, but I have encountered a minor issue. Inside my templates/menu.html file, I have the following code: <ion-item nav-clear menu-close ng-click="filterByPeriod(w ...

javascriptangularjscordovaangularjs-scopeionic-framework

The header remains fixed while scrolling - troubleshooting the If Else statement

Check out this cool pen... http://codepen.io/jareko999/pen/bZXbWP The jQuery code adds a .fixed class to the #header when it reaches or goes below 0, but doesn't remove it when back above 0. I'm new to JS and struggling to understand what' ...

javascriptjquerycsspositionfixed

Can you explain what is meant by an "out of DOM" element?

I'm feeling a bit lost when it comes to DOM nodes and all the terminology surrounding them. Initially, I believed that the DOM consisted solely of what I could see in my inspector - nothing more, nothing less. However, I've come across functions ...

javascripthtmldom

Is there a way to use node.js to retrieve a video in mp4 format?

My goal is to allow users to download a video from my AWS S3 bucket in MP4 format: app.get("/download_video", function(req,res) { filename = "s3.xxx.amazon.com/bucketname/folder/video_example.mp4"; // I'm unsure about the next steps }); Whil ...

javascriptnode.jsexpress