DatetimePicker 日期时间选择

用于选择器的方式选择日期和时间。

注意

此组件依赖插件dayjs，使用npm install dayjs --save进行安装。

安装完成后，在main.js中挂载CookUni({dayjs})插件，才能正常使用。

基本用法

datetimePicker.value.open({
    // 属性
    mode:'date',
    // ...

    // 事件
    confirm: (res) => {}
    // ...
});

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
name	String	null	选择器名 用于事件中返回	All
value	String,Number,Object	null	默认选中的值	All
mode	String	datetime	视图date/datetime/year/month	All
itemHeight	String,Number	88rpx	行高度	All
itemRowCount	String,Number	7	显示的行数量	All
itemTextProps	Object	{}	选项文本配置 参考c-text组件的props	All
title	String,Object	null	标题 object请c-text组件的pros	All
max	String,Number,Object	null	最大时间	All
min	String,Number,Object	null	最小值时间	All
bottomBtn	Boolean	false	按钮位置是否在底部 为true时，为按钮样式，false时为文字样式	All
cancelText	String,Object	取消	按钮 object请c-text和c-btn组件的pros	All
confirmText	String,Object	确定		All
radius	Number,String	null	背景圆角	All
position	String	bottom	打开位置，top，center，bottom	All
closeOnMaskClick	Boolean	true	点击遮罩关闭	All
maskBgColor	String	rgba(0, 0, 0, 0.4)	弹出层背景	All
animation	Boolean	true	开启弹出层动画	All
titleProps	Object	{}	标题文本配置 参考c-text组件的props	All
customTabBar	Boolean	false	是否自定义tabBar	MP-WEIXIN
indicatorStyle	String		设置选择器中间选中框的样式	All
indicatorClass	String		设置选择器中间选中框的类名	All
maskStyle	String		设置蒙层的样式	All
maskClass	String		设置蒙层的类	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

提示

微信小程序tabBar页面使用，当自定义tabBar时，需要设置customTabBar为true，否则会显示不正确。

事件

事件名	说明
close	{name}
open	{name}
confirm	{name,value}，value的值为一个dayjs对象
cancel	{name}
titleClick	{name}

插槽

插槽名	说明
default	选择器上方，按钮下方
after	选择器下方

方法

名称	说明
open(null|props)	打开DatetimePicker 传递props时，将覆盖组件props
close()	关闭

示例

<template>
    <c-datetime-picker ref="myPicker" />
    <c-btn @click="openPicker">打开</c-btn>
</template>
<script setup>
import { ref } from 'vue'

const myPicker = ref(null);
function openPicker() {
    myPicker.value.open({
        value:'2021-01-01 00:00:00',
        confirm:(res)=> {
            console.log(res);
        }
    });
}
</script>