如何给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 ...
随机推荐
- fastadmin 搭建到云虚拟主机
1.把public下的index.php.router.php.install.php.admin_*******.php..htaccess(伪静态文件),移到 文件夹:/htdocs 根目录 ...
- CSS初识
CSS:层叠样式表,控制网页数据样式显示,使得数据的表现和内容分离 CSS的引入方式 使用元素内嵌样式表:例<a style=”font-size:40px”></a>表示在a ...
- Linux知识点拾遗-磁盘UUID
查看磁盘UUID 方法1 ls -l /dev/disk/by-uuid example: [root@dplinux ~]# ll /dev/disk/by-uuid/ total 0 lrwxrw ...
- Comet OJ - Contest #5 D 迫真小游戏 (堆+set)
迫真小游戏 已经提交 已经通过 时间限制:2000ms 内存限制:256MB 73.98% 提交人数:196 通过人数:145 题目描述 H君喜欢在阳台晒太阳,闲暇之余他会玩一些塔防小游戏. H君玩的 ...
- wepy相关
1.根据官方文档: $ npm install @wepy/cli -g # 全局安装 WePY CLI 工具 $ wepy init standard myproj # 使用 standard 模板 ...
- MyEclipse XML & XML架构教程：XML Schema (XSD)编辑器
[MyEclipse CI 2019.4.0安装包下载] 1. MyEclipse中的XSD编辑 本文档介绍MyEclipse XML Schema(XSD)编辑器中的一些可用函数.XML Schem ...
- 查看PL/SQL编译时的错误信息
编译无效对象是DBA与数据库开发人员常见的工作之一.对于编译过程中的错误该如何去捕获,下面给出两种捕获错误的方法. 一.当前数据库版本信息及无效对象 1.查看当前数据库版本 [sql] view pl ...
- JVM内存结构之本地方法栈
Native Method Stacks(本地方法栈) 本地方法:指不是用Java语言编写的方法,因为Java语言是有一定限制的,有些情况下它是不能直接和操作系统打交道的.这时就需要调用一些用C或C+ ...
- python+selenium实现经京东登录+购物+支付
import json from time import sleep from selenium import webdriver import chardet from selenium.webdr ...
- PC端无论页面有没有完全撑开把footer保持在最底部（不用定位）
最近在写项目,有的页面没有占到一屏,然后footer也就是底部就靠上了,这样很影响美观,于是在网上找了找,下面是我的成果 解决该问题的最好方法是采用CSS3提供的一种先进布局模型 :flexbox,可 ...