前言：工作中用到 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. 使用Navicat 创建mysql存储过程，实现日期加流水号序列

    目的:使用Navicat 创建mysql存储过程,实现格式为8位日期(年月日)+5位流水号序列. 步骤: 1.打开Navicat 登录数据库,点击导航栏上的函数,如下图: 2.点击新建函数,选择“过程 ...

  2. Django(wsgiref、jinja2模块使用介绍)

    day60 wsgiref比较稳定 """ 根据URL中不同的路径返回不同的内容--函数进阶版 返回HTML页面 让网页动态起来 wsgiref模块版 "&qu ...

  3. day 56 linux的安装python3 ,虚拟环境,mysql ,redis

    1.1下载python源码包 网址:https://www.python.org/downloads/release/python-366/ 下载地址:https://www.python.org/f ...

  4. 转的很好的js 入门

    JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.( ...

  5. 【10】JMicro微服务-API网关

    如非授权,禁止用于商业用途,转载请注明出处作者:mynewworldyyl 往下看前,建议完成前面1到9小节 1. Api网关基本特性: Api网关作为对外网提供服务的基本入口,地位类似于NGINX, ...

  6. JSON JSONPath

    JSONPath is a query language for JSON, similar to XPath for XML. AlertSite API endpoint monitors let ...

  7. VSTO学习(四)——自定义Excel UI 转载

    本专题概要 引言 自定义任务窗体(Task Pane) 自定义选项卡,即Ribbon 自定义上下文菜单 小结 引言 在上一个专题中为大家介绍如何创建Excel的解决方案,相信大家通过从上面一个专题之后 ...

  8. Vue中子组件调用父组件的方法

    Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  9. 端口被占用怎么办？如何查看win7电脑端口是否被占用

    Windows7操作系统的酷炫和强大已经深受用户们的喜欢了,这里根大家分享的是教你查看win7电脑端口是否被占用的技巧,端口是我们在进行远程或者打印机等都会遇到的,但是有很多用户会遇到端口被占用的情况 ...

  10. 【链表】Add Two Numbers

    题目: You are given two linked lists representing two non-negative numbers. The digits are stored in r ...