专栏首页娱乐心理测试Vue 用Vant实现时间选择器

Vue 用Vant实现时间选择器

1.查看Vant官网https://youzan.github.io/vant/#/zh-CN/datetime-picker

  1. 引入Vant中DatetimePicker组件(全局引入后可直接使用)
import Vue from 'vue';
import { DatetimePicker } from 'vant'
Vue.use(DatetimePicker);
  1. 关键使用代码(结合vant组件Popup的底部弹出层一起使用)
<van-popup v-model="dateShow" position="bottom">
      <van-datetime-picker v-model="currentDate"  type="year-month" @cancel="handleCancel"
        @confirm="handleEndDateConfirm" />
    </van-popup>

export default {
  data() {
    return {
     dateShow: false,
      currentDate: new Date()
    };
  }
}
  1. 效果图
  1. 实现点击确定 和取消的方法
handleCancel () {
      this.dateShow = false;
    },
    //开始时间
    handleEndDateConfirm () {
      this.dateShow = false;
      this.titleTime = dateFormat(this.currentDate, 'yyyy-MM')
    },

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • mint-UI上拉加载下拉刷新和fastclick冲突问题解决

    当我们的Vue项目为了解决IOS设备事件点击卡顿,300ms的延迟的问题,引入了fastclick后,会有很多小的冲突,例如在使用mint-UI实现上拉加载和下...

    honey缘木鱼
  • 轻松生成小程序分享海报

    小程序分享到朋友圈只能使用小程序码海报来实现,生成小程序码的方式有两种,一种是使用后端方式,一种是使用小程序自带的canvas生成;后端的方式开发难度大,由于生...

    honey缘木鱼
  • 孝心

    我相信每一个赤诚忠厚的孩子,都曾在心里向父母许下“孝”的宏愿,相信来日方长,相信水到渠成,相信自己必有成功就衣锦还乡的那一天,可以从容尽孝。

    honey缘木鱼
  • 从Word2Vec到Bert,聊聊词向量

    谈到词向量则必须要从语言模型讲起,传统的统计语言模型是对于给定长度为m的句子,计算其概率分布P(w1, w2, ..., wm),以表示该句子存在的可能性。该概...

    小草AI
  • 从Word2Vec到Bert,聊聊词向量的前世今生(一)

    原文链接:https://zhuanlan.zhihu.com/p/58425003

    zenRRan
  • 电影知识图谱问答(四)| 问句理解及答案推理

    上篇文章《电影知识图谱问答(三)|Apache Jena知识存储及SPARQL知识检索》中讲到如何将处理后的RDF数据存储至Apache Jena数据库之中、如...

    小一
  • linux每日命令(18):whereis命令

    该指令会在特定目录中查找符合条件的文件。这些文件应属于原始代码、二进制文件,或是帮助文件。

    用户1214487
  • 【一问一世界】互联网三巨头BAT的未来三年发展,哪个会更好?

    用户1756920
  • 边缘高亮效果(三)

    逍遥剑客
  • LogMiner的使用

    这里当前日志(current)是: thread 1 sequence 30 thread 2 sequence 25

    Alfred Zhao

扫码关注云+社区

领取腾讯云代金券