【报Bug】uni-datetime-picker选择日期后，删除按钮下无底色

2***@qq.com (作者)

2.0.2

2025-08-20 17:32

DCloud_UNI_JBB

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

2025-08-20 17:34

2***@qq.com (作者)

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

2025-08-21 08:43

2***@qq.com (作者)

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

2025-08-21 08:44

DCloud_UNI_JBB

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

2025-08-21 16:46

2***@qq.com (作者)

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

2025-08-21 17:04

DCloud_UNI_JBB

这个测试贴一下代码给我

2025-08-21 16:57

2***@qq.com (作者)

回复 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改了

2025-08-21 17:02

DCloud_UNI_JBB

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

2025-08-21 17:37

2***@qq.com (作者)

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

2025-08-22 08:35