uni-app 下 picker mode="date" 时若 start/end 传入的不是2位数月日则 start/end 无效

uni-app 下 picker mode=“date” 时若 start/end 传入的不是2位数月日则 start/end 无效

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win10

HBuilderX类型：正式

HBuilderX版本号：3.2.16

手机系统：Android

手机系统版本号：Android 10

手机厂商：华为

手机机型：荣耀

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```html
<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <picker class="picker" mode="date" :start="dateRange.min" :end="dateRange.max" fields="day" v-model="birthday" @change="bindDateChange">  
                <text class="label">{{birthday}}</text>  
            </picker>  
            <text>{{dateRange.min}}至{{dateRange.max}}</text>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            title: 'Hello',  
            birthday: '2002-03-04',  
            dateRange: {  
                min: '1990-01-01',  
                max: '2005-5-06'  
            },  
        }  
    },  
    onLoad() {  
    },  
    methods: {  
        bindDateChange(e) {  
            uni.showModal({  
                content: e.detail.value  
            })  
        }  
    }  
}  
</script>  

<style>  
.content {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
}  

.logo {  
    height: 200rpx;  
    width: 200rpx;  
    margin-top: 200rpx;  
    margin-left: auto;  
    margin-right: auto;  
    margin-bottom: 50rpx;  
}  

.text-area {  
    display: flex;  
    justify-content: center;  
}  

.title {  
    font-size: 36rpx;  
    color: #8f8f94;  
}  
</style>

操作步骤： 如上代码所示

预期结果： 无论1或2位都应该允许。

实际结果： 1位数月或日期，无效。


更多关于uni-app 下 picker mode="date" 时若 start/end 传入的不是2位数月日则 start/end 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

忘记说一点了：fields="day"如果不加这个是正常的，只不过这会显示原生选择器，不好使也不好看。

更多关于uni-app 下 picker mode="date" 时若 start/end 传入的不是2位数月日则 start/end 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


刚发现另一个问题：fields="day"时最小日期只能是1960年？

这个问题确实是 uni-app 中 picker 组件的一个已知限制。根据官方文档和实际测试，picker 组件的 mode="date" 在设置 start 和 end 属性时，要求日期格式必须严格遵守 YYYY-MM-DD 的格式，其中月份和日期必须是两位数（不足两位需要补零）。

在你的代码中，dateRange.max 的值是 '2005-5-06'，这里的月份 5 是单数字，这会导致 end 日期限制失效。同样，如果日期部分也是单数字（比如 '2005-05-6'），也会出现同样的问题。

解决方案： 你需要确保传入的日期字符串格式完全规范。可以通过一个简单的处理函数来格式化日期：

// 在数据初始化或赋值时进行格式化
formatDate(dateStr) {
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
}

然后将你的 dateRange 改为：

data() {
    return {
        dateRange: {
            min: this.formatDate('1990-01-01'), // 已经是标准格式
            max: this.formatDate('2005-5-06')   // 会被格式化为 '2005-05-06'
        }
    }
}

或者直接在数据中写入标准格式：

dateRange: {
    min: '1990-01-01',
    max: '2005-05-06'  // 注意月份补零
}
回到顶部