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

这篇具有很好参考价值的文章主要介绍了解决微信小程序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" ，不同版本可能源码不一样，大致逻辑是这三步文章来源地址https://www.toymoban.com/news/detail-652696.html

到了这里，关于解决微信小程序vant weapp组件库时间选择器只显示年year的问题 vant weapp版本1.10.5的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！