zoukankan      html  css  js  c++  java
  • Vant-Ui 时间选择器怎么获取到选中的数据

                    

       欢迎扫码加群,一起讨论,共同学习成长!

     

    获得日期格式为:2019年12月04日 05时04分

     1 <van-cell :value="dataTime" is-link title="时间" @click="showDataTime"/>
     2     <van-action-sheet v-model="showTime">
     3       <van-datetime-picker
     4         v-model="currentDate"
     5         :formatter="formatter"
     6         type="datetime"
     7         @confirm="confirm"
     8         @cancel="cancel"
     9       />
    10     </van-action-sheet>
    11     export default {
    12       data() {
    13         return {
    14         dataTime: '请选择时间',
    15         currentDate: new Date(),
    16          }
    17         },
    18      methods: {
    19       // 处理控件显示的时间格式
    20     formatter(type, value) {
    21       // 格式化选择器日期
    22       if (type === 'year') {
    23         return `${value}年`
    24       } else if (type === 'month') {
    25         return `${value}月`
    26       } else if (type === 'day') {
    27         return `${value}日`
    28       } else if (type === 'hour') {
    29         return `${value}时`
    30       } else if (type === 'minute') {
    31         return `${value}分`
    32       }
    33       return value
    34     },
    35     confirm(d) {
    36       this.showTime = false
    37       this.dataTime =
    38         d.getFullYear() +
    39         '年' +
    40         (Number(d.getMonth()) + 1) +
    41         '月' +
    42         d.getDate() +
    43         '日 ' +
    44         d.getHours() +
    45         '时' +
    46         d.getMinutes() +
    47         '分'
    48       console.log(this.dataTime)
    49       // this.starttime1 = new Date(this.currentDate).getTime() / 1000
    50     },
    51         cancel() {
    52           this.showTime = false
    53         },
    54         showDataTime() {
    55           this.showTime = true
    56         },
    57      }
    58     }

    时间格式:2019-12-04 05:05

    <van-cell :value="dataTime" is-link title="时间" @click="showDataTime"/>
        <van-action-sheet v-model="showTime" title="选择时间" confirm-button-text="保存">
          <van-datetime-picker
            v-model="currentDate"
            :formatter="formatter"
            type="datetime"
            @confirm="confirm"
            @cancel="cancel"
          />
        </van-action-sheet>
        export default {
          data() {
            return {
            dataTime: '请选择时间',
            currentDate: new Date(),
             }
            },
         methods: {
            // 时间戳转为日期
            formatDate: function(d) {
              return d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate()) + '-' + this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds())
            },
            p(s) {
              return s < 10 ? '0' + s : s
            },
            confirm(d) {
              this.dataTime = this.formatDate(d)
              this.showTime = false
              console.log(this.dataTime) // 打印出了时间
            },
            cancel() {
              this.showTime = false
            },
            showDataTime() {
              this.showTime = true
            },
         }
        }
  • 相关阅读:
    记一次在Windows10桌面环境搭建Jekins的吐血经历
    Windows系统下的输入法选择
    Linux后台进程启停脚本模板
    crontab采坑总结
    编程软件仓库集合
    CentOS7安装Chrome及驱动
    不错的“淘宝”网站
    软件下载网站集合
    在线API集合
    在线教程集合
  • 原文地址:https://www.cnblogs.com/CinderellaStory/p/11983475.html
Copyright © 2011-2022 走看看