Issues with VDateInput handling date formats and manual input #21036

s35241607 · 2025-02-28T02:45:00Z

s35241607
Feb 28, 2025

I'm facing a few challenges with the VDateInput component and would appreciate any guidance.

String format issue:
When I pass a date in the format 2024-12-12 (as a string), the component doesn't seem to parse it correctly. Is there a specific format I should use when binding a string to this input?

Custom date format:
How can I customize the displayed date format in VDateInput to yyyy-MM-dd? I tried setting the format prop, but it doesn’t seem to work as expected. Could someone provide the correct method to achieve this?

Manual input without Enter:
Is there a way to make the date update as soon as the user types, without having to press Enter? Currently, the date only updates after hitting Enter, and I’d like it to trigger an update immediately while typing.

I would greatly appreciate any help or insights regarding these issues!

Thanks in advance!

Answered by babu-ch

Jun 26, 2025

The latest version adds the displayFormat property, making it even easier.
https://play.vuetifyjs.com/#eNqVU2Fr2zAQ/SuHKNhmtrWsjI2QFAZj3/KpYzCmQYUlxxqSbKRztmD83ydZTsloKau+SLp37/T87vxjIt419DRKVO25/uXJligz9A5hgsZJjvJbwmCG1vUGsjU3Y5ZZ+WdJbXrrEVYA9v8S84lZAOykkVtYzgBCtnzU+DUFM62OHWZlwiiN+7zcRCjzSAJoe2c4+qtIXOewDgchtks67O/g4WaKx/oo8cuo9XfJXV7M1c10j07ZY34BD73FLi/gDWyKeuDiHrnD/F0J2dvsufzPYc+LZ1IfLnqS7JnZuWCWlIu5n4ahDt4EZ3e+cWpA8BLHATS3xz0j6Bm5i6yL7062q9eMBB4j0WlYTY5S9hBScit/wyqI2R1NpUOhcEFpBh2gpezuVEVSpewwYtIZwEZ2vRbSBQHRv8qYSoj4VMRPlemF1AGLzEu0U0JWvEEVhKxtVD6UOlepL2up2IpEof//PjWGvv797RMBL08AfeUEPM1/YQIeP3lHr/wnc0lu6/f15kOYhtv6Y73ZkLLl2ss0HFd/Xgr//AszHiwm

View full answer

babu-ch · 2025-03-06T12:05:38Z

babu-ch
Mar 6, 2025

You can customize the format by using an adapter in the createVuetify options.

  date: {
    adapter: LuxonAdapter,
    formats: {
      keyboardDate: 'yyyy-MM-dd'
    },
  },

<script setup>
import {ref, watch} from "vue"
import { useDate } from 'vuetify'

const date = useDate()

const model = ref(date.date("2024-01-01"))

watch(model, () => { console.log(model.value) })
</script>

<template>
  <v-date-input v-model="model" :hide-actions="true" placeholder="yyyy-mm-dd" />
</template>

9 replies

s35241607 Mar 15, 2025
Author

An error occurred.

index.esm.js:36  Uncaught (in promise) TypeError: value.toJSDate is not a function
    at LuxonUtils.toJsDate (index.esm.js:36:26)
    at VDateInput.tsx:70:91
    at ComputedRefImpl.get [as fn] (proxiedModel.ts:53:14)
    at refreshComputed (reactivity.esm-bundler.js:380:28)
    at get value (reactivity.esm-bundler.js:1631:5)
    at ComputedRefImpl.fn (VDateInput.tsx:78:39)
    at refreshComputed (reactivity.esm-bundler.js:380:28)
    at get value (reactivity.esm-bundler.js:1631:5)
    at Proxy.<anonymous> (VDateInput.tsx:142:32)
    at renderComponentRoot (runtime-core.esm-bundler.js:6502:16)

babu-ch Mar 15, 2025

Maybe there is a bug.
Can you make a reproduction like this?

