解决微信小程序vant weapp组件库时间选择器只显示年year的问题 vant weapp版本1.10.5

当今网上十篇文章九个抄,抄的还都是远古文章,完全不适用现在的版本,故于2023.3.10日,出一篇现vant weapp版本1.10.5的时间选择器只显示year模式的需求,解决官方无法显示只带有年份year的时间选择器问题

找到时间选择器文件,修改datetime-picker/index.js源码

1. 先让面板支持只选择年份

...

var result = [
    {
        type: 'year',
        range: [minYear, maxYear],
    },
    {
        type: 'month',
        range: [minMonth, maxMonth],
    },
    {
        type: 'day',
        range: [minDate, maxDate],
    },
    {
        type: 'hour',
        range: [minHour, maxHour],
    },
    {
        type: 'minute',
        range: [minMinute, maxMinute],
    },
];

if (data.type === 'date')
    result.splice(3, 2);

if (data.type === 'year-month')
    result.splice(2, 3);

// 在此处添加代码,使其vant时间选择器支持只显示年份
// 这里是先让面板支持只选择年份
if (data.type === 'year')
    result.splice(1, 4);

return result;

...

2. 使默认时间为该年的一月一日

...

var year = getTrueValue(values[0]);
var month = getTrueValue(values[1]);
var maxDate = getMonthEndDay(year, month);
var date = getTrueValue(values[2]);

if (data.type === 'year-month') {
    date = 1;
}

// 在此处添加代码,使其vant时间选择器支持只显示年份
// 默认起始为该年的一月一日
if (data.type === 'year') {
    month = 1
    date = 1;
}

...

3. 选择year模式时,只该有year的数据源,否则会报错 (setColumnValue: 对应列不存在)

...

// 源码中此处values默认是年月,所以当默认type修改为year时,也得将此处的values数组修改为只有year的
values = [
    formatter('year', "".concat(date.getFullYear())),
    formatter('month', padZero(date.getMonth() + 1)),
];

if (type === 'date') {
    values.push(formatter('day', padZero(date.getDate())));
}

if (type === 'datetime') {
    values.push(formatter('day', padZero(date.getDate())), formatter('hour', padZero(date.getHours())), formatter('minute', padZero(date.getMinutes())));
}

// 在此处添加代码,使其vant时间选择器支持只显示年份
// 选择year模式时,只该有year的数据源,否则会报错 (setColumnValue: 对应列不存在)
if (type === 'year') {
    values = [
        formatter('year', "".concat(date.getFullYear())),
    ];
}

...

修改此三处源码即可

适用于 "@vant/weapp": "^1.10.5" ,不同版本可能源码不一样,大致逻辑是这三步

猜你喜欢

转载自blog.csdn.net/qq_48702470/article/details/129439411
今日推荐