力量日期选择器以按时间顺序显示

发布于 2025-02-03 04:53:56 字数 478 浏览 6 评论 0原文

我有vuetify日期范围选择器

现在它显示

我想 force 始终首先在较小的日期顺序中显示我的模型。

前任。 5/1/2022-5/14/2022

原文

分享到QQ

分享到微博

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

发布评论

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

兔小萌 2025-02-10 04:53:56

您可以使用计算的道具对日期进行排序/格式化，并将结果绑定到文本字段的value：

You can use a computed prop to sort/format the dates, and bind the result to the text field's value:

                         ????
<v-text-field :value="datesText" readonly />
<v-date-picker v-model="dates" range />

export default {
  data: () => ({
    dates: [/* date strings */],
  }),
  computed: {
       ????
    datesText() {
      const dateFormatter = new Intl.DateTimeFormat('en-US')
      return this.dates
        .sort((a, b) => new Date(a) - new Date(b))   // sort chronologically
        .map(d => dateFormatter.format(new Date(d))) // format date in en-US locale
        .join(' - ')
    },
  },
}

demo

回复收藏 0 原文

烟花肆意 2025-02-10 04:53:56

您可以通过对V-Model输入值进行排序来实现这一目标。

演示：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    dates: [],
  }),
  computed: {
    dateRangeText () {
      return this.dates.sort().join(', ')
    },
  },
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col
        cols="12"
        sm="6"
      >
        <v-date-picker
          v-model="dates"
          range
        ></v-date-picker>
      </v-col>
      <v-col
        cols="12"
        sm="6"
      >
        <v-text-field
          v-model="dateRangeText"
          label="Date range"
          prepend-icon="mdi-calendar"
          readonly
        ></v-text-field>
        model: {{ dates }}
      </v-col>
    </v-row>
  </v-app>
</div>

You can achieve this by sorting an v-model input value.

Demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    dates: [],
  }),
  computed: {
    dateRangeText () {
      return this.dates.sort().join(', ')
    },
  },
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-row>
      <v-col
        cols="12"
        sm="6"
      >
        <v-date-picker
          v-model="dates"
          range
        ></v-date-picker>
      </v-col>
      <v-col
        cols="12"
        sm="6"
      >
        <v-text-field
          v-model="dateRangeText"
          label="Date range"
          prepend-icon="mdi-calendar"
          readonly
        ></v-text-field>
        model: {{ dates }}
      </v-col>
    </v-row>
  </v-app>
</div>

回复收藏 0 原文

~没有更多了~