我正在使用 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>
您只需将
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>
将每个组件设置为数字是否无法达到正确的格式?
<b-form-datepicker
:date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
locale="en"
></b-form-datepicker>
给予:
9/16/2020
格式 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>