uni-app uni-datetime-picker选择日期后 删除按钮下无底色

uni-app uni-datetime-picker选择日期后 删除按钮下无底色

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 11 家庭中文版
HBuilderX类型 正式
HBuilderX版本号 4.75
手机系统 Android
手机系统版本号 Android 15
手机厂商 小米
手机机型 小米13
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

<uni-datetime-picker v-model="dateRange"  type="daterange" startDate="2025-01-01" endDate="2025-12-31"
rangeSeparator="至" @change="handleDateChange"  class="date-selector" />
.date-selector {
flex: 1;
min-width: 450rpx;
}

预期结果：

暂无

实际结果：

无底色

bug描述：

叉号下无底色，示例项目也是这样


更多关于uni-app uni-datetime-picker选择日期后 删除按钮下无底色的实战教程也可以访问 https://www.itying.com/category-93-b0.html

15 回复

这个组件是什么版本？不加那个class样式有问题吗？

更多关于uni-app uni-datetime-picker选择日期后 删除按钮下无底色的实战教程也可以访问 https://www.itying.com/category-93-b0.html


2.0.2

回复 2***@qq.com: 升级到最新版本试试是否还有这个问题

回复 DCloud_UNI_JBB: 我升级到2.2.42了，还是不行，选择之后叉号底下没颜色

回复 DCloud_UNI_JBB: 我把class去了，也是没颜色

回复 2***@qq.com: 稍等，我跟同事确认下这是设计如此还是bug

回复 DCloud_UNI_JBB: 我现在也在uni-datetime-picker又包了一层view

导入你们的示例项目，换一下背景色也是有问题的。

这个测试贴一下代码给我

回复 DCloud_UNI_JBB: <template> <view class="page container"> <uni-card :is-shadow="false" is-full> <text class="uni-h6">可以同时选择日期和时间的选择器</text> </uni-card> <uni-section :title="'日期用法：' + dateString" type="line"></uni-section> <view class="example-body"> <uni-datetime-picker type=“date” :clear-icon=“false” v-model=“dateString” @maskClick=“maskClick” /> </view> <uni-section :title="'日期时间用法：' + datetimeString" type="line"></uni-section> <view class="example-body"> <uni-datetime-picker type=“datetime” :start=“start” :end=“end” v-model=“datetimeString” @change=“change” /> </view> <uni-section :title="'日期时间 default-value：' + datetimeDefaultValueString" type="line"></uni-section> <view class="example-body"> <uni-datetime-picker type=“datetime” :start=“start” :end=“end” :default-value=“datetimeDefaultValue” v-model=“datetimeDefaultValueString” @change=“change” /> </view> <uni-section :title="'日期范围用法：' + '[' + dateRange + ']'" type="line"></uni-section> <view class="example-body"> <uni-datetime-picker v-model=“dateRange” type=“daterange” @maskClick=“maskClick” /> </view> <uni-section :title="'日期时间范围用法：' + '[' + datetimeRange + ']' " type="line"></uni-section> <view class="example-body"> <uni-datetime-picker v-model="datetimeRange" type="datetimerange" rangeSeparator="至" /> </view> <uni-section :title="'时间戳用法：' + dateTimestamp" type="line"></uni-section> <view class="example-body"> <uni-datetime-picker returnType=“timestamp” v-model=“dateTimestamp” @change=“change” /> </view> <uni-section :title="'date 对象用法：' + dateInstance" type="line"></uni-section> <view class="example-body"> <uni-datetime-picker type=“datetime” returnType=“date” v-model=“dateInstance” @change=“change” /> </view> <uni-section :title="'插槽用法：' + dateString" type="line"></uni-section> <view class="example-body"> <uni-datetime-picker v-model="dateString">我是一个插槽，点击我</uni-datetime-picker> </view> <uni-section :title="'无边框用法：' + dateString" type="line"></uni-section> <view class="example-body"> <uni-datetime-picker v-model="dateString" :border="false" /> </view> <uni-section :title="'隐藏清除按钮用法：' + dateString" type="line"></uni-section> <view class="example-body"> <uni-datetime-picker v-model="dateString" :clearIcon="false" /> </view> <uni-section :title="'disabled用法：' + dateString" type="line"></uni-section> <view class="example-body"> <uni-datetime-picker v-model="dateString" disabled /> </view> </view> </template>

<script> export default { data() { return { dateString: this.getDateTime(new Date()), datetimeString: this.getDateTime(new Date(), false), datetimeDefaultValueString: '', datetimeDefaultValue: this.getDateTime(Date.now() + 1 24 3600000), dateTimestamp: Date.now(), dateInstance: new Date(), dateRange: [this.getDate(Date.now() - 5 24 3600000), this.getDate(Date.now() + 5 24 3600000)], datetimeRange: [this.getDateTime(Date.now() - 5 24 3600000), this.getDateTime(Date.now() + 5 24 3600000)], start: Date.now() - 10 24 3600000, end: Date.now() + 10 24 3600000 } }, watch: { datetimeString() { console.log('日期时间单选:', this.datetimeString); }, dateRange() { console.log('日期范围选:', this.dateRange); }, datetimeRange() { console.log('日期时间范围选:', this.datetimeRange); } }, methods: { change(e) { console.log('----change事件:', e); }, maskClick() { console.log('----maskClick事件'); }, getDateTime(date, addZero = true){ return ${this.getDate(date, addZero)} ${this.getTime(date, addZero)} }, getDate(date, addZero = true){ date = new Date(date) const year = date.getFullYear() const month = date.getMonth()+1 const day = date.getDate() return ${year}-${addZero ? this.addZero(month) : month}-${addZero ? this.addZero(day) : day} }, getTime(date, addZero = true){ date = new Date(date) const hour = date.getHours() const minute = date.getMinutes() const second = date.getSeconds() return this.hideSecond ? ${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute} : ${addZero ? this.addZero(hour) : hour}:${addZero ? this.addZero(minute) : minute}:${addZero ? this.addZero(second) : second} }, addZero(num) { if (num < 10) { num = 0${num} } return num } } } </script>
<style lang="scss"> .example-body { background-color: #ffaaff; padding: 10px; } </style>

我就改了下background-color，把原本#fff改了

回复 2***@qq.com: 你要不发个文件吧，或者你在im里面私聊我发一下，这个我运行不起来

回复 DCloud_UNI_JBB: 不需要吧，就是插件市场的DCloud前端团队的uni-datetime-picker 日期选择器→使用hbuilder导入示例项目，然后我把background-color改成了粉色

这是一个已知的uni-datetime-picker组件样式问题。在Android平台下，清除按钮（叉号）的圆形背景色可能因平台渲染差异而丢失。

解决方案：

  1. 添加自定义样式覆盖：
.date-selector ::v-deep .uni-datepicker-clear {
  background-color: #f0f0f0 !important;
  border-radius: 50%;
}
  1. 调整样式层级：
.date-selector {
  flex: 1;
  min-width: 450rpx;
}

/* 针对清除按钮的特殊处理 */
.date-selector ::v-deep .uni-datetime-picker-clear {
  background-color: rgba(0,0,0,0.1);
  border-radius: 50%;
  width: 36rpx;
  height: 36rpx;
}
回到顶部