Vue JS生日選擇器

Question

我正在設置出生日期字段。 如何將“年份”設置為我的第一個彈出窗口？ 而不是日歷視圖彈出窗口。

我正在使用的視圖包是“ 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>

Answer 1

標准的瀏覽器日期選擇器不允許您更改其行為。 您可能會找到另一個更適合您的datepicker組件，但我懷疑您將不得不編寫自己的日期，年份，月份和日期的單獨輸入。 如果您對結果非常挑剔，那么付出努力是值得的。 在大多數情況下，使用現成的組件會更好。