uni-app 日期选择器

<uni-datetime-picker :start="startDate" :clear-icon='true' class="name_right" type="datetime" v-model="time" /> startDate=“2024-01-01” 这种格式

htzhanglong 2楼•23 天前

<uni-datetime-picker :start="startDate" :clear-icon='true' class="name_right" type="datetime" v-model="time" />

nodeper 3楼•23 天前

客户催的急啊，帮忙解决下啊

zlyuanteng 4楼•23 天前

回复 jgj_app: 除了这个机型没反应，其他机型没有问题

songsunli 5楼•23 天前

重新安装一下该app还会复现该问题吗

ionicwang 6楼•23 天前

就是客户新买手机安装出现的

sinazl 7楼•23 天前

能查出问题么，现在客户催，领导也催，让赶紧修复问题

itying888 8楼•23 天前

加我 qq 1370529270 也可以

caililin 9楼•23 天前作者

能上传一下demo（zip压缩包）吗。

nodeper 10楼•23 天前

新建一个工程在该机型下可以正常弹出datetimepicker吗

eggper 11楼•23 天前

回复 HRK_01: 我这没有这个机型，但是我 vivo 手机是正常的

sinazl 12楼•23 天前

回复 jgj_app: 你的datetimepicker版本是多少，更新到最新版本了吗

h691938207 13楼•23 天前

回复 HRK_01: 怎么看这个版本

caililin 14楼•23 天前作者

回复 HRK_01: 版本发下面了

sinazl 15楼•23 天前

回复 jgj_app: 右键uni_modules找到date-time-picker,右键从插件市场更新

caililin 16楼•23 天前作者

<uni-datetime-picker :start="startDate" :clear-icon='true' class="name_right" type="datetime" v-model="time" />

eggper 17楼•23 天前

好的，已加QQ

wuwangju 18楼•23 天前

已解决，更新最新版本

sinazl 19楼•23 天前

已协助用户解决，此贴标签更新，后续若有复现该问题，请更新至最新版本，最新版本已修复该问题

wuwangju 20楼•23 天前

在 uni-app 中，你可以使用 uni-date-picker 组件来实现日期选择器。uni-date-picker 是一个基于原生 picker 组件封装的日期选择器，支持选择年、月、日等。

基本用法

<template>
  <view>
    <uni-date-picker
      v-model="selectedDate"
      @change="onDateChange"
      :start-date="startDate"
      :end-date="endDate"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '', // 选中的日期
      startDate: '2020-01-01', // 可选的最小日期
      endDate: '2025-12-31' // 可选的最大日期
    };
  },
  methods: {
    onDateChange(e) {
      console.log('选中的日期:', e.detail.value);
    }
  }
};
</script>

参数说明

v-model: 绑定的日期值，格式为 YYYY-MM-DD。
@change: 日期选择变化的回调函数，返回选中的日期值。
startDate: 可选的最小日期，格式为 YYYY-MM-DD。
endDate: 可选的最大日期，格式为 YYYY-MM-DD。

自定义日期格式

uni-date-picker 默认返回的日期格式是 YYYY-MM-DD，如果你需要自定义日期格式，可以在 onDateChange 方法中进行处理。

methods: {
  onDateChange(e) {
    const date = new Date(e.detail.value);
    const formattedDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    console.log('格式化后的日期:', formattedDate);
  }
}

其他日期选择器

除了 uni-date-picker，uni-app 还支持使用原生 picker 组件来实现自定义的日期选择器。你可以通过设置 mode 为 date 来实现日期选择。

<template>
  <view>
    <picker mode="date" :value="selectedDate" @change="onDateChange">
      <view>{{ selectedDate }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '2023-10-01'
    };
  },
  methods: {
    onDateChange(e) {
      this.selectedDate = e.detail.value;
      console.log('选中的日期:', this.selectedDate);
    }
  }
};
</script>