DatePicker 日期选择器

规则

基础示例

const rule = {
    type: "DatePicker",
    field: "section_day",
    title: "活动日期",
    value: ['2018-02-20 12:12:12', '2018-03-20 12:12:12'],
    props: {
        type: "datetimerange",
        placeholder:"请选择活动日期",
    }
}

Props 配置示例

日期选择（date）

const rule = {
    type: "DatePicker",
    field: "date",
    title: "选择日期",
    value: null,
    props: {
        type: "date",
        format: "yyyy-MM-dd",
        placeholder: "请选择日期",
        clearable: true,
    }
}

日期时间选择（datetime）

const rule = {
    type: "DatePicker",
    field: "datetime",
    title: "选择日期时间",
    value: null,
    props: {
        type: "datetime",
        format: "yyyy-MM-dd HH:mm:ss",
        placeholder: "请选择日期时间",
        clearable: true,
    }
}

日期范围选择（daterange）

const rule = {
    type: "DatePicker",
    field: "dateRange",
    title: "日期范围",
    value: null,
    props: {
        type: "daterange",
        format: "yyyy-MM-dd",
        startPlaceholder: "开始日期",
        endPlaceholder: "结束日期",
        clearable: true,
    }
}

日期时间范围选择（datetimerange）

const rule = {
    type: "DatePicker",
    field: "datetimeRange",
    title: "日期时间范围",
    value: null,
    props: {
        type: "datetimerange",
        format: "yyyy-MM-dd HH:mm:ss",
        startPlaceholder: "开始日期时间",
        endPlaceholder: "结束日期时间",
        clearable: true,
    }
}

月份选择（month）

const rule = {
    type: "DatePicker",
    field: "month",
    title: "选择月份",
    value: null,
    props: {
        type: "month",
        format: "yyyy-MM",
        placeholder: "请选择月份",
        clearable: true,
    }
}

年份选择（year）

const rule = {
    type: "DatePicker",
    field: "year",
    title: "选择年份",
    value: null,
    props: {
        type: "year",
        format: "yyyy",
        placeholder: "请选择年份",
        clearable: true,
    }
}

Events 事件示例

监听日期变化

const rule = {
    type: "DatePicker",
    field: "date",
    title: "选择日期",
    value: null,
    props: {
        type: "date",
        format: "yyyy-MM-dd",
        placeholder: "请选择日期",
        clearable: true,
    },
    on: {
        'update:value': (value, formattedValue) => {
            console.log('日期改变:', value, formattedValue);
        },
        blur: () => {
            console.log('失去焦点');
        },
        focus: () => {
            console.log('获得焦点');
        },
    },
}

日期选择后联动更新

const rule = [
    {
        type: "DatePicker",
        field: "startDate",
        title: "开始日期",
        value: null,
        props: {
            type: "date",
            format: "yyyy-MM-dd",
            placeholder: "请选择开始日期",
        },
        inject: true,
        on: {
            'update:value': ($inject, value) => {
                // 开始日期改变时，自动设置结束日期（开始日期+7天）
                if (value) {
                    const endDate = value + 7 * 24 * 60 * 60 * 1000;
                    $inject.api.setValue('endDate', endDate);
                }
            },
        },
    },
    {
        type: "DatePicker",
        field: "endDate",
        title: "结束日期",
        value: null,
        props: {
            type: "date",
            format: "yyyy-MM-dd",
            placeholder: "请选择结束日期",
        },
    },
]

完整配置项:naive-ui_DatePicker

value: String | Array

DatePicker

Props

