将 Bootstrap-Vue 文本字段更改为 mm/dd/yyyy 格式的正确方法

问题描述 投票:0回答:3

我正在使用 Bootstrap-Vue

<b-form-datepicker>
组件,并寻找一种将输入日期字段自定义为
mm/dd/yyyy
格式的方法。有什么合适的方法吗?

<b-input-group class="mb-3">
        <b-form-input
          id="example-input"
          v-model="dateOfBirth"
          type="text"
          placeholder="MM-DD-YYYY"
          locale="en-US"
          autocomplete="off"
        ></b-form-input>
        <b-input-group-append>
          <b-form-datepicker
            v-model="dateOfBirth"
            button-only
            right
            locale="en-US"
            :date-format-options="{ year: 'numeric', month: 'short', day: '2-digit', weekday: 'short' }"
            aria-controls="example-input"
          ></b-form-datepicker>
        </b-input-group-append>
      </b-input-group>

文档https://bootstrap-vue.org/docs/components/form-datepicker

vue.js vuejs2 bootstrap-vue vuejs3 vuejs-datepicker
3个回答
2
投票

您只需将

selectedFormatted
中的
b-form-datepicker
值分配给
v-model
b-form-input
值即可实现。

注意:对

b-input-group
b-form-datepicker

使用不同的 v-model 值

演示:

new Vue({
  el: '#app',
  data() {
    return {
      value: '',
      inputValue: ''
    }
  },
  methods: {
    onContext(ctx) {
      this.inputValue = ctx.selectedFormatted;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<div id="app">
  <label for="example-input">Choose a date</label>
  <b-input-group class="mb-3">
    <b-form-input
      id="example-input"
      v-model="inputValue"
      type="text"
      placeholder="MM/DD/YYYY"
      autocomplete="off"
    ></b-form-input>
    <b-input-group-append>
      <b-form-datepicker
        v-model="value"
        button-only
        right
        locale="en-US"
        aria-controls="example-input"
        :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
        @context="onContext"
      ></b-form-datepicker>
    </b-input-group-append>
  </b-input-group>
</div>


1
投票

将每个组件设置为数字是否无法达到正确的格式?

<b-form-datepicker
  :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
  locale="en"
></b-form-datepicker>

给予:

9/16/2020


0
投票

格式 dd/mm/yyyy 这将更新实际的日期选择器和 selectedDate,值:

<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<div id="app">
  <label for="example-input">Choose a date</label>
  <b-input-group class="mb-3">
    <b-form-input
      id="example-input"
      v-model="formattedDate"
      type="text"
      placeholder="DD/MM/YYYY"
      autocomplete="off"
    ></b-form-input>
    <b-input-group-append>
      <b-form-datepicker
        v-model="selectedDate"
        button-only
        right
        locale="en-US"
        aria-controls="example-input"
        :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
      ></b-form-datepicker>
    </b-input-group-append>
  </b-input-group>
</div>
<script>new Vue({
  el: '#app',
  data() {
    return {
      selectedDate: '',
      formattedDate: ''
    }
  },
  watch: {
    selectedDate(newValue) {
      if (newValue) {
        const parts = newValue.split('-');
        this.formattedDate = parts[2] + '/' + parts[1] + '/' + parts[0];
      } else {
        this.formattedDate = '';
      }
    },
    formattedDate(newValue) {
      if (newValue) {
        const parts = newValue.split('/');
        this.selectedDate = parts[2] + '-' + parts[1] + '-' + parts[0];
      } else {
        this.selectedDate = '';
      }
    }
  }
})</script>
© www.soinside.com 2019 - 2024. All rights reserved.