如何在 nuxtjs 的日期选择器文本字段中输入 mm/dd/yyyy 格式的日期?

How to have date in mm/dd/yyyy format on typing in date picker textfield in nuxtjs?

我使用 vuetify 应用程序在 nuxtjs 中实现了一个日期选择器。从日历中选择任何日期时,它工作正常。我还需要在输入时启用相同的功能。如果我像 12122021 这样输入,它应该在输入时被格式化为 12/12/2021。这是我到目前为止尝试过的方法。

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

当我失去焦点时出现未定义的错误。如何实现功能?

检查我制作的这个codesandbox,我没有使用Nuxt,但你可以自己想出一个想法在你的项目中实现它:https://codesandbox.io/s/stack-70724804-sryk8?file=/src/components/custom/CustomDatePicker.vue

这是我为我的一个项目制作的自定义日期选择器组件。您可以根据需要对其进行自定义,但该组件已经带有多个自定义选项,您可以 enable/modify 到 props

日期选择器可以显示 3 种格式的日期。它使用 vue-the-mask 库来控制手动日期输入和一些辅助函数来控制我作为混合导入的日期转换。

  1. dd/MM/yyyy
  2. MM/dd/yyyy(使用“month-first”属性)
  3. yyyy/MM(使用“月份”属性)

无论您选择向最终用户显示的格式如何,自定义日期选择器将始终在内部使用 yyyy-MM-ddyyyy-MM 日期格式