项目中需要用到日期时间插件，尝试用bootstrap、element的时间插件都各有各的报错，对于一个菜鸟来说真的是很痛苦啊。终于，最后用了layDate实现了需要的功能

最终效果：

使用步骤：

1.下载js包

http://www.layui.com/laydate/

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 日期控件赋值的更多相关文章

  1. EasyUI 日期控件赋值

    $("#BillDateE").datebox("setValue", '2020/9/28'); $("#BillDateB").date ...

  2. ASP.NET AjaxControlToolkit-Framework4.0 配置实用(简单介绍CalendarExtender日期控件)

    1:下载:AjaxControlToolkit Ajax Control Toolkit .NET 4 Ajax Control Toolkit .NET 4.5 Ajax Control Toolk ...

  3. 利用js日期控件重构WEB功能

    开发需求:网页中的日期部门(注册页面和查询条件)都用js日期控件重写 页面一:更新员工页面 empUpdate.jsp 中增加 onfocus 事件 入职日期:<input id="h ...

  4. selenium webdriver自动化对日期控件的处理

    用JS去掉日期输入框的readOnly属性. 代码如下: ----------------------------------------------------------------------- ...

  5. my97日期控件

    http://www.seabroad.cn/cq/datepick/demo.htm 但是由于某些原因,担心这个网站不稳定,所以复制一下 一. 简介 1. 简介 目前的版本是:4.0 Prerele ...

  6. js日期控件demo

    最近在钻研前端,写了个日期控件,内涵代码注释,希望能帮助到大家~ 1.html代码 <!DOCTYPE html> <html xmlns="http://www.w3.o ...

  7. jsp日期插件My97DatePicker 强大的日期控件 使用方便简单

    本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97Dat ...

  8. 日期控件My97DatePicker的使用

    一. 简介 1. 简介 目前的版本是:4.8 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.h ...

  9. Wdatepicker日期控件的使用指南 (转)

    Wdatepicker日期控件的使用指南 标签: inputclass语言functionstring正则表达式 2012-02-10 15:48 40826人阅读 评论(5) 收藏 举报 .embo ...

随机推荐

  1. MongoDB入门_MongoDB特色

    1. sql数据库与nosql数据库对比 nosql不支持实时一致性转而支持数据的最终一致性,数据有一定的延迟 redis数据库支持部分事物,而mongodb不支持事物 nosql数据库没有多表联查功 ...

  2. P4315 月下“毛景树” （树链剖分+边剖分+区间覆盖+区间加+区间最大值）

    题目链接:https://www.luogu.org/problem/P4315 题目大意: 有N个节点和N-1条树枝,但节点上是没有毛毛果的,毛毛果都是长在树枝上的.但是这棵“毛景树”有着神奇的魔力 ...

  3. 长沙理工大学第十二届ACM大赛L 选择困难症 （剪枝暴搜）

    链接:https://ac.nowcoder.com/acm/contest/1/L 来源:牛客网 选择困难症 时间限制:C/C++ 3秒,其他语言6秒 空间限制:C/C++ 131072K,其他语言 ...

  4. Flask实现分页功能

    可以参考: https://blog.csdn.net/weixin_36380516/article/details/80295101 也可以参考我的代码: https://github.com/z ...

  5. 消息中间件之 RabbitMQ

    文章内容来源 https://www.cnblogs.com/jun-ma/p/4840869.html 延伸阅读文章 https://blog.csdn.net/growing_duck/artic ...

  6. 【leetcode】581. Shortest Unsorted Continuous Subarray

    题目如下: 解题思路:本题我采用的是最简单最直接最粗暴的方法,把排序后的nums数组和原始数组比较即可得到答案. 代码如下: /** * @param {number[]} nums * @retur ...

  7. HTML中表格table标签的实例

    一.表格有边框,第一行居中对齐 二.表格没有边框 三.表格有水平标题 四.表格有垂直标题 五.合并行单元格 colspan合并单元格 六.表格有单元格边距(内边距) 七.表格没有单元格间距 八.表格有 ...

  8. React Native 之react-native-sqlite-storage

    npm 官网指导: https://www.npmjs.com/package/react-native-sqlite-storage 1. 执行: npm install react-native- ...

  9. #431 Div2 Problem B Tell Your World (鸽巢原理 && 思维)

    链接 : http://codeforces.com/contest/849/problem/B 题意 : 给出 n 个在直角坐标系上的点,每个点的横坐标的值对应给出的顺序序数,比如 1 2 4 3 ...

  10. C. Anna, Svyatoslav and Maps

    C. Anna, Svyatoslav and Maps 给定一个有向图,给定一条有向路径,求一条顶点最少的路径,使得给定的路径是它的最短路 folyd预处理出任意两点间的最短路,然后判断是否可以缩点 ...