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：

<template>

<div id="pickerTime">

<div v-show="showtime">

<div class="shadow" @click="hide"></div>

<div class="datatime" >

<div class="sure">

<div @click="unsure">取消</div>

<div @click="sure">确认</div>

</div>

<mt-picker class="onepick" @change="onValuesChange1" :slots="slots" :visible-item-count="3"></mt-picker>

<mt-picker class="twopick" @change="onValuesChange2" :slots="slots" :visible-item-count="3"></mt-picker>

</div>

</div>

</div>

</template>

<script>

import { Toast } from 'mint-ui'

import demo from "@/utils/demo.js"

const slotsday = demo.slotsday

const slotsmouth = demo.slotsmouth

console.log(slotsday)

console.log(slotsmouth)

export default {

name:'pickerTime',

props:["status","mouthorday"],

data(){

return{

slotsday:slotsday,

showtime:false,

changeDate:{

startTime:["2009年","1月","1日"],

finishTime:["2009年","1月","1日"]

},

slots:[]

}

},

mounted(){

if(this.mouthorday == "mouth"){

this.slots = slotsmouth

}else{

this.slots = slotsday

}

},

watch:{

status(){

this.showtime = !this.showtime

}

},

methods:{

hide(){

this.showtime = false

},

unsure(){

this.showtime = false

},

sure(){

if(this.mouthorday == "mouth"){

//判断时间段选择是否正确

let myyear1 = this.changeDate.startTime[0].slice(0,4)

let myyear2 = this.changeDate.finishTime[0].slice(0,4)

let mymouth1 = this.changeDate.startTime[1].slice(0,this.changeDate.startTime[1].length-1)

let mymouth2 = this.changeDate.finishTime[1].slice(0,this.changeDate.finishTime[1].length-1)

if(myyear1>myyear2){

toast("请选择正确的时间段")

return

}

if(myyear1 == myyear2 && mymouth1>mymouth2){

Toast("请选择正确的时间段")

return

}

}else{

//判断时间段选择是否正确

console.log(this.changeDate)

let myyear1 = this.changeDate.startTime[0].slice(0,4)

let myyear2 = this.changeDate.finishTime[0].slice(0,4)

let mymouth1 = this.changeDate.startTime[1].slice(0,this.changeDate.startTime[1].length-1)

let mymouth2 = this.changeDate.finishTime[1].slice(0,this.changeDate.finishTime[1].length-1)

let myday1 = this.changeDate.startTime[2].slice(0,this.changeDate.startTime[2].length-1)

let myday2 = this.changeDate.finishTime[2].slice(0,this.changeDate.finishTime[2].length-1)

if(myyear1>myyear2){

Toast("请选择正确的时间段")

return

}

if(myyear1 == myyear2 && mymouth1>mymouth2){

Toast("请选择正确的时间段")

return

}

if(myyear1 == myyear2 && mymouth1 == mymouth2 && myday1>myday2){

Toast("请选择正确的时间段")

return

}

}

 

this.showtime = false

this.$emit('childArr', this.changeDate)

},

onValuesChange1(picker,values){

if(values.length){

this.changeDate.startTime = values

}

},

onValuesChange2(picker,values){

if(values.length){

this.changeDate.finishTime = values

}

},

}

}

</script>

<style>

#pickerTime .onepick{

position: absolute;

top: 0.7rem;

width: 100%;

background: #fff;

}

#pickerTime .twopick{

position: absolute;

top: 2.7rem;

width: 100%;

background: #fff;

}

#pickerTime .picker-item{

text-align:center;

opacity: 0.3;

transform: rotateX(50deg)

}

#pickerTime .picker-item.picker-selected{

opacity: 1;

transform: rotateX(0deg)

}

#pickerTime .datatime{

height:4.7rem;

position: fixed;;

bottom:0;

width:100%;

left:0;

z-index:667;

}

#pickerTime .sure{

height:0.7rem;

width:100%;

padding:0 0.32rem;

display:flex;

justify-content: space-between;

align-items: center;

font-size:0.26rem;

background:#fff;

box-sizing: border-box;

color:rgba(76,84,93,1);

text-align:left;

line-height:0.5rem;

}

#pickerTime .sure>div{

height:100%;

width:30%;

line-height:0.7rem;

}

#pickerTime .sure>div:nth-of-type(2){

color:rgba(0,175,213,1);

text-align:right;

}

#pickerTime .shadow{

height:100vh;

width:100%;

background:rgba(0,0,0,0.2);

position:fixed;

top:0;

left:0;

z-index:666;

}

</style>

 

 

引入和使用

status代表是否显示  主页面的默认值是false  点击某个按钮触发  this.status = !this.status

changeDate代表这个组件返回过来值的接受参数

changeDate(val){

    console.log(val)//val是选择完后传过来的值  分为开始时间和结束时间   需要自己处理

}

如果changeDate这个方法重复可能会报错  自行换名字

 

这次更新新加了默认时间和当前日期一样（限制   现在年份固定到今年）

 

效果图：

 

最后

以上就是苹果钻石为你收集整理的mintui 自定义选择时间段（picker）的全部内容，希望文章能够帮你解决mintui 自定义选择时间段（picker）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。