uniapp uni-datetime-picker日期选择器不显示确定按钮如何解决？

我在使用uniapp的uni-datetime-picker组件时遇到了一个问题：日期选择器弹出后没有显示确定按钮，只有取消按钮。这导致用户选择日期后无法确认选择，只能取消。请问这是什么原因导致的？该如何解决？我使用的HBuilderX版本是3.4.7，uni-datetime-picker是最新版本。

2 回复

检查show-confirm-btn属性是否设为false，改为true即可显示确定按钮。


在uni-app的uni-datetime-picker组件中，如果未显示确定按钮，通常是因为组件的type属性被设置为非默认值，或者使用了错误的版本/配置。以下是解决方案：

  1. 检查type属性
    确保type属性为date、datetime或time（这些类型默认显示确定按钮）。避免使用year、month等类型，它们可能不包含确定按钮。

    <uni-datetime-picker type="date" v-model="selectedDate" />

  2. 更新组件版本
    若使用HBuilderX，通过“工具-插件安装”更新uni-datetime-picker至最新版，确保功能正常。

  3. 自定义按钮（备用方案）
    若仍需隐藏默认按钮并自定义，可结合@change事件处理选择逻辑，并添加外部按钮：

    <template>
  <view>
    <uni-datetime-picker type="date" v-model="tempDate" @change="onDateChange" :show-btn="false" />
    <button @click="confirmSelection">确定</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tempDate: '',
      selectedDate: ''
    };
  },
  methods: {
    onDateChange(e) {
      this.tempDate = e; // 暂存选择值
    },
    confirmSelection() {
      this.selectedDate = this.tempDate; // 确认后赋值
      console.log('最终选择:', this.selectedDate);
    }
  }
};
</script>

  4. 检查平台差异
    部分平台（如iOS）可能对原生选择器样式有调整，测试多端确保兼容性。

通过调整类型或自定义逻辑即可解决问题。

回到顶部