前言：工作中用到 vue+element ui 的前端框架，需要选择年月日时分，但element ui官网demo有没有，所以记录一下。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9304510.html

网站地址：我的个人vue+element ui demo网站

github地址：yuleGH github

代码如下

这里 hh:mm 指的是12小时制，HH:mm 指的是24小时制。

<html>

<head>

    <title>测试</title>

    <!-- 引入样式 -->

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>

<div id="app">

    <el-date-picker

            v-model="value1"

            type="datetime"

            format="yyyy-MM-dd hh:mm"

            value-format="yyyy-MM-dd hh:mm"

            placeholder="选择日期时间">

    </el-date-picker>

    <el-button type="primary" @click="clickBtn">打印选择的时间</el-button>

</div>

<!-- 引入组件库 -->

<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({

        el: "#app",

        data: {

            value1: ""

        },

        methods: {

            clickBtn: function () {

                console.log(this.value1);

            }

        }

    });

</script>

</body>

</html>

　　写这个 demo 时遇到一个问题，页面报错（是 element ui index.js 报出的错）：

　　查了半天，才发现是 vue 和 element ui 的 js 引用顺序写反了。。。

　　所以，一定要先引用 vue.js，因为 element ui 毕竟是基于 vue 的。

转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9304510.html

vue+element ui 的时间控件选择 年月日时分的更多相关文章

  1. Element ui tree树形控件获取当前节点id和父节点id

    低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...

  2. vue小荔枝，时间控件，动态按月份增减。

    依赖框架有jq,bootstrap3.0,vue2.0; 自封装(搬运)时间控件,bootstrap-datetimepicker.资源下载:看这里 需求: 默认本地时间,相隔一个月 四个选项:1一个 ...

  3. vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用

    其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...

  4. jquery UI datepicker时间控件的使用

    参考: http://api.jqueryui.com/datepicker/#method-show 英文 http://www.helloweba.com/view-blog-168.html 中 ...

  5. Element ui tree树形控件获取父节点id

    Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...

  6. layui时间控件选择时间范围

    layui.use([ 'laydate'], function(){ var $ = layui.$; var laydate = layui.laydate; var max = ${nowYea ...

  7. jquery 的日期时间控件（年月日时分秒）

    <!-- import package --> <script type="text/javascript" src="JS/jquery.js&quo ...

  8. 基于 vue+element ui 的cdn网站（多页面，都是各种demo）

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  9. element ui 时间控件 多个日期

    前言:工作中用到 vue+element ui 的前端框架,需要使用时间控件来选择多个日期,已月日的形式,且有默认值,所以记录一下.转载请注明出处:https://www.cnblogs.com/yu ...

随机推荐

  1. poj1511

    Invitation Cards Time Limit: 8000MS   Memory Limit: 262144K Total Submissions: 25099   Accepted: 829 ...

  2. 使用hex编码绕过主机卫士IIS版本继续注入

    本文作者:非主流 测试文件的源码如下: 我们先直接加上单引号试试: http://192.168.0.20/conn.asp?id=1%27 很好,没有报错.那我们继续,and 1=1 和and 1= ...

  3. node 利用http和cheerio编写简易爬虫

    首先cnpm init创建一个package.json 引入cheerio模块 cnpm install --save cheerio 然后开始编写代码 let cheerio = require(' ...

  4. 使用图片预加载，解决断网后无法从后台获取提示网络异常的logo图片的问题

    项目中有需求,断网后,显示小提示窗,里面包含网络异常提示语和异常小logo图片. 在实际操作时,遇到,断网后,无法从后台获取异常小logo图片. 我是才用图片预加载的方法解决这个问题的,解决方法如下: ...

  5. SELECT列表中的标量子查询

    发现了一种表连接新的写法,以前还没有这样写过或者见别人写过.跟同学聊天他们公司却很多人这样写,看来真的要学学sql了 表 CREATE TABLE `t_book` ( `FId` ) NOT NUL ...

  6. windows 64位 下 安装 tomcat

    tomcat 版本 windows 64位 .zip apache-tomcat-7.0.42.zip 注意: 1. 安装目录不得有 空格 或 中文字符 2. 然后,在系统环境变量下,新建一个变量: ...

  7. Python 基础语法——数字和表达式（包含数学上的一些函数）

    >>> 2+2 4 >>> 1/2 0 >>> 1.0/2.0 0.5 >>> 1/2.0 0.5 >>> 1 ...

  8. 关于符号Symbol第一篇

    Symbol类的一个实例代表一个符号.对于语法树来说,并不是每个节点都有一个符号实例.下面列举了哪些语法树节点具有符号的引用,如下表格: 其中JCNewClass.JCAssignOp.JCUnary ...

  9. js with 语句的用法

    with 语句 为语句设定默认对象. with (object)    statements 参数 object 新的默认对象. statements 一个或多个语句,object 是该语句的默认对象 ...

  10. ES6-Array

    /* * 数组解构赋值: * ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这种被称为解构. * 示例如下: */ var [a,b,c] = [1,2,3]; console.log ...