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

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. POJ3090 Visible Lattice Points

    /* * POJ3090 Visible Lattice Points * 欧拉函数 */ #include<cstdio> using namespace std; int C,N; / ...

  2. Qt 从菜单栏打开文件

    Qt从菜单栏的下拉菜单选择文件 构造函数中设置打开动作信息 //打开文件 m_menu = ui.menu; // m_menu->menuAction = new QAction(QIcon( ...

  3. DateHelper

    public static class DateHelp { /// <summary> /// 获取当前日期是该月的第几周 /// </summary> /// <pa ...

  4. 软工实践练习一 关于GIT的使用

    在Github上的操作部分: 1.在Github网站上进行注册.https://github.com/ 2.创建小组Organization. 3.将代码库https://github.com/sef ...

  5. 《Visual C#从入门到精通》第四章使用复合赋值和循环语句——读书笔记

    第1章 使用复合赋值和循环语句 4.1 使用复合赋值操作符 任何算术操作符都可以像这样与赋值操作符合并,从而获得复合赋值操作符. 不要这样写 要这样写 Variable=Variable*number ...

  6. 第 8 章 容器网络 - 062 - 如何使用 flannel host-gw backend?

    flannel host-gw backend flannel 支持多种 backend:(1)vxlan backend:(2)host-gw: 与 vxlan 不同,host-gw 不会封装数据包 ...

  7. PHP7&Swoole源码安装

    PHP7源码安装 1.获取PHP http://php.net/downloads.php 2.解压 tar -xjvf php-7 (根据压缩包的格式修改命令 如果时间戳有问题 -m) 3. ./c ...

  8. 关于AndroidStudio 经常弹出TortoiseSVN 同步的解决办法

    我的AndroidStudio在使用时是从TortoiseSVN的文件夹下直接打开的 但是由于svn自己的特点每改一个文件就要跳出来一个svn的对话框 体验极其难受!砍人的心都有了 网上的解决办法都是 ...

  9. 最全面的移动APP测试点

    随着互联网,大数据时代的不断推进,演化.移动开发领域得到普遍普及,APP开发如潮水般涌现.下面我将详细介绍app的测试点: 首先我们先熟悉app测试基本流程: 1.1流程图 1.2测试周期 测试周期可 ...

  10. CRM SALES ORDER ADD EEWB SEARCH FIELD

    1.找到对应的查询结构: T-code:GENIL_MODEL_BROWSER Component Set 输入'ONEORDER' 点击DISPLAY 展开Dynamic Query Object, ...