[英]Proper way to change Bootstrap-Vue text field into mm/dd/yyyy format
I'm using Bootstrap-Vue <b-form-datepicker>
component and looking for a way to customise the input date field to mm/dd/yyyy
format.我正在使用 Bootstrap-Vue
<b-form-datepicker>
组件并寻找一种将输入日期字段自定义为mm/dd/yyyy
格式的方法。 Any proper ways?有什么正确的方法吗?
<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>
Documentation https://bootstrap-vue.org/docs/components/form-datepicker文档https://bootstrap-vue.org/docs/components/form-datepicker
You can achieve it by simply assign the selectedFormatted
value from b-form-datepicker
into the v-model
value of b-form-input
.您可以通过简单地将
b-form-datepicker
的selectedFormatted
值分配给b-form-input
的v-model
值来实现它。
Note: Use different v-model value for both b-input-group
& b-form-datepicker
注意:对
b-input-group
和b-form-datepicker
使用不同的 v-model 值
Demo:演示:
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>
Does setting each component as numeric not achieve the right format?将每个组件设置为数字是否无法实现正确的格式?
<b-form-datepicker
:date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }"
locale="en"
></b-form-datepicker>
Gives: 9/16/2020
赠送:
9/16/2020
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.