uni-datetime-picker 无法实现点击“清除”按钮将 picker-view 中的时分秒重置为 00:00:00 的效果

uni-datetime-picker 无法实现点击“清除”按钮将 picker-view 中的时分秒重置为 00:00:00 的效果 产品分类：uniapp/H5

开发环境 版本号 项目创建方式
Windows Windows10 CLI

示例代码：

/**  
 * 用户点击“清空”按钮，清空当前值  
 */  
clearTime() {  
    this.time = ''  
    this.$emit('change', this.time)  
    this.$emit('input', this.time)  
    this.$emit('update:modelValue', this.time)  
    this.tiggerTimePicker()  
},

操作步骤：

  1. 如果当前时间包含年月日时分秒，点击时分秒，出现弹框，此时我只想清除时分秒的数据时不能清楚
  2. 在源码当中的clearTime是这样写的 this.time = '' this.$emit('change', this.time) this.$emit('input', this.time) this.$emit('update:modelValue', this.time)
  3. 这个 clearTime 方法仅仅是将 this.time 变量（这个变量主要用于在 未打开 弹窗时显示选定的值，以及在点击“确定”时 最终 返回的值）设置为空字符串 ‘’
  4. 它完全没有 修改组件内部用来驱动 picker-view 显示的 this.hour, this.minute, this.second 这三个数据属性。当我点击“清除”时， picker-view 界面上显示的时分秒由 this.hour, this.minute, this.second 决定。

预期结果：

  1. 实现点击“清除”按钮将 picker-view 中的时分秒重置为 00:00:00 的效果
  2. 希望点击“清除”按钮后时分秒的数据支持可配置项可以选择要 00:00:00 也可以保持现在不变
  3. 能配置是最好了
  4. 只需要修改clearTime方法即可
/**
 * 用户点击“清空”按钮，清空当前值
 */
clearTime() {
    // --- 修改开始 ---
    // 1. 将内部时、分、秒重置为 0
    this.hour = 0
    this.minute = 0
    this.second = 0

    // 2. (可选) 更新内部 time 变量以反映 00:00:00，虽然此时不清空也不影响最终结果  
    // this.time = this._formatDisplayTime();  

    // 3. 移除事件发送，清除时不应直接改变外部 v-model 的值  
    // this.$emit('change', this.time)  
    // this.$emit('input', this.time)  
    // this.$emit('update:modelValue', this.time)  

    // 4. 保持弹框不关闭 (原代码已注释掉 tiggerTimePicker)  
    // this.tiggerTimePicker()  
    // --- 修改结束 ---  
},
`

2 回复

收到反馈，会评估一下是否修改


要实现点击"清除"按钮重置时分秒为00:00:00的效果，可以这样修改clearTime方法：

clearTime() {
    // 重置时分秒为0
    this.hour = 0
    this.minute = 0 
    this.second = 0
    
    // 更新内部time变量格式为00:00:00
    this.time = this._formatDisplayTime()
    
    // 触发change事件
    this.$emit('change', this.time)
    this.$emit('input', this.time)
    this.$emit('update:modelValue', this.time)
}

如果要支持配置项控制是否重置为00:00:00，可以这样修改：

clearTime() {
    if(this.resetToZero) { // 新增配置项
        this.hour = 0
        this.minute = 0
        this.second = 0
        this.time = this._formatDisplayTime()
    } else {
        this.time = ''
    }
    
    this.$emit('change', this.time)
    this.$emit('input', this.time) 
    this.$emit('update:modelValue', this.time)
}

然后在组件props中定义resetToZero配置项：

props: {
    resetToZero: {
        type: Boolean,
        default: true
    }
}

使用时通过reset-to-zero属性控制：

<uni-datetime-picker reset-to-zero="false"></uni-datetime-picker>
回到顶部