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. C# 使用Emit实现动态AOP框架 进阶篇之优化

    目  录 C# 使用Emit实现动态AOP框架 (一) C# 使用Emit实现动态AOP框架 (二) C# 使用Emit实现动态AOP框架 (三) C# 使用Emit实现动态AOP框架 进阶篇之异常处 ...

  2. Selenium 基本使用

    from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.c ...

  3. dva中的一些备忘

    dva/router就是react-router-dom dva/router里的routerRedux就是react-router-redux 一个react的单页面应用: 编写一个基础框架,包含单 ...

  4. 创建LEANGOO项目

    转自:https://www.leangoo.com/leangoo_guide/leangoo_guide_create_project.html#toggle-id-3 一个项目包括多个看板和多名 ...

  5. Vue-Cli项目如何查看依赖调用关系?

    Vue是个优秀的前端框架,不管是前端还是后端开发人员都能很快使用Vue来开发应用.但是随着项目开发的深入,组件之间的依赖就变得越来越多,耦合越来越严重.这时候我们迫切地需要分析下组件和依赖之间的调用关 ...

  6. vue中移动端滚动事件,点击一次触发了事件两次(better-scroll)

    解决办法一: 将button标签换成a标签 问题代码: <span class="submitBtn" @click.stop="replyReport()&quo ...

  7. PHP提取富文本字符串中的纯文本,并进行进行截取

    this is my first markdown article,i hope you like it /** * 提取富文本字符串的纯文本,并进行截取; * @param $string 需要进行 ...

  8. 【2019中国大学生程序设计竞赛-女生专场】C - Function

    原题 韦神提供的思路orz 首先一个显然的性质,所有的c可以提出来,方程变成ax^2+bx的形式 因为x的值是离散的,而m的值又不大 所以一开始让x都为1(注意!x是正整数),然后每次挑一个x让他加一 ...

  9. sql 181. 超过经理收入的员工

    Employee 表包含所有员工,他们的经理也属于员工.每个员工都有一个 Id,此外还有一列对应员工的经理的 Id. +----+-------+--------+-----------+| Id | ...

  10. hashmap C++实现分析及std::unordered_map拓展

    今天想到哈希函数,好像解决冲突的只了解了一种链地址法而且也很模糊,就查了些资料复习一下 1.哈希Hash 就是把任意长度的输入,通过哈希算法,变换成固定长度的输出(通常是整型),该输出就是哈希值. 这 ...