如何使用V模型和MOMM JS提取动态数据

发布于 2025-01-19 14:07:04 字数 556 浏览 0 评论 0原文

我已经可以使用 v-model 从 api 中提取数据，但这就是我查看日期 2022-04-23T13:39:00+03:00 但我希望它以这种方式出现 < code>2022-04-23 13:39

这是我的 html 代码

<Field
  class="form-control"
  type="text"
  v-model="date"
  name="date"
  :placeholder="$t('form.label.date')"
/>

这是我的 ts 代码

  data() {
    date:"",
  }
  setup() {
    const dateFormat = (date) => {
      return moment(date).format("YYYY-MM-DD HH:mm");
    };
  }

原文

I can already pull the data from api with v-model, but this is how i see the date 2022-04-23T13:39:00+03:00 but I want it to come this way 2022-04-23 13:39

Here is my html code

<Field
  class="form-control"
  type="text"
  v-model="date"
  name="date"
  :placeholder="$t('form.label.date')"
/>

Here is my ts code

  data() {
    date:"",
  }
  setup() {
    const dateFormat = (date) => {
      return moment(date).format("YYYY-MM-DD HH:mm");
    };
  }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

╰ゝ天使的微笑 2025-01-26 14:07:04

如果您仅呈现值并且不需要设置双向绑定或反应性，则可以在将格式化值传递到模板之前解析格式。

您还可以将格式化程序函数传递给模板，该函数将根据您的喜好呈现格式。

虽然有多种格式化日期的选项。为了避免添加额外的依赖项，我在示例中使用 Intl.DateTimeFormat。这有点棘手，因为该格式不符合任何国际标准（或者是，只是不知道是哪一个）。我还成功使用了 date-fns ，但正如评论中提到的，你不应该使用片刻。 Moment 的构建方式不允许在打包过程中摇动未使用的部件，因此会导致膨胀。

const formatter = (dateStr) => {
  const date = new Date(dateStr)
  if (isNaN(date)) return "-- invalid date --";

  // fr-CA for YYYY-MM-DD + en-GB for 24hour hh:mm:ss
  return new Intl.DateTimeFormat('fr-CA', {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    timeZone: 'UTC'
  }).format(date) + " " + new Intl.DateTimeFormat('en-GB', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    timeZone: 'UTC'
  }).format(date)
}

Vue.createApp({
  setup() {
    const date = Vue.ref("2022-04-23T13:39:00+03:00");

    // using ref
    const dateFormatted = formatter(date.value);

    return {
      date, // date string ref, to allow reactivity
      dateFormatted, // pass non-reactive value to display
      formatter // pass formatter function if reactive changes are needed
    }
  }
}).mount("#app");

input {
  width: 400px;
  padding: 6px;
  margin-top: 2px;
}

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<div id="app">
  <p>Date (v-model)<br/><input v-model="date" /></p>
  <p>Formatted with Intl (read-only)<br/> <input :value="dateFormatted" disabled/></p>
  <p>Reactive formatted with Intl (read-only)<br/> <input :value="formatter(date)" disabled /></p>
</div>

If you are only rendering the value and don't need to setup two-way binding or reactivity, you can just resolve the formatting before passing the formatted value to the template.

You can also pass a formatter function to the template that will render the formatting to you liking.

While there are several options for formatting dates. To avoid adding additional dependencies, I'm using Intl.DateTimeFormat in the example. It's a little hacky, since the format is not in any international standard (or it is, and just don't know which one). I've also used date-fns with success, but as mentioned in the comments, you should not be using moment. Moment is built in a way that doesn't allow tree-shaking unused parts during packaging, so leads to bloat.

const formatter = (dateStr) => {
  const date = new Date(dateStr)
  if (isNaN(date)) return "-- invalid date --";

  // fr-CA for YYYY-MM-DD + en-GB for 24hour hh:mm:ss
  return new Intl.DateTimeFormat('fr-CA', {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
    timeZone: 'UTC'
  }).format(date) + " " + new Intl.DateTimeFormat('en-GB', {
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    timeZone: 'UTC'
  }).format(date)
}

Vue.createApp({
  setup() {
    const date = Vue.ref("2022-04-23T13:39:00+03:00");

    // using ref
    const dateFormatted = formatter(date.value);

    return {
      date, // date string ref, to allow reactivity
      dateFormatted, // pass non-reactive value to display
      formatter // pass formatter function if reactive changes are needed
    }
  }
}).mount("#app");

input {
  width: 400px;
  padding: 6px;
  margin-top: 2px;
}

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
<div id="app">
  <p>Date (v-model)<br/><input v-model="date" /></p>
  <p>Formatted with Intl (read-only)<br/> <input :value="dateFormatted" disabled/></p>
  <p>Reactive formatted with Intl (read-only)<br/> <input :value="formatter(date)" disabled /></p>
</div>

回复收藏 0 原文

~没有更多了~