名称	类型	默认值	说明	版本
clearable	`boolean`	`false`	是否支持清除
default-formatted-value	`string \| [string, string] \| null`	`undefined`	Date Picker 格式化后的值
disabled	`boolean`	`false`	是否禁用
first-day-of-week	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`undefined`	日历上一周的开始，0 代表周一
formatted-value	`string \| [string, string] \| null`	`undefined`	格式化之后的值	2.24.0
input-readonly	`boolean`	`false`	设置输入框为只读（避免在移动设备上打开虚拟键盘）
placement	`'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end'` \| `'bottom-start'`	面板的弹出位置	2.25.0
shortcuts	`Record<string, number \| (() => number)> \| Record<string, [number, number] \| (() => [number, number])>`	`undefined`	自定义快捷按钮
size	`'small' \| 'medium' \| 'large'`	`'medium'`	尺寸
type	`'date' \| 'datetime' \| 'daterange' \| 'datetimerange' \| 'month' \| 'year' \| 'quarter'` \| `'date'`	Date Picker 的类型	`'quarter'` v2.22.0
value-format	`string`	跟随 `format` 属性	绑定值的格式，详情见 format
on-blur	`() => void`	`undefined`	用户 blur 时执行的回调
on-focus	`() => void`	`undefined`	用户 focus 时执行的回调

Date 类型的 Props

名称	类型	默认值	说明	版本
actions	`Array<'clear' \| 'now'> \| null`	`['clear', 'now']`	Date 类型的 Date Picker 中支持的操作
format	`string`	`'YYYY-MM-dd'`	时间格式化字符串，详情见 format
is-date-disabled	`(current: number) => boolean`	`undefined`	日期禁用的校验函数
placeholder	`string`	`'选择日期'`	自动填充的提示信息
on-update:formatted-value	`(value: string \| null, timestampValue: number \| null) => void`	`undefined`	可控数据更新时触发的回调函数	2.24.0
on-update:value	`(value: number \| null, formattedValue: string \| null) => void`	`undefined`	可控数据更新时触发的回调函数	`formattedValue` 2.24.0

DateTime 类型的 Props

名称	类型	默认值	说明	版本
actions	`Array<'clear' \| 'now' \| 'confirm'> \| null`	`['clear', 'now', 'confirm']`	DateTime 类型的 Date Picker 中支持的操作
default-time	`string`	`undefined`	默认时间，格式为 `HH:mm:ss`	2.22.0
format	`string`	`'YYYY-MM-dd HH:mm:ss'`	时间格式化字符串，详情见 format
is-date-disabled	`(current: number) => boolean`	`undefined`	日期禁用的校验函数
is-time-disabled	`(current: number) => { isHourDisabled: boolean, isMinuteDisabled: boolean, isSecondDisabled: boolean }`	`undefined`	时间禁用的校验函数
placeholder	`string`	`'选择日期时间'`	提示信息
update-value-on-close	`boolean`	`false`	关闭面板时更新值
on-update:formatted-value	`(value: string \| null, timestampValue: number \| null) => void`	`undefined`	数据更新时触发的回调函数	2.24.0
on-update:value	`(value: number \| null, formattedValue: string \| null) => void`	`undefined`	数据更新时触发的回调函数	`formattedValue` 2.24.0

DateRange 类型的 Props

名称	类型	默认值	说明	版本
actions	`Array<'clear' \| 'confirm'> \| null`	`['clear', 'confirm']`	DateRange 类型的 Date Picker 中支持的用户操作
end-placeholder	`string`	`'结束日期'`	DateRange 中 end 选框的提示信息
format	`string`	`'YYYY-MM-dd'`	时间格式化字符串，详情见 format
is-date-disabled	`(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean`	`undefined`	日期禁用的校验函数
is-time-disabled	`(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }`	`undefined`	时间禁用的校验函数
close-on-select	`boolean`	`false`	用户选择时间范围后是否自动关闭面板
separator	`string`	`'至'`	start 选框与 end 选框之间的分隔符
start-placeholder	`string`	`'开始日期'`	DateRange 中 start 选框的提示信息
update-value-on-close	`boolean`	`false`	关闭面板时是否更新值
on-update:formatted-value	`(value: [string, string] \| null, timestampValue: [number, number] \| null) => void`	`undefined`	数据更新时触发的回调函数	2.24.0
on-update:value	`(value: [number, number] \| null, formattedValue: [string, string] \| null) => void`	`undefined`	数据更新时触发的回调函数	`formattedValue` 2.24.0

DateTimeRange 类型的 Props

