前言：工作中用到 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. Java基础学习篇---------多态

    一.多态性的理解 1.向上转型:子类为父类对象实例化,调用的一定是子类覆写的方法,他们之间找的是共性 2.向下转型:子类扩充了父类的某些功能,而父类中没有该功能,他们之间找的是特性 案例: Numbe ...

  2. django 视图中执行原生的 sql 查询语句

    可以使用objects的raw()方法执行原生的sql语句,进行对数据库的查询操作,raw()方法只能执行查询语句 query_set = your_model.objects.raw("s ...

  3. Breadth-first Search-690. Employee Importance

    You are given a data structure of employee information, which includes the employee's unique id, his ...

  4. jQuery基础笔记（4）

    day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-3 文本操作 HTML代码: html()// 取得第一个匹配 ...

  5. 前端入门html(表单)

    day48 配置Django项目:https://blog.csdn.net/zV3e189oS5c0tSknrBCL/article/details/79606994 <!DOCTYPE ht ...

  6. servlet中request和response

    一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...

  7. shiro授权-记调试过程

    根据张开涛老师的shiro教程学习过程中 感觉shiro授权这块有点绕 调试了十几遍 大概有个思路  记录一下 1.单元测试入口 2.subject().isPermitted("+user ...

  8. java I/O系统总结

    1. InputStream : 从文件.网络.压缩包等中读取 需要的信息到程序中的变量 read();     read(byte []b ); mark(int readlimit); reset ...

  9. Spring Security构建Rest服务-0700-SpringSecurity开发基于表单的认证

    自定义用户认证逻辑: 1,处理用户信息获取,2,用户校验,3密码的加密解密 新建:MyUserDetailService类,实现UserDetailsService接口. UserDetailsSer ...

  10. springBoot上传文件时MultipartFile报空问题解决方法

    springBoot上传文件时MultipartFile报空问题解决方法 1.问题描述: 之前用spring MVC,转成spring boot之后发现上传不能用.网上参考说是spring boot已 ...