mintui 自定义选择时间段（picker）
//自定义数据可以自己设定（暂时只提供年月选择和年月日选择）
图例：
mockjs：
const nowmonth=()=>{
let date = new Date()
let month = date.getMonth()
return month
}
const nowday=()=>{
let date = new Date()
let day = date.getDate()
return day-1
}
const yearList=()=>{
let date = new Date()
let year = date.getFullYear()
let resarr = []
for(let i=year;i>year-20;i--){
resarr.push(i+"年")
}
return resarr
}
const method={
slotsday:
[
{
flex: 1,
values: yearList(),
className: 'year',
textAlign: 'left'
}, {
flex: 1,
defaultIndex:nowmonth(),
values: ['1月', '2月', '3月', '4月', '5月','6月','7月','8月','9月','10月','11月','12月'],
className: 'mouth',
textAlign: 'mid'
}, {
flex: 1,
defaultIndex:nowday(),
values: ["1日", "2日", "3日", "4日", "5日", "6日", "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日", "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日", "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日"],
className: 'day',
textAlign: 'right'
}
],
slotsmouth:
[
{
flex: 1,
values: ['2009年', '2010年', '2011年', '2012年', '2013年','2014年','2015年','2016年','2017年','2018年','2019年','2020年','2021年','2022年','2023年','2024年','2025年','2026年','2027年','2028年','2029年'],
className: 'year',
textAlign: 'left'
}, {
flex: 1,
values: ['1月', '2月', '3月', '4月', '5月','6月','7月','8月','9月','10月','11月','12月'],
className: 'mouth',
textAlign: 'mid'
}
]
}
export default method
//封装的模块
picker：
引入和使用
status代表是否显示 主页面的默认值是false 点击某个按钮触发 this.status = !this.status
changeDate代表这个组件返回过来值的接受参数
changeDate(val){
console.log(val)//val是选择完后传过来的值 分为开始时间和结束时间 需要自己处理
}
如果changeDate这个方法重复可能会报错 自行换名字
这次更新新加了默认时间和当前日期一样（限制 现在年份固定到今年）
效果图：