如何给vue 日期控件赋值
项目中需要用到日期时间插件，尝试用bootstrap、element的时间插件都各有各的报错，对于一个菜鸟来说真的是很痛苦啊。终于，最后用了layDate实现了需要的功能
最终效果：
使用步骤：
1.下载js包
2.将laydate文件夹放在根目录的static下
3.在index.html中引入
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>XXX</title> 7 <script src="./static/laydate/laydate.js" type="text/javascript" charset="utf-8"></script> 8 </head> 9 <body> 10 <div id="app"></div> 11 <!-- built files will be auto injected --> 12 </body> 13 </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 日期控件赋值的更多相关文章
- EasyUI 日期控件赋值
$("#BillDateE").datebox("setValue", '2020/9/28'); $("#BillDateB").date ...
- ASP.NET AjaxControlToolkit-Framework4.0 配置实用(简单介绍CalendarExtender日期控件)
1:下载:AjaxControlToolkit Ajax Control Toolkit .NET 4 Ajax Control Toolkit .NET 4.5 Ajax Control Toolk ...
- 利用js日期控件重构WEB功能
开发需求:网页中的日期部门(注册页面和查询条件)都用js日期控件重写 页面一:更新员工页面 empUpdate.jsp 中增加 onfocus 事件 入职日期:<input id="h ...
- selenium webdriver自动化对日期控件的处理
用JS去掉日期输入框的readOnly属性. 代码如下: ----------------------------------------------------------------------- ...
- my97日期控件
http://www.seabroad.cn/cq/datepick/demo.htm 但是由于某些原因,担心这个网站不稳定,所以复制一下 一. 简介 1. 简介 目前的版本是:4.0 Prerele ...
- js日期控件demo
最近在钻研前端,写了个日期控件,内涵代码注释,希望能帮助到大家~ 1.html代码 <!DOCTYPE html> <html xmlns="http://www.w3.o ...
- jsp日期插件My97DatePicker 强大的日期控件 使用方便简单
本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97Dat ...
- 日期控件My97DatePicker的使用
一. 简介 1. 简介 目前的版本是:4.8 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.h ...
- Wdatepicker日期控件的使用指南 (转)
Wdatepicker日期控件的使用指南 标签: inputclass语言functionstring正则表达式 2012-02-10 15:48 40826人阅读 评论(5) 收藏 举报 .embo ...
随机推荐
- Linux学习--第六天--软件包
yum在线管理 管理的是rpm包,光盘里面都有 /etc/yum.repos.d下面有四个文件,对应网络yum源,光盘yum源等.如果需要用到哪个源,将其他三个源的enabled设置为0即可. |源配 ...
- Java并发（基础知识）——显示锁和同步工具类
显示锁 Lock接口是Java ...
- pandas读取Excel文件
In [7]: import pandas as pd filname = 'ch02数据导入\\student.xlsx' data = pd.read_excel(filname) data Ou ...
- [git]git的分支管理
最近在折腾git,有感于git这个强大而好用的版本管理工具. 说说git分支管理的心得体会. 首先,要有个master主分支: Git主分支的名字,默认叫做Master.它是自动建立的,版本库初始化以 ...
- LOJ 6192 城市网络（树上倍增）
LOJ #6192. 「美团 CodeM 复赛」城市网络(链接) 一棵以 $ 1 $ 号节点为根的树,每个点有一个权值,有 $ q $ 个询问,每次从 $ x $ 点开始往某个祖先 $ y $ 走,初 ...
- Azure IoT 技术研究系列1
物联网技术已经火了很多年了,业界各大厂商都有各自成熟的解决方案.我们公司主要搞新能源汽车充电,充电桩就是我们物联网技术的最大应用,车联网.物联网. 互联网三网合一.作为Azure重要的Partner和 ...
- web页面调用app的方法
use_app_goto_page: (skip_type, skip_target) => { // Android App if (/android/i.test(navigator.use ...
- Kafka---系统学习
1.Topics 1.1.Topic 就是 数据主题: 1.2.作用:数据记录 发布的地方,用来 区分 业务系统: 1.3.每个Topic 可以有多个 消费者 订阅它的数据: 1.4.每个T ...
- 【GDOI2016模拟3.9】暴走的图灵机
题目 分析 我们发现当两个字符串合并时,a0.a1表示左右两个字符串中有多少个T,C表示合并处新增的T的个数,那么 a0=a1 a1=a0+a1+C 令s0和s1表示左右手两个字符串,那么每一次操作后 ...
- 微信小程序细节部分
微信小程序和HTML区别: 1.开发工具不同,H5的开发工具+浏览器Device Mode预览,小程序的开发基于自己的开发者工具 2.开发语言不同,小程序自己开发了一套WXML标签语言和WXSS样式语 ...