如何给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 ...
随机推荐
- mkdir -建立目录
总览 mkdir [选项] 目录... POSIX 选项: [-p] [-m mode] GNU 选项(缩写): [-p] [-m mode] [--verbose] [--help] [--vers ...
- Zabbix--05 Grafana、percona、自动发现和自动注册
目录 一. Grafana自定义图形 1.安装grafana 2.安装并激活zabbix插件 3.数据展示 4.自定义图形仪表盘 5.自定义图形饼图 二. percona模版监控mysql 1.安装p ...
- 10年前文章_ vi编辑器查找与替换方法
vi编辑器查找与替换方法1.查找:/ 当前行往下找:? 当前行往上找找到后继续查找同方向 n反方向 N2.替换格式: range s/source/target/g解释:range表示要搜索的范围 & ...
- 对table最后一行显示与隐藏
//显示table最后一行,如果用block的话,可能会影响到页面的样式 $("#table tr").get($("#table tr").length - ...
- 【ARC101F】Robots and Exits 树状数组优化DP
ARC101F Robots and Exits 树状数组 有 $ n $ 个机器人和 $ m $ 个出口.这 $ n $ 个机器人的初始位置是 $ a_1,a_2.....a_n $ ,这 $ m ...
- windows 10安装python3和python2
安装包下载: 安装包下载请点我 下载完安装包就可以开始安装了,下面是流程图! Python3.6安装流程: 选择自定义安装: 直接next 为电脑上的所有用户安装 然后install就ok了! 安装完 ...
- linux运维、架构之路-MySQL(二)
一.SQL语句实战 1.DDL语句——库管理 ①查看数据库 show databases; show databases like 'word%';#模糊查询数据库 ②创建数据库 create dat ...
- M(model)V(view)C(controller,serlvet),(分) 静态工厂模式,单例模式
- 使用chooseImage上传图片,不压缩,使用原图
参考文章: https://help.aliyun.com/document_detail/92883.html
- es之Source字段和store字段
PUT /website/blog/ { "title" : "elasticsearchshi是是什么", "author" : &quo ...