我正在设定出生日期。 如何设置"年"作为我的第一个弹出窗口?而不是日历视图弹出窗口。
我使用的视图包是" vue2-datepicker"
我想选择" YEAR"首先,然后"月"然后"日期"
当我点击日历图标时,这是我想首先显示的内容。
目前,当我点击日历图标时,它会显示默认日历。
这是我目前的代码。它使用默认日历工作正常,但我只想默认为年份选择,然后是月份,然后是日期。
<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>
答案 0 :(得分:1)
标准浏览器datepicker不允许您改变其行为。您可能会发现另一个更适合您的日期选择器组件,但我怀疑您必须编写自己的组件,将年,月和日期的单独输入组合在一起。如果你对结果非常挑剔,那么这种努力将是值得的。在大多数情况下,使用现成的组件会更好。