zoukankan      html  css  js  c++  java
  • 使用Vant的DatetimePicker时间选择组件

    安装vant

    # 通过 npm 安装
    npm i vant -S
    

    在main.js中引入vant

    // 引入vant
    import Vant from 'vant'
    import 'vant/lib/index.css'
    
    Vue.use(Vant)
    

    使用DatetimePicker组件

    确认选择的时间数据是需要自己处理的,详见confirmPicker方法

    <template>
      <div class="seller">
        <van-cell
          title="开始时间"
          is-link
          :value-class="className"
          :value="timeValue"
          @click="showPopup" />
        <van-popup v-model="show" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            title="选择时间"
            :loading="isLoadingShow"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            @cancel="show = false"
            @confirm="confirmPicker"
          />
        </van-popup>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Seller',
      data () {
        return {
          msg: '商家页面',
          timeValue: '请选择时间',
          show: false,
          isLoadingShow: true,
          currentDate: new Date(),
          minDate: new Date(),
          maxDate: new Date(2020, 12, 31),
          className: ''
        }
      },
      methods: {
        // 显示弹窗
        showPopup () {
          this.show = true
          this.isLoadingShow = true
          setTimeout(() => {
            this.isLoadingShow = false
          }, 500)
        },
        // 确认选择的时间
        confirmPicker (val) {
          let year = val.getFullYear()
          let month = val.getMonth() + 1
          let day = val.getDate()
          let hour = val.getHours()
          let minute = val.getMinutes()
          if (month >= 1 && month <= 9) { month = `0${month}` }
          if (day >= 1 && day <= 9) { day = `0${day}` }
          if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
          if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
          this.className = 'timeClass'
          this.timeValue = `${year}-${month}-${day} ${hour}:${minute}`
          this.show = false
        },
        // 选项格式化函数
        formatter (type, value) {
          if (type === 'year') {
            return `${value}年`
          } else if (type === 'month') {
            return `${value}月`
          } else if (type === 'day') {
            return `${value}日`
          } else if (type === 'hour') {
            return `${value}时`
          } else if (type === 'minute') {
            return `${value}分`
          } else if (type === 'second') {
            return `${value}秒`
          }
          return value
        }
      }
    }
    </script>
    
    <style lang="stylus" rel="stylesheet/stylus" scoped>
    .seller
      .timeClass {
        color: #333;
      }
    </style>
    
    

    实际效果

    如有错误,请多指教,谢谢!

  • 相关阅读:
    自学python day 10 函数的动态参数、命名空间、作用域
    老男孩 python 自学 打印05 dict 复习总结
    老男孩python 自学day09 函数开始
    今天
    day 03
    eclipse如何安装配置tomcat
    windows上配置maven环境
    如何创建ssh key使电脑和Github关联在一起
    怎么将本地文件上传到github
    使用git工具上传代码到github
  • 原文地址:https://www.cnblogs.com/ykCoder/p/12144972.html
Copyright © 2011-2022 走看看