mint-ui 时间插件使用及获取选择值的方法

如下所示：

<div > {{pickerValue}}</div>
<mt-datetime-picker
 ref="picker" 每一个都要填上这一条open
 type="time"
 @confirm="handleConfirm" 设置点击确定
 v-model="pickerValue">
</mt-datetime-picker>
data () {
 return {
 pickerValue:null, 定义
methods:{
openPicker() {
 this.$refs.picker.open();设置开始
 },
handleConfirm(){ console.log(this.pickerValue) ;获取值},

转换小时

formatDate(date) {
 const y = date.getFullYear()
 let m = date.getMonth() + 1
 m = m < 10 ? '0' + m : m
 let d = date.getDate()
 d = d < 10 ? ('0' + d) : d
 return y + ' ' + m + ' ' + d
},
handleConfirm(){
 let a = this.pickerValue
 // console.log(a.split(" ")) ;
 this.zheng=this.formatDate(this.$refs.picker.value)
 console.log(this.formatDate(this.$refs.picker.value))
 // console.log(this.value) ;
},

设置当前日期为初始日期

<mt-datetime-picker :startDate="startDate"</mt-datetime-picker>

data(){
 return{
  startDate: new Date(),
 }
}

设置默认值

this.zheng=new Date().getFullYear()+'年'+new Date().getMonth()+1+'月'+new Date().getDate()+'日'

以上这篇mint-ui 时间插件使用及获取选择值的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue.js中mint-ui框架的使用方法
  • 基于vuejs+webpack的日期选择插件
  • 在vue项目中安装使用Mint-UI的方法
赞 (0)

相关推荐

  • 在vue项目中安装使用Mint-UI的方法

    在vue项目中安装使用Mint-UI的方法

    一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档: http://mint-ui.github.io/#!/zh-cn Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的

  • vue.js中mint-ui框架的使用方法

    vue.js中mint-ui框架的使用方法

    本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下 1.安装vue2.0的mint-ui框架 npm install mint-ui -save 2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件,里面写入mint-ui的头部组件 <template> <mt-header

  • 基于vuejs+webpack的日期选择插件

    基于vuejs+webpack的日期选择插件

    基于vuejs+webpack环境使用的日期选择插件,希望大家喜欢. 支持单选和多选日期 支持限定开始和结束日期范围选择. 支持小时分钟 需要引入fontawesome.io 的图标库. Options :show 是否显示 :type date|datetime :value 默认值 :begin 可选开始时间 :end 可选结束时间 :x 显示x坐标 :y 显示y坐标 :range 是否多选 test.vue <template> <input type="text&quo

  • mint-ui 时间插件使用及获取选择值的方法

    如下所示: <div > {{pickerValue}}</div> <mt-datetime-picker ref="picker" 每一个都要填上这一条open type="time" @confirm="handleConfirm" 设置点击确定 v-model="pickerValue"> </mt-datetime-picker> data () { return {

  • jQuery获取复选框被选中数量及判断选择值的方法详解

    本文实例讲述了jQuery获取复选框被选中数量及判断选择值的方法.分享给大家供大家参考,具体如下: 获取复选框被选中值 <input type="button" id="btn5" value="获得选中的所有值"> <input type="text" name="dd" id="dd" size="50" /> $("#btn5&

  • JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

    JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

    本文实例讲述了JS实现兼容各种浏览器的获取选择文本的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" con

  • jQuery+ajax+asp.net获取Json值的方法

    本文实例讲述了jQuery+ajax+asp.net获取Json值的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQueryAjaxJson取值示例</title> <script type="text/javascript" src="Scripts/jquery-1.4.4.min.js&

  • vue树形结构获取键值的方法示例

    本文介绍了vue树形结构获取键值的方法示例,分享给大家,具体如下: 把键值文件放入 引入控件 import { getTypeValue } from '@/api/dict/dictValue/index'; 点击搜索,打开弹窗 <el-form-item label="机构名称" placeholder="请选择机构" prop="orgName"> <el-input readonly type="text&qu

  • js获取Get值的方法

    本文实例讲述了js获取Get值的方法.分享给大家供大家参考,具体如下: function getUrlParam(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r!=null) return u

  • JavaScript使用encodeURI()和decodeURI()获取字符串值的方法

    JavaScript使用encodeURI()和decodeURI()获取字符串值的方法

    本文实例讲述了JavaScript使用encodeURI()和decodeURI()获取字符串值的方法.分享给大家供大家参考.具体如下: JavaScript使用encodeURI()和decodeURI()获取字符串值,不能就是地址栏显示的字串,以前经常在网上见到有人问此问题,无意在网上发现,不知是不是您想要的,先看看效果吧. 先来看看运行效果: 具体代码如下: <html> <head> <meta http-equiv="Content-Type"

  • JavaScript和JQuery获取DIV值的方法示例

    JavaScript和JQuery获取DIV值的方法示例

    本文实例讲述了JavaScript和JQuery获取DIV值的方法.分享给大家供大家参考,具体如下: 1.示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • js获取checkbox值的方法

    本文实例讲述了js获取checkbox值的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>js</title> </head> <script language="javascrip

  • javascript获取select值的方法分析

    本文实例讲述了javascript获取select值的方法.分享给大家供大家参考.具体分析如下: 1. 获取显示的汉字 复制代码 代码如下: document.getElementById("bigclass").options[window.document.getElementById("bigclass").selectedIndex].text 2. 获取数据库中的id 复制代码 代码如下: window.document.getElementById(&q

随机推荐