uView中的DatetimePicker时间选择器年份排序

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 为小到大（也就是组件原本的样子）

然后就可以正常显示啦，下面是修改后的样子