前言：工作中用到 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. Bootstrap框架（一）

    day57 参考:https://www.cnblogs.com/liwenzhou/p/8214637.html 下载:http://www.bootcss.com/   选择用于生产环境的 Boo ...

  2. Python中线程与互斥锁

    了解之前我们先了解一下什么是多任务? 概念: 几个不同的事件在同时运行就是多任务, 这样的话, 我们有牵扯到了真的多任务, 假的多任务; 并行: 真的多任务, 通过电脑的核数来确定 并发: 假的多任务 ...

  3. apt错误

    安装软件遇到错误,不管安装什么软件都有错误. apt-get install softname 报错如下:E: Sub-process /usr/bin/dpkg returned an error ...

  4. Highcharts纯Javascript图表使用讲解

    Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...

  5. Python小白学习之路（十）—【函数】【函数返回值】【函数参数】

    写在前面: 昨天早睡之后,感觉今天已经恢复了百分之八十的样子 又是活力满满的小伙郭 今日份鸡汤: 我始终相信,在这个世界上,一定有另一个自己,在做着我不敢做的事,在过着我想过的生活.-------宫崎 ...

  6. Centos下用yum命令按照jdk

    一.查看是否已经安装了JDK #查看本机是否已经安装了jdk $ sudo yum list installed | grep java java--openjdk.x86_64 :.el7_6 @u ...

  7. Docker容器(三)

    一.创建容器 容器是Docker另一个核心的概念,简单来说,容器是镜像的一个运行实例,所不同的是,镜像是静态的只读文件,而容器带有运行时需要的可写文件层 1.1. 新建容器 使用docker crea ...

  8. Postman 发送 Bearer token

    Bearer Token (RFC 6750) 用于OAuth 2.0授权访问资源,任何Bearer持有者都可以无差别地用它来访问相关的资源,而无需证明持有加密key.一个Bearer代表授权范围.有 ...

  9. sublime text3在交互时解决input（）函数无法使用的问题

    1,打开sublime text3工具栏,依次点击View->Show Console菜单打开命令行, 2,在命令行里 输入代码          import urllib.request,o ...

  10. IE中的userData

    之前做项目时用到了localstorage,但是考虑到浏览器存在IE8以下不兼容问题,所以来介绍以下IE中的userData. 本地存储解决方案很多,比如Flash SharedObject.Goog ...