更新记录

1.1（2022-03-21）

1、修复bug 2、新增日期文字位置 3、新增日期高度 4、新增返回值类型

1.0（2022-03-02）

可选择起始时间和终止时间，支持自定义颜色、样式

平台兼容性

ir-datetime-picker组件

ir-datetime-picker，DateTimePicker 日期时间选择组件，可选择起始时间和终止时间，支持自定义颜色、样式。

IOS系统未进行测试，IOS系统未进行测试，IOS系统未进行测试

基本用法

<ir-date-time-picker :value.sync="value" />

自定义样式

<ir-date-time-picker
    color="#a9b5ff"
    borderColor="#a9b5ff"
    placeholderColor="#6f78a8"
    :showIcon="true"
    iconColor="#a9b5ff"
    :showClear="true"
    clearColor="#a9b5ff"
    pickerBg="#0d143f"
    activeColor="#a9b5ff"
    pickerColor="#6f78a8"
    cancelColor="#6f78a8"
    confirmColor="#a9b5ff"
    indicatorStyle="height: 50px;background-color: rgba(17, 23, 76, 0)"
    maskStyle="background-image: linear-gradient(rgba(17, 23, 76, .8), rgba(17, 23, 76, 0.3)), linear-gradient(rgba(17, 23, 76, .3), rgba(17, 23, 76, .8))"
    >
    <template v-slot:cancel>
        <view class="btn">关闭</view>
    </template>
    <template v-slot:confirm>
        <view class="btn confirm">确定</view>
    </template>
</ir-date-time-picker>

<style>
    ::v-deep .ir-datetime-picker::after {
        border-bottom: 2rpx solid #6f78a8;
    }
    ::v-deep .ir-datetime-picker::before {
        border-top: 2rpx solid #6f78a8;
    }
    .btn {
        border: 1rpx solid #6f78a8;
        padding: 10rpx 20rpx;
        border-radius: 6rpx;
        color: #6f78a8;
        margin: 30rpx 40rpx;
        font-size: 28rpx;
    }
    .confirm {
        border-color: #a9b5ff;
        color: #a9b5ff;
    }
</style>

参数说明

说明

以下元素可自定义组件

注：插件indicator-class为ir-datetime-picker，mask-class为ir-datetime-picker-mask；可参照picker-view文档，设置选择器中间选中框和蒙层的样式