uView的DatetimePicker时间选择器年份排序
本菜鸟使用的是uView 2.0的版本,个人感觉没有1.0的版本好用(纯属个人见解),最近使用发现这个时间选择器的年份选项都是从小到大的年份显示。
- 原组件的示例:
<u-datetime-picker
:show="showEnd"
mode="date"
:minDate="15875248"
......
></u-datetime-picker>
此处省略大部分代码=_=
在标签中添加一个自定义参数
:dateSort=“dateSort”
示例:
<u-datetime-picker
:show="showEnd"
mode="date"
:minDate="15875248"
:dateSort="dateSort"
......
></u-datetime-picker>
用Boolean类型true和false控制年份大小顺序
export default {
data(){
return {
dateSort: true,
}
}
}
- 接下来就是修改组件部分
在 “uni_modules/uview-ui/components” 路径下找到 u-datetime-picker修改下面的两个文件“props.js”和“u-datetime-picker.vue”
1.props.js 文件添加以下内容
export default {
props: {
// 是否打开组件
dateSort: {
type: Boolean,
default: uni.$u.props.datetimePicker.dateSort
},
······
}
}
2.u-datetime-picker.vue修改如下
修改部分大概在87行“computed”下添加“this.dateSort”
computed: {
// 如果以下这些变量发生了变化,意味着需要重新初始化各列的值
propsChange() {
return [this.mode,....., this.dateSort]
}
},
以及修改“getOriginColumns”方法下,大概213行,
// 修改前
let value = range[0] + index
// 修改后
let value = (type == 'year' && this.dateSort) ? range[1] - index : range[0] + index
// 该处完整内容
getOriginColumns() {
// 生成各列的值
const results = this.getRanges().map(({ type, range }) => {
let values = times(range[1] - range[0] + 1, (index) => {
let value = (type == 'year' && this.dateSort) ? range[1] - index : range[0] + index
value = type === 'year' ? `${value}` : uni.$u.padZero(value)
return value
})
// 进行过滤
if (this.filter) {
values = this.filter(type, values)
}
return { type, values }
})
return results
},
通过修改 参数“dateSort”来控制年份大小顺序
1. dateSort: true 为大到小
2. dateSort: false 为小到大(也就是组件原本的样子)
然后就可以正常显示啦,下面是修改后的样子