首先页面引入需要使用的组件

import { DatetimePicker,Toast,Popup,Picker  } from 'mint-ui';

methods部分

openPicker () {
this.$refs.picker.open()
},
handleConfirm (data) {
this.birthday = getDate(data); //获取的时间为时间戳,getdata是自己写的一个转换时间的方法
},

data部分

birthday:"",  //出生日期
startDate: new Date('1968-01-01'),

template页面部分  

<div class="birth">
<span>出生日期</span>
<div @click="openPicker">{{birthday}}</div>
</div>
<div class="datePicker">
<mt-datetime-picker
type="date"
ref="picker"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日"
@confirm="handleConfirm"
:startDate="startDate"
>
</mt-datetime-picker>
</div>

  

VUE2中使用mint-ui,日期选择picker的更多相关文章

  1. asp.net中的时间日期选择控件

    asp.net中的时间日期选择控件 Posted on 2008-07-17 17:37 飛雪飄寒 阅读(22922) 评论(6) 编辑 收藏     在系统中经常需要进行时间日期选择(比如查询时间范 ...

  2. element-ui日期组件DatePicker设置日期选择范围Picker Options

    element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...

  3. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  4. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  5. 支付宝小程序日期选择组件datePicker封装

    github 地址 https://github.com/iocool/antminDatePicker 最近在做支付宝小程序(以下简称小程序)开发,发现小程序的日期选择组件很不好用,比如安卓和IOS ...

  6. JQuery好用的日期选择控件 DatePicker

    近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...

  7. 页面日期选择控件--jquery ui datepicker 插件

    日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...

  8. 模块:(日期选择)jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器

    一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...

  9. vuetify,vux,Mint UI 等框架的选择

    vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nu ...

随机推荐

  1. 20175312 2018-2019-2 《Java程序设计》第3周学习总结

    20175312 2018-2019-2 <Java程序设计>第3周学习总结 教材学习内容总结 已依照蓝墨云班课的要求完成了第四章的学习,主要的学习渠道是PPT,和书的课后习题. 总结如下 ...

  2. (转)A curated list of Artificial Intelligence (AI) courses, books, video lectures and papers

    A curated list of Artificial Intelligence (AI) courses, books, video lectures and papers. Updated 20 ...

  3. Learning-Python【26】:反射及内置方法

    反射的概念 可以用字符串的方式去访问对象的属性,调用对象的方法(但是不能去访问方法),Python 中一切皆对象,都可以使用反射. 反射有四种方法: hasattr:hasattr(object, n ...

  4. vue的环境配置

    在vue越来越火的情况下,本人也开始加入到大军当中. 首先,列举下我们需要的东西: node.js 环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像 安装node.j ...

  5. 本地构建:Gulp

    Gulp中文网:https://www.gulpjs.com.cn/ Gulp英文网:https://gulpjs.com/ Gulp:工作流程自动化+强化 (一)安装初始化 (二)基础API及插件 ...

  6. MVC 深入讲解Routing _路由规则【八】

    一.客户端=>控制器 在项目中我们引用了system.web.routing, 如果第一个匹配成功了,那么后面的都不会再匹配. 1. routing的作用: 确定colltroller,确定ac ...

  7. MySQL中case then用法

    1.查询图书价格,若价格为null,则显示unknown,若价格为10到20, 则显示10 to 20 SELECT price, CASE WHEN price='null' THEN 'UnKno ...

  8. scrapy中XMLFeedSpider

    爬取案例: 目标网站: url = 'http://www.chinanews.com/rss/scroll-news.xml' 页面特点: 先创建爬虫项目: 也可以查看爬虫类: 创建xmlFeed ...

  9. html5(三)

    body{ text-align:center;} #mainbox { display:block; width:500px; margin:50px auto; padding:15px; tex ...

  10. Python3+mitmproxy安装使用教程(Windows)

    一.安装 1.1 安装mitmproxy 直接使用pip安装即可 pip install mitmproxy pip本质上会一是安装mitmproxy库的相关代码,二是安装mitmproxy.exe/ ...