我在设置出生日期字段。如何将“年份”设置为我的第一个弹出窗口?而不是日历视图弹出。
我使用的视图包是"vue2-datepicker“
我想先选择“年”,然后选择“月”,然后选择“日期”。
这是我单击日历图标时首先要显示的内容。
目前,当我单击日历图标时,它会显示默认日历。
这是我目前拥有的代码。它可以很好地使用默认日历,但我只想默认选择年,然后是月,然后是日期。
<template>
<div class="styled-form__field">
<label class="styled-form__label">{{ label }}</label>
<span
:class="['styled-form__error', {'is-visible': error}]"
>{{ error }}</span>
<date-picker
:value="value"
lang="en"
:format="'DD MMMM YYYY'"
:placeholder="' '"
:width="'auto'"
:input-class="datePickerClass"
:not-before="datePicker.start"
:not-after="datePicker.finish"
@input="changeHandler"
></date-picker>
</div>
</template>
<script>
import moment from 'moment';
import DatePicker from '../common/DatePicker.vue';
export default {
components: {
DatePicker
},
props: {
value: {
required: true
},
label: String,
error: String
},
data() {
return {
datePicker: {
start: moment().subtract(115, 'years').toDate(),
finish: moment().subtract(1, 'days').toDate()
}
};
},
computed: {
datePickerClass() {
return this.error ? 'styled-form__date-picker is-invalid' : 'styled-form__date-picker';
}
},
methods: {
changeHandler(newValue) {
let parsedValue = '';
if (newValue !== '') {
parsedValue = moment(newValue).format('YYYY-MM-DD');
}
this.$emit('input', parsedValue);
}
}
};
</script>
发布于 2018-06-05 16:44:25
标准浏览器datepicker不允许你这样改变它的行为。您可能会发现另一个更适合您的datepicker组件,但我怀疑您必须编写自己的组件,将年、月和日期的输入组合在一起。只有当你对结果非常挑剔的时候,这些努力才是值得的。在大多数情况下,使用现成的组件会更好。
https://stackoverflow.com/questions/50694844
复制相似问题