DatePicker 日期选择器

变更点

• value(v-model)值类型由 mement 变更为 string
• ant-design-vue@1.5.4 目前暂无 YearPicker 组件，官方计划 2.x 版本才会提供。故利用 mode 和 panelChange 等方法封装 YearPicker 等组件，解决mode 设置后无法选择年份/月份？

组件注册

import { DatePicker } from '@yemu419/fms-components';
Vue.use(DatePicker);

代码演示

基本使用

~

<template>
    <f-date-picker v-model="date" @change="change" />
    <br />
    <f-month-picker v-model="month" placeholder="选择月份" />
    <br />
    <f-week-picker v-model="week" placeholder="选择周" @change="changeWeek" />
    <br />
    <f-year-picker v-model="year" placeholder="选择年" @change="changeYear" @disabledDate="disabledDate" />
    <br />
    <f-range-picker
        v-model="range"
        @change="changeRange"
        :show-time="{ format: 'HH:mm' }"
        format="YYYY-MM-DD HH:mm"
        :placeholder="['Start Time', 'End Time']"
    />
</template>

<script>
    export default {
        data() {
            return {
                date: '2020-06-06',
                month: '',
                week: '',
                year: '',
                range: [],
            };
        },
        methods: {
            change(date, dateString) {
                console.log(dateString);
            },

            changeWeek(date, dateString) {
                console.log(date, dateString);
            },

            changeYear(date, dateString) {
                console.log(date, dateString);
            },

            changeRange(dates, dateStrings) {
                console.log(dates, dateStrings);
            },

            disabledDate(current) {
                return current;
            }
        },
    };
</script>

API

YearPicker

参数	说明	类型	默认值	版本
placeholder	输入框提示文字	string	-
value(v-model)	日期	string|moment	-

YearPicker 事件

事件名称	说明	回调参数
change	时间发生变化的回调，发生在用户选择时间时	function(date: moment | string, dateString: string)

更多属性请参考 ant-design-vue/DatePicker。

基本使用

API