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. 深入理解计算机系统 第十一章 网络编程 part1 第二遍

    客户端-服务器编程模型 每个网络应用都是基于客户端-服务器模型的.采用这个模型,一个应用是由一个服务器进程和一个或者多个客户端进程组成.服务器管理某种资源,并且通过操作这种资源来为它的客户端提供某种服 ...

  2. 树莓派安装使用RXTX

    在RaspberryPi树莓派上使用RXTX(RXTX的源码安装)Linux 编译RXTX(JAVA串口开发)源码 如果为windows系统,则使用rxtx比较简单,到http://fizzed.co ...

  3. 【html】 iframe 和 frameset 的区别

    一.两者的相同点和不同点 相同点: iframe 和frameset都是html布局的框架布局 不同点: iframe是一个内联框架,是在页面里生成内部框架 frameset定义一个框架集,包含多个子 ...

  4. create-react-app创建项目修改配置项的两种方法

    方法一:eject 打开 package.json ,可以看到eject.运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来. { ... " ...

  5. JS基础_Unicode编码表

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. (三)创建基于maven的javaFX+springboot项目创建

    创建基于maven的javaFx+springboot项目有两种方式,第一种为通过非编码的方式来设计UI集成springboot:第二种为分离用户界面(UI)和后端逻辑集成springboot,其中用 ...

  7. 初识python之了解其背景和安装

    1.Python的发展 Python语言诞生于1990年,由Guido van Rossum设计并领导开发.1989年12月,Guido考虑启动一个开发项目以打发圣诞节前后的时间,所以决定为当时正在构 ...

  8. 使用flex布局解决百分比高度元素垂直居中

    方法一: align-self(解决父元素下面单个子元素布局方式) 父级加上 div{display:flex} 子元素 span { flex-grow: 1; align-self: center ...

  9. Idea破解2019

    转自:https://blog.csdn.net/qq_36622149/article/details/88910952 Idea破解,亲测有效,轻量快捷高效更新记录:首次:Idea破解,亲测有效2 ...

  10. php底层的运行机制和原理

    php设计的理念及特点 PHP 被设计为一种适用于web开发的动态脚本语言,同时具有解释型和弱类型,底层完全由C语言实现. 解释型即程序边运行边解释,一行一行运行. 弱类型即变量类型一开始并不是确定的 ...