前言：工作中用到 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. day24 计算任意文件夹大小 , 校验大文件的一致性 , 发抢红包程序

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 1.计算任意一个文件夹的大小(考虑绝对路径的问题)# 基础需求 这个文件夹中只有文件# 进阶需求 这个文件夹 ...

  2. Mysql数据库二:表的增删改查

    ----建表CREATE TABLE emp( id int PRIMARY key auto_increment, name char(10) , birthday DATE , salary FL ...

  3. 深入set和dict

    一. 浅拷贝和深拷贝   浅拷贝:就是创建一个具有相同类型,相同值但不同id的新对象.  浅拷贝产生的新对象中可变对象的值在发生改变时,会对原对象的值也做出改变,因为这些值是同一个引用. a = [1 ...

  4. SQL一些问题

    什么是索引: 一般说法:索引是与表关联的磁盘上结构,可以加快从表中检索行的速度.索引包含由表中的一列或多列生成的键.这些键存储在一个结构中,使 SQL Server 可以快速有效地查找与键值关联的行. ...

  5. vmware安装——CentOS-6.5和Mysql

    1.新建虚拟机 2.安装centos6.5 3.centos设置 查看网络 4.vmware设置网络连接 关闭selinux [root@china ~]# vim /etc/selinux/conf ...

  6. 【LeetCode】462. 最少移动次数使数组元素相等 II

    给定一个非空整数数组,找到使所有数组元素相等所需的最小移动数,其中每次移动可将选定的一个元素加1或减1. 您可以假设数组的长度最多为10000. 例如: 输入: [1,2,3] 输出: 2 说明: 只 ...

  7. 【HDU5126】 stars k-d树

    题目大意:有$m$个操作,分两种:在指定三维坐标内加入一个点,询问指定空间内点的数量. 其中$m≤5*10^{4},1≤x,y,z≤10^9$ 这题几乎就是裸的$k-d$树啊.我们动态维护一棵$k-d ...

  8. iOS 11 application 新特性

    1.- (void)applicationWillResignActive:(UIApplication *)application 说明:当应用程序将要入非活动状态执行,在此期间,应用程序不接收消息 ...

  9. SpringBoot入门（IDEA篇）（一）

    一.SpringBoot简介 开发团队:Pivotal团队 主要目的:简化新Spring应用的初始搭建以及开发过程. 秉持理念:约定优于配置.(该框架使用了特定的方式来进行配置,从而使开发人员不再需要 ...

  10. 基于CAS操作的非阻塞算法

    非阻塞算法(non-blocking algorithms)定义        所谓非阻塞算法是相对于锁机制而言的,是指:一个线程的失败或挂起不应该引起另一个线程的失败或挂起的一种算法.一般是利用硬件 ...