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

最终效果：

使用步骤：

1.下载js包

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

2.将laydate文件夹放在根目录的static下

3.在index.html中引入

  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3   <head>
  4.  4     <meta charset="utf-8">
  5.  5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6.  6     <title>XXX</title>
  7.  7     <script src="./static/laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
  8.  8   </head>
  9.  9   <body>
  10. 10     <div id="app"></div>
  11. 11     <!-- built files will be auto injected -->
  12. 12   </body>
  13. 13 </html>

4.定义时间日期组件

  1. <template>
  2.   <div class="hello">
  3.     <input type="text" placeholder="选择体检时间" id="orderTime" v-model="date">
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9.     name: "myTime",
  10.     data() {
  11.         return {
  12.             date: ""// 存储选择的日期
  13.         };
  14.       },
  15.       mounted() {
  16.     // 使用：执行一个laydate实例
  17.         laydate.render({
  18.             elem: "#orderTime", // 指定元素
  19.               type: "datetime", // 组件的类型：year,month,time···　　　　　　　　format: 'yyyy-MM-dd HH:mm'// 设置显示格式
  20.               done: value => { // 点击确认执行的回调函数，会把当前选择的时间传入进来
  21.                 // 把选择的时间赋值给先前定义好的变量，显示在页面
  22.                 this.date = value;
  23.               }
  24.         });
  25.       }
  26. };
  27. </script>
  28.  
  29. <style scoped>
  30. .hello {
  31.     display: inline-block;
  32. }
  33. .hello input {
  34.     margin-left: -4px;
  35.     width: 300px;
  36.     height: 40px;
  37.     border-radius: 4px;
  38.     border: 1px solid #DCDFE6;
  39. }
  40. .layui-laydate .layui-this {
  41.     background-color: #358ee7 !important;
  42. }
  43. </style>

5.引用组件

  1. <div class="">
  2.     <label for="orderTime">体检日期：</label>
  3.     <myTime />
  4. </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. 从零开始学MySQL(四)

    上节连接:https://www.cnblogs.com/RajXie/p/10880809.html 上节说到,在创建表的同时,需要给出列的定义.列的定义可展开如下: 列名 列的数据类型 列的一些其 ...

  2. KeSetEvent

    KeSetEvent https://bbs.pediy.com/ dll inject   dll注入

  3. 原生js禁止页面滚动

    // 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处 ...

  4. Jdbc连接数据库基本步骤详解_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 Jdbc连接数据库的基本步骤,供大家参考,具体内容如下 package demo.jdbc; import java.s ...

  5. mybatis insert update delete返回都是整型 0，1，增，删，改要提交事物

    mybatis insert update delete返回都是整型 0,1, 没有扔 增,删,改要提交事物

  6. 微信小程序支付功能讲解

    前言:虽然小程序做过很多,但是一直觉得微信支付功能很是神秘,现在终于有机会接触心里还是有点小激动的,经过一番折腾发现支付也不过如此,在此记录下支付功能的实现过程 小程序的官方文档介绍到发起微信支付即调 ...

  7. Xyjj’s sequence

    Xyjj’s sequence #include<iostream> #include<cstdio> #include<cstring> #include< ...

  8. [HDU6403]:Card Game（dfs+DP+基环树）

    题目传送门 题目描述 她依然在我不知道的地方做我不知道的事.桌面上摊开着一些卡牌,这是她平时很爱玩的一个游戏.如今卡牌还在,她却不在我身边.不知不觉,我翻开了卡牌,回忆起了当时一起玩卡牌的那段时间.每 ...

  9. 转：SpringMVC常见面试题总结（超详细回答）

    原文:https://blog.csdn.net/a745233700/article/details/80963758  我略微修改了下某些地方 1.什么是Spring MVC ?简单介绍下你对sp ...

  10. Asynchronous module definition

    Asynchronous module definition Asynchronous module definition (AMD) is a specification for the progr ...