vue使用日期时间插件layDate
项目中需要用到日期时间插件，尝试用bootstrap、element的时间插件都各有各的报错，对于一个菜鸟来说真的是很痛苦啊。终于，最后用了layDate实现了需要的功能
最终效果：
使用步骤：
1.下载js包
2.将laydate文件夹放在根目录的static下
3.在index.html中引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>XXX</title>
<script src="./static/laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4.定义时间日期组件
<template>
<div class="hello">
<input type="text" placeholder="选择体检时间" id="orderTime" v-model="date">
</div>
</template> <script>
export default {
name: "myTime",
data() {
return {
date: ""// 存储选择的日期
};
},
mounted() {
// 使用：执行一个laydate实例
laydate.render({
elem: "#orderTime", // 指定元素
type: "datetime", // 组件的类型：year,month,time···
format: 'yyyy-MM-dd HH:mm'// 设置显示格式
done: value => { // 点击确认执行的回调函数，会把当前选择的时间传入进来
// 把选择的时间赋值给先前定义好的变量，显示在页面
this.date = value;
}
});
}
};
</script> <style scoped>
.hello {
display: inline-block;
}
.hello input {
margin-left: -4px;
width: 300px;
height: 40px;
border-radius: 4px;
border: 1px solid #DCDFE6;
}
.layui-laydate .layui-this {
background-color: #358ee7 !important;
}
</style>
5.引用组件
<div class="">
<label for="orderTime">体检日期：</label>
<myTime />
</div>
vue使用日期时间插件layDate的更多相关文章
- layui 时间插件laydate ,取消回调
背景:转型新公司不再是做前端展示H5之类的东西,主要业务是后台数据读取和插件搭建前端页面,接触的第一个老项目是layui制作的,由于业务需求,需要用到时间插件以下为时间插件的一些用法--------- ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- 【Bootstrap】bootstrap-datetimepicker日期时间插件
[bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...
- dateTimePicker日期时间插件-----限定节假日调休的可选择性
需求:在项目中需要一款这样的日期插件,可以选择年月日,时分秒,对法定节假日不能选择,因法定节假日进行的调休可以选择: 现在使用的比较多的日期插件比如:Wdatepicker,jqueryUI的date ...
- jquery仿ios日期时间插件
Demo下载: 手机时间控件.zip 使用之前,请在页面中加入以下js和css: jquery-1.9.1.js mobiscroll.core-2.5.2.js mobiscroll.core-2. ...
- Ionic 日期时间插件
1.插件安装 日期插件 时间插件 备注: 具体 查看 https://github.com/rajeshwarpatlolla/ionic-datepicker https://github.c ...
- Vue引入日期格式插件moment.js
因为需求需要,接口传递过来的日期格式是一个时间戳,因此需要进行格式转换,老大给了插件地址,让我自己研究 插件地址:http://momentjs.cn/ 因为没有使用过,所有就开始各种百度,参考各位大 ...
- Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定
一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大 ...
- 日期时间插件flatpickr.js使用方法
今天写代码时需要用一款插件来实现对input输入时间的格式控制,找到了两款功能合适而且比较美观的插件:基于Bootstrap的DateTimePicker.js和flatpickr.js插件.一开始先 ...
随机推荐
- java 父类引用指向子类对象---动态绑定
知识点: 1.java 中父类引用指向子类对象时动态绑定针对的只是子类重写的成员方法: 2.父类引用指向子类对象时,子类如果重写了父类的可重写方法(非private.非 final 方法),那么这个对 ...
- day08-MySQl创建用户和授权
权限管理 我们知道我们的最高权限管理者是root用户,它拥有着最高的权限操作.包括select.update.delete.grant等操作.那么一般情况DBA工程师会创建一个用户和密码,让你去连接数 ...
- 着色器shaders
着色器(shader)是运行在GPU上的小程序,为图形渲染管线某个特定部分而运行. 着色器也是一种非常独立的程序,它们之间不能相互通信,它们之间唯一沟通只有通过输入输出. GLSL是为图形计算量身定制 ...
- .Net编译原理简单介绍
首先简单说一下计算机软件运行.所谓软件运行,就是一步一步做一些事情.计算机只认识0和1.给计算机下命令,只能是0与1的方式,确切的说,其实是CPU只认识0和1,因为软件运行是CPU控制的.人直接操作0 ...
- 虚拟机安装VMware tools
选择虚拟机菜单栏--安装VMware tools 2 然后在CentOS系统中弹出的VMware tools窗口中 右击VMwaretools-9.6.0-1294478.tar.gz 解压缩到 3 ...
- 树莓派上的软件安装和卸载命令汇总 [ZT]
转自:http://www.eeboard.com/bbs/thread-40823-1-1.html基础命令 安装软件 apt-get install softname1 softname2 sof ...
- Java基本语法知识要点
0x00 一个源文件中有多少个类,在用javac编译后,在同一目录下将产生多少个对应的字节码文件(.class ).类里面不一定要有public static void main(String[] ...
- WEB前端问题——img标签的onclick事件无法响应问题【转载】
一个纠结了一下午的问题,img标签里面的onclick事件无法响应.最终找到了错误原因,是因为img标签的id与onclick事件的方法名相同. 于是接着又测试了一下,发现name名和方法名相同也会导 ...
- Visual studio 2019 preview & C# 8 initial experience
Visual studio 2019 preview & C# 8 initial experience using System; using static System.Con ...
- SQL思维导图总结