supperi
左眼皮一直跳
采纳率100%
2020-08-17 14:42

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

100

图片说明

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

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

  • 点赞
  • 收藏
  • 复制链接分享

3条回答

  • ai_lan_lan ai_lan_lan 6月前

    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)}}
    %




    点赞 评论 复制链接分享
  • caozhy 从今以后生命中的每一秒都属于我爱的人 9月前
  • jingluan666 jingluan666 9月前
    <!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

    点赞 评论 复制链接分享

相关推荐