基于vue+vant实现一个移动端的时间选择器？

图片说明

1、展示当前时间段之后的时间，10分钟一个间隔

2、时间默认9-12与13-18点时间段可以选择

class="satisfactionAddClose">

class="satisfactionAddCloseTitle">
本周关闭率

v-model="currentRate2"
:rate="didRate2"
:stroke-width="100"
:color="gradientColor2"
size="100px"
layer-color="#ccc"
text="" />

:class="Number(weekCloseRate).toFixed(2)>1000?shielding2:shielding">

{{Number(weekCloseRate).toFixed(2)}}
%

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>DatetimePicker</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.1/lib/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.1/lib/vant.min.js"></script>
</head>
<body>
<div id="app">
<van-datetime-picker v-model="currentDate" type="datetime" :filter="filter" :min-date="minDate" :max-date="maxDate" :formatter="formatter" />
</div>
</body>

<script>

var currentDate=new Date();

var date=new Date();
var minutes=date.getMinutes();
var mod=minutes%10;
if(mod!=0){
  date.setMinutes(minutes-mod+10);        
}   

currentDate=date;

var app = new Vue({
el: '#app',
data() {
    return {
      minDate: new Date(2000, 0, 1),
     maxDate: new Date(2050, 11, 31),
      currentDate:currentDate
    };
},
methods: {
    filter(type, options) {
      if (type === 'minute') {
        return options.filter((option) => option % 10 === 0);
      }
      else if(type==='hour'){
        return options.filter((option) => (option>=9 && option<=12) ||(option>=13 && option<=18));
      }
      return options;
    },
    formatter(type, val) {      
      if (type === 'month') {
        return parseInt(val) + '月';
      }
      else if (type === 'day') {    
        return parseInt(val) + '日';
      }
      else if (type === 'hour') {
        return parseInt(val) + '点';
      }
      else if (type === 'minute') {
        return parseInt(val) + '分';
      }
      else if(type==='year'){       
        return '';//隐藏
      }
      return val;
    }   
},
created() {
},
})
</script>
</html>

目前官网提供的示例并不支持星期的显示，需要额外处理

https://youzan.github.io/vant/#/zh-CN/datetime-picker

https://download.csdn.net/download/weixin_39841848/11524619
https://blog.csdn.net/qq_39897978/article/details/104180451