1、到官网下载laydate.js

https://www.layui.com/laydate/

2、下载好后,将包解压好放在index.html同级的地方。我是在public中建立个statick文件夹,放在了里面

3、在index.html中引入

<script src="./static/laydate/layDate-v5.0.9/laydate/laydate.js"></script>

4、在vue组件中使用

<template>
<div class="main">
<input id="test" class="form-control layer-date" placeholder="YYYY-MM-DD hh:mm:ss" v-model="date">
<label class="laydate-icon"></label>
</div>
</template> <script> export default {
data(){
return{
date: '2017-09-08 09:00:00',
}
},
mounted(){
console.log(laydate)
laydate.render({
elem: '#test',
type:'datetime',
done: (value) => {
this.date = value;
console.log(this.date);
}
})
},
methods:{
}
}
</script> <style lang="less" scoped> </style>

vue中使用laydate.js插件的更多相关文章

  1. 解决vue中使用laydate.js选择日期后再修改其他model时日期会被清空问题

    首先描述一下问题,下图中均绑定v-model,例如先选择出生开始时间,然后当再选择地区或其他选项时该时间就会被清空 首先看一下我这边开始的默认值,开始我设置都为空 当我选择如下图的生日开始时间与结束时 ...

  2. vue使用laydate.js插件报错laydate.css: Invalid

    在vue中使用laydate.js插件时可能会碰到laydate.css: Invalid这样子的一个报错 然后导致laydate日期控件无法使用. 这主要是因为laydate.js中引入的layda ...

  3. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  4. vue中config/index.js:配置的详细理解

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  5. vue中使用raphael.js实现地图绘制

    一.效果图 二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 <template> <div> &l ...

  6. Vue中使用fullpage.js

    Vue中使用fullpage.js:https://blog.csdn.net/weixin_34184158/article/details/88672739

  7. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  8. vue中使用剪切板插件 clipboard.js

    vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...

  9. 微信 vue中使用video.js播放m3u8视频,解决安卓自动全屏的问题。

    最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...

随机推荐

  1. 一键部署etcd集群

    这里使用三个节点,系统版本为CentOS7 # vim deploy-etcd.sh #!/bin/bash set -x set -e #更改这里的IP, 只支持部署3个节点etcd集群 decla ...

  2. redis 学习(17) -- RDB

    redis -- RDB 什么是 RDB 经过RDB之后,redis会将内存中的数据创建一份快照到硬盘中,称为RDB文件(二进制) 当redis重新启动时,会加载硬盘中的RDB文件,加载到内存中完成数 ...

  3. C#拷贝文件

    public void FileCopy(string source, string target) { using (FileStream fileRead = new FileStream(sou ...

  4. O058、Snapshot Volume 操作

    参考https://www.cnblogs.com/CloudMan6/p/5657744.html   Snapshot 可以为 volume 创建快照,快照中保存了 volume当前的状态,以后可 ...

  5. vuex用法

    // 配置vuex的步骤 // 1. 运行 cnpm i vuex -S // 2. 导入包 import Vuex from 'vuex' // 3. 注册vuex到vue中 Vue.use(Vue ...

  6. 第五篇python进阶之深浅拷贝

    目录 第五篇python进阶之深浅拷贝 一.引言 1.1可变 和不可变 二.拷贝(只针对可变数据类型) 三.浅拷贝 四.深拷贝 第五篇python进阶之深浅拷贝 一.引言 1.1可变 和不可变 id不 ...

  7. Phoenix批量提交优化,官网的demo

    1 Phoenix的批量insert官网代码,最佳实践 try (Connection conn = DriverManager.getConnection(url)) { conn.setAutoC ...

  8. 采用kubeadm部署工具,部署kubernetes1.16.3

    安装kubenetes有5种部署工具,分别是kubeadm.kops.KRIB.Kubespray.本实验采用的是kubeadm部署工具.如有想了解其他部署工具,请点击这里 环境说明 角色/主机名 系 ...

  9. 蓝牙App漏洞系列分析之二CVE-2017-0639

    蓝牙App漏洞系列分析之二CVE-2017-0639 0x01 漏洞简介 Android本月的安全公告,修复了我们发现的另一个蓝牙App信息泄露漏洞,该漏洞允许攻击者获取 bluetooth用户所拥有 ...

  10. 6.Nginx的session一致性(共享)问题配置方案2

    1.利用memcached配置session一致性的另外一种方案tengine的会话保持功能 1.1:Tengine会话保持:通过cookie来实现的 该模块是一个负载均衡模块,通过cookie实现客 ...