名称	类型	默认值	说明	版本
actions	`Array<'clear' \| 'confirm'> \| null`	`['clear', 'confirm']`	DateTimeRange 类型的 Date Picker 中支持的用户操作
default-time	`string \| Array<string \| undefined>`	`undefined`	默认时间，格式为 `HH:mm:ss`	2.22.0
end-placeholder	`string`	`'结束日期时间'`	DateTimeRange 中 end 选框的提示信息
format	`string`	`'YYYY-MM-dd HH:mm:ss'`	时间格式化字符串，详情见 format
is-date-disabled	`(current: number, phase: 'start' \| 'end', value: [number, number] \| null) => boolean`	`undefined`	日期禁用的校验函数
is-time-disabled	`(current: number, phase: 'start' \| 'end', value: [number, number]) => { isHourDisabled?: () => boolean, isMinuteDisabled?: () => boolean, isSecondDisabled?: () => boolean }`	`undefined`	时间禁用的校验函数
separator	`string`	`'to'`	start 选框与 end 选框之间的分隔符
start-placeholder	`string`	`'开始日期时间'`	DateTimeRange 中 start 选框的提示信息
update-value-on-close	`boolean`	`false`	关闭面板时是否更新值
on-update:formatted-value	`(value: [string, string] \| null, timestampValue: [number, number] \| null) => void`	`undefined`	数据更新时触发的回调函数	2.24.0
on-update:value	`(value: [number, number] \| null, formattedValue: [string, string] \| null) => void`	`undefined`	数据更新时触发的回调函数	`formattedValue` 2.24.0

Month 类型的 Props

名称	类型	默认值	说明	版本
actions	`Array<'clear' \| 'now' \| 'confirm'> \| null`	`['clear', 'now']`	Month 类型的 Date Picker 中支持的操作
format	`string`	`'YYYY-MM'`	时间格式化字符串，详情见 format
is-date-disabled	`(current: number) => boolean`	`undefined`	月份禁用的校验函数
placeholder	`string`	`'选择月份'`	自动填充的提示信息
on-update:formatted-value	`(value: string \| null, timestampValue: number \| null) => void`	`undefined`	可控数据更新时触发的回调函数	2.24.0
on-update:value	`(value: number \| null, formattedValue: string \| null) => void`	`undefined`	可控数据更新时触发的回调函数	`formattedValue` 2.24.0

Year 类型的 Props

名称	类型	默认值	说明	版本
actions	`Array<'clear' \| 'now'> \| null`	`['clear', 'now']`	Year 类型的 Date Picker 中支持的操作
format	`string`	`'YYYY'`	时间格式化字符串，详情见 format
is-date-disabled	`(current: number) => boolean`	`undefined`	年份禁用的校验函数
placeholder	`string`	`'选择年份'`	自动填充的提示信息
on-update:formatted-value	`(value: string \| null, timestampValue: number \| null) => void`	`undefined`	可控数据更新时触发的回调函数	2.24.0
on-update:value	`(value: number \| null, formattedValue: string \| null) => void`	`undefined`	可控数据更新时触发的回调函数	`formattedValue` 2.24.0

DatePicker 日期选择器 ​

规则 ​

基础示例 ​

Props 配置示例 ​

日期选择（date） ​

日期时间选择（datetime） ​

日期范围选择（daterange） ​

日期时间范围选择（datetimerange） ​

月份选择（month） ​

年份选择（year） ​

Events 事件示例 ​

监听日期变化 ​

日期选择后联动更新 ​

DatePicker ​

Props ​

Date 类型的 Props ​

DateTime 类型的 Props ​

DateRange 类型的 Props ​

DateTimeRange 类型的 Props ​

Month 类型的 Props ​

Year 类型的 Props ​

DatePicker 日期选择器

规则

基础示例

Props 配置示例

日期选择（date）

日期时间选择（datetime）

日期范围选择（daterange）

日期时间范围选择（datetimerange）

月份选择（month）

年份选择（year）

Events 事件示例

监听日期变化

日期选择后联动更新

DatePicker

Props

Date 类型的 Props

DateTime 类型的 Props

DateRange 类型的 Props

DateTimeRange 类型的 Props

Month 类型的 Props

Year 类型的 Props