Issues with VDateInput handling date formats and manual input

[s35241607]

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!

[babu-ch]

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>

[s35241607]

I now use the adapter's date, but it is still in the format of mm/dd/yyyy

[babu-ch]

You need to set the placeholder separately. Also, if you have hide-actions, you can select date by clicking.

:hide-actions="true" placeholder="yyyy-mm-dd"

[s35241607]

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]

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]

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"
  }
}