將 Bootstrap-Vue 文本字段更改為 mm/dd/yyyy 格式的正確方法

Question

我正在使用 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

Answer 1

您可以通過簡單地將b-form-datepicker的selectedFormatted值分配給b-form-input的v-model值來實現它。

注意：對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>

Answer 2

將每個組件設置為數字是否無法實現正確的格式？

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

贈送： 9/16/2020