如何给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 ...
随机推荐
- losetup - 设 定 与 控 制 环回设备
总览 SYNOPSIS losetup [ -e encryption ] [ -o offset ] loop_device file losetup [ -d ] loop_device 描述 l ...
- nodejs 操作 mysql
1.安装插件 npm install mysql 2.调用代码 var mysql = require('mysql') var connection = mysql.createConnection ...
- SVN本地搭建服务
本地搭建svn 服务端并使用 1.下载SVN服务端软 VisualSVN server 地址:http://subversion.apache.org/packages.html 2.安装 Visu ...
- 【转】linux lost+found文件夹
lost+found这个目录一般情况下是空的,当系统非法关机后,如果你丢失了一些文件,在这里能找回来 用来存放fsck过程中部分修复的文件的 如果你运行fsck命令(文件系统检查和修复命令),它也许会 ...
- 01JAVA入门
1 Welcome to java public class ch01Welcome { public static void main(String[] args) { System.out.pri ...
- 1130. Infix Expression (25)
Given a syntax tree (binary), you are supposed to output the corresponding infix expression, with pa ...
- Centos7.X新安装linux系统基础配置
普通Linux分区方式: /根分区 Linux系统必须要有的,相当于 Windows的C盘,系统程序相关的. /boot分区 存放内核相关程序 是可选的 5 6给200M,7给256M(工作中1-2G ...
- 从输入URL到页面加载到底发生了什么
很多初学网络或者前端的初学者大多会有这样一个疑问:从输入URL到页面加载完成到底发生了什么?总的来说,这个过程分为下面几个步骤:1.DNS解析2.与服务器建立连接3.服务器处理并返回http报文4.浏 ...
- Maven高级
第一章 Maven解决冲突的方式 1.1 第一声明者优先原则 那个jar包的坐标在pom.xml文件上属于靠上的位置,这个jar包就是先声明的.先声明的jar包坐标下的依赖包,可以优先进入项目中. 示 ...
- 【leetcode】473. Matchsticks to Square
题目如下: 解题思路:居然把卖火柴的小女孩都搬出来了.题目的意思是输入一个数组,判断能否把数组分成四个子数组,使得每个子数组的和相等.首先我们可以很容易的求出每个子数组的和应该是avg = sum(n ...