https://play.vuetifyjs.com/#eNqNU02P2jAQ/SujXGBVEne7QpUQVFTqdW9VL00PJh7Arb9kO3QR4r937JgUtl2JHCxn3sx7M8/291MVfMcOPUa5PTY/Q7WopHbWRzhB55FH/DZgcIattxomJXfSmpLIBXcRfYHXgmpqaZnqX6yhrNbgS87rrAkRSjmsbumnp9YAxD1qXEDeAwjc8l7Fr0NwouRuHyezhJ3zmpTG5NJFBgC21msew4gC/MLjxnIvvuSiyZG++vm5FmJgvHCm9fzQmmqWjfnsXEMdkyvL0HnpIgSMvQPFzW7VVjG01adUNnrWB0wK/3Hrb5LHbYHbivC2SiZB8ScNReYUnim1ckG0Fagy+QqIYpoym7RMHyhryYYGqR36iaidIig3tzzUw6EY10egeId7qwR6miD7oDX50FZwqLMGhUctiu6lwJp3UVIXwIhxya7oyahhrlpzRxfIGjIru94WgDwaz6EMvKDNPkYXFox1wlAZycmDbwxGZpxma0pjvjdRaqyF1eunZt48PjEhQ7yONxh0vfH2d0BPLG1VDjPrJOPv0CqZJPGxeZwPEiVWK74JSeMfbkaCB/S1R0NGor93pldlN3O9wt6e7faN3SN9U0CiH5r37B3xX5Hey3WhmBPFppdKsJ2yG64GoNEy1aQ7TY+J3hLdkPPM9Erl5ccfmdmGog==

s35241607 Mar 15, 2025
Author

This example works correctly when displayed on a web page.

However, in my project, I get the following error:

Uncaught (in promise) TypeError: date.setLocale is not a function
    at LuxonUtils.formatByString (index.esm.js:176:25)
    at LuxonUtils.format (index.esm.js:173:25)
    at ComputedRefImpl.fn (VDateInput.tsx:95:53)
    at refreshComputed (reactivity.esm-bundler.js:380:28)
    at get value (reactivity.esm-bundler.js:1631:5)
    at Proxy.<anonymous> (VDateInput.tsx:142:32)
    at renderComponentRoot (runtime-core.esm-bundler.js:6502:16)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5319:46)
    at ReactiveEffect.run (reactivity.esm-bundler.js:225:19)
    at setupRenderEffect (runtime-core.esm-bundler.js:5454:5)

Here is my package.json:

{
  "name": "materio-vuetify-vuejs-admin-template-free",
  "version": "2.3.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite --open",
    "build": "vite build",
    "preview": "vite preview --port 5050",
    "typecheck": "vue-tsc --noEmit",
    "lint": "eslint . -c .eslintrc.cjs --fix --ext .ts,.js,.cjs,.vue,.tsx,.jsx",
    "build:icons": "tsx src/plugins/iconify/build-icons.ts",
    "postinstall": "npm run build:icons"
  },
  "dependencies": {
    "@date-io/luxon": "^3.2.0",
    "@faker-js/faker": "^9.5.0",
    "@floating-ui/dom": "1.6.8",
    "@iconify-json/bxl": "^1.1.10",
    "@vueuse/core": "^10.11.1",
    "@vueuse/math": "^10.11.1",
    "apexcharts": "^3.54.1",
    "luxon": "^3.5.0",
    "pinia": "^2.3.0",
    "prismjs": "^1.29.0",
    "roboto-fontface": "^0.10.0",
    "vue": "^3.5.13",
    "vue-flatpickr-component": "11.0.5",
    "vue-prism-component": "^2.0.0",
    "vue-router": "^4.5.0",
    "vue3-apexcharts": "1.5.2",
    "vue3-perfect-scrollbar": "^2.0.0",
    "vuedraggable": "^2.24.3",
    "vuetify": "3.7.14",
    "webfontloader": "^1.6.28"
  },
  "devDependencies": {
    "@antfu/eslint-config-vue": "^0.43.1",
    "@antfu/utils": "^0.7.10",
    "@iconify-json/ri": "^1.2.1",
    "@iconify/tools": "^4.0.7",
    "@iconify/utils": "^2.1.13",
    "@iconify/vue": "4.1.2",
    "@types/node": "^22.10.2",
    "@types/webfontloader": "^1.6.35",
    "@typescript-eslint/eslint-plugin": "^7.18.0",
    "@typescript-eslint/parser": "^7.18.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vitejs/plugin-vue-jsx": "^4.1.1",
    "eslint": "^8.57.1",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-case-police": "^0.6.1",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-promise": "^6.6.0",
    "eslint-plugin-regex": "^1.10.0",
    "eslint-plugin-regexp": "^2.6.0",
    "eslint-plugin-sonarjs": "^0.24.0",
    "eslint-plugin-unicorn": "^51.0.1",
    "eslint-plugin-vue": "^9.32.0",
    "postcss-html": "^1.7.0",
    "postcss-scss": "^4.0.9",
    "sass": "~1.76.0",
    "stylelint": "16.15.0",
    "stylelint-codeguide": "2.0.0",
    "stylelint-config-idiomatic-order": "10.0.0",
    "stylelint-config-standard-scss": "13.1.0",
    "stylelint-use-logical-spec": "5.0.1",
    "tsx": "^4.19.2",
    "type-fest": "^4.30.1",
    "typescript": "^5.7.2",
    "unplugin-auto-import": "^0.18.6",
    "unplugin-vue-components": "^0.27.5",
    "vite": "^5.4.11",
    "vite-plugin-vue-layouts": "^0.11.0",
    "vite-plugin-vuetify": "2.0.3",
    "vite-svg-loader": "^5.1.0",
    "vue-tsc": "^2.1.10"
  },
  "resolutions": {
    "postcss": "^8",
    "stylelint-order": "6.0.3",
    "@types/video.js": "^7"
  },
  "overrides": {
    "postcss": "^8",
    "stylelint-order": "6.0.3",
    "@types/video.js": "^7"
  }
}

