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

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. Spring boot+mybatis+thymeleaf 实现登录注册,增删改查

    本文重在实现理解,过滤器,业务,逻辑需求,样式请无视.. 项目结构如下 1.idea新建Spring boot项目,在pom中加上thymeleaf和mybatis支持.pom.xml代码如下 < ...

  2. 将php-fpm添加至service服务

    1. 使用命令:cd /usr/local/php/etc,进入etc目录,编辑 php-fpm.conf 文件,将 ;pid = run/php-fpm.pid  前面的分号去掉 2. 重启php- ...

  3. Intellij IDEA创建git,maven的SpringMVC项目

    Intellij IDEA创建git,maven的SpringMVC项目 原文链接:http://www.cnblogs.com/blog5277/p/8906120.html 原文作者:博客园--曲 ...

  4. [原][工具][windows10安装][0x800F081F]windows 10 如何离线安装.net framework3.5 || 安装出现错误代码0x800F081F时如何解决

    参考解决方案:https://zhidao.baidu.com/question/1896669183365806820.html?fr=iks&word=win10%B0%B2%D7%B0+ ...

  5. webview元素定位

    genymotion 模拟器:android  5.0.0 python 2.7 appium 1.4.16.1 1.app原生元素定位(常用) driver.find_element_by_id(“ ...

  6. eclipse 对 hadoop1.2.1 hdfs 文件操作

    package com.hdfs; import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io ...

  7. 以太坊钱包开发系列4 - 发送Token(代币)

    以太坊去中心化网页钱包开发系列,将从零开始开发出一个可以实际使用的钱包,本系列文章是理论与实战相结合,一共有四篇:创建钱包账号.账号Keystore文件导入导出.展示钱包信息及发起签名交易.发送Tok ...

  8. win2012R2安装net4.6.2失败提示“更新2919355包问题,或者win8.1、win10”的错误

    前言 在客户的服务器电脑安装net4.6,提示安装失败错误,最后顺利成功安装net4.6. 一.错误 1.win2012R2安装net4.6.2失败提示“更新2919355包问题,或者win8.1.w ...

  9. grpc(一)grpc-java之helloworld

    1.参考资料 (1)grpc-java官网QuickStart: https://grpc.io/docs/quickstart/java.html (2)grpc-java的github: http ...

  10. [poj P1141] Brackets Sequence

    [poj P1141] Brackets Sequence Time Limit: 1000MS   Memory Limit: 65536K   Special Judge Description ...