首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Vue JS出生日期选取器

Vue JS出生日期选取器
EN

Stack Overflow用户
提问于 2018-06-05 15:48:56
回答 1查看 2.6K关注 0票数 0

我在设置出生日期字段。如何将“年份”设置为我的第一个弹出窗口?而不是日历视图弹出。

我使用的视图包是"vue2-datepicker“

我想先选择“年”,然后选择“月”,然后选择“日期”。

这是我单击日历图标时首先要显示的内容。

目前,当我单击日历图标时,它会显示默认日历。

这是我目前拥有的代码。它可以很好地使用默认日历,但我只想默认选择年,然后是月,然后是日期。

代码语言:javascript
复制
    <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>
EN

回答 1

Stack Overflow用户

发布于 2018-06-05 16:44:25

标准浏览器datepicker不允许你这样改变它的行为。您可能会发现另一个更适合您的datepicker组件,但我怀疑您必须编写自己的组件,将年、月和日期的输入组合在一起。只有当你对结果非常挑剔的时候,这些努力才是值得的。在大多数情况下,使用现成的组件会更好。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50694844

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档