babu-ch Jun 26, 2025

The latest version adds the displayFormat property, making it even easier.
https://play.vuetifyjs.com/#eNqVU2Fr2zAQ/SuHKNhmtrWsjI2QFAZj3/KpYzCmQYUlxxqSbKRztmD83ydZTsloKau+SLp37/T87vxjIt419DRKVO25/uXJligz9A5hgsZJjvJbwmCG1vUGsjU3Y5ZZ+WdJbXrrEVYA9v8S84lZAOykkVtYzgBCtnzU+DUFM62OHWZlwiiN+7zcRCjzSAJoe2c4+qtIXOewDgchtks67O/g4WaKx/oo8cuo9XfJXV7M1c10j07ZY34BD73FLi/gDWyKeuDiHrnD/F0J2dvsufzPYc+LZ1IfLnqS7JnZuWCWlIu5n4ahDt4EZ3e+cWpA8BLHATS3xz0j6Bm5i6yL7062q9eMBB4j0WlYTY5S9hBScit/wyqI2R1NpUOhcEFpBh2gpezuVEVSpewwYtIZwEZ2vRbSBQHRv8qYSoj4VMRPlemF1AGLzEu0U0JWvEEVhKxtVD6UOlepL2up2IpEof//PjWGvv797RMBL08AfeUEPM1/YQIeP3lHr/wnc0lu6/f15kOYhtv6Y73ZkLLl2ss0HFd/Xgr//AszHiwm

Answer selected by s35241607

s35241607 Jun 27, 2025
Author

That's awesome 🎉

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Issues with VDateInput handling date formats and manual input #21036

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 9 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Issues with VDateInput handling date formats and manual input #21036

Uh oh!

s35241607 Feb 28, 2025

Replies: 1 comment · 9 replies

Uh oh!

Uh oh!

babu-ch Mar 6, 2025

Uh oh!

s35241607 Mar 15, 2025 Author

Uh oh!

babu-ch Mar 15, 2025

Uh oh!

Uh oh!

s35241607 Mar 15, 2025 Author

Uh oh!

babu-ch Jun 26, 2025

Uh oh!

s35241607 Jun 27, 2025 Author

s35241607
Feb 28, 2025

Replies: 1 comment 9 replies

babu-ch
Mar 6, 2025

s35241607 Mar 15, 2025
Author

s35241607 Mar 15, 2025
Author

s35241607 Jun 27, 2025
Author