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
        },
     }
    }

 

posted @ 2019-12-04 16:03  此夏_唯美  阅读(4518)  评论(0)  编辑  收藏  举报