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

最终效果：

使用步骤：

1.下载js包

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

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

3.在index.html中引入

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <title>XXX</title>

     <script src="./static/laydate/laydate.js" type="text/javascript" charset="utf-8"></script>

   </head>

   <body>

     <div id="app"></div>

     <!-- built files will be auto injected -->

   </body>

 </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使用日期时间插件layDate的更多相关文章

  1. layui 时间插件laydate ,取消回调

    背景:转型新公司不再是做前端展示H5之类的东西,主要业务是后台数据读取和插件搭建前端页面,接触的第一个老项目是layui制作的,由于业务需求,需要用到时间插件以下为时间插件的一些用法--------- ...

  2. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  3. 【Bootstrap】bootstrap-datetimepicker日期时间插件

    [bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...

  4. dateTimePicker日期时间插件-----限定节假日调休的可选择性

    需求:在项目中需要一款这样的日期插件,可以选择年月日,时分秒,对法定节假日不能选择,因法定节假日进行的调休可以选择: 现在使用的比较多的日期插件比如:Wdatepicker,jqueryUI的date ...

  5. jquery仿ios日期时间插件

    Demo下载: 手机时间控件.zip 使用之前,请在页面中加入以下js和css: jquery-1.9.1.js mobiscroll.core-2.5.2.js mobiscroll.core-2. ...

  6. Ionic 日期时间插件

    1.插件安装 日期插件 时间插件 备注: 具体 查看 https://github.com/rajeshwarpatlolla/ionic-datepicker    https://github.c ...

  7. Vue引入日期格式插件moment.js

    因为需求需要,接口传递过来的日期格式是一个时间戳,因此需要进行格式转换,老大给了插件地址,让我自己研究 插件地址:http://momentjs.cn/ 因为没有使用过,所有就开始各种百度,参考各位大 ...

  8. Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定

    一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大 ...

  9. 日期时间插件flatpickr.js使用方法

    今天写代码时需要用一款插件来实现对input输入时间的格式控制,找到了两款功能合适而且比较美观的插件:基于Bootstrap的DateTimePicker.js和flatpickr.js插件.一开始先 ...

随机推荐

  1. UI5-学习篇-3-Local SAP WEB IDE下载

    1.下载地址 https://tools.hana.ondemand.com/#sapui5 有两个版本,针对各自系统环境选择对应的个人版本下载后解压. 个人版:个人试用 生产版:在云平台SCP付费订 ...

  2. 页面中onclick事件引号问题

    第一种:html中onclick调用事件 <p id="txt" onclick="changeSize()">加括弧的changeSize()&l ...

  3. jquery下插入标签以及clone的应用

    //内部插入 插入一个儿子 //var $ele = $("<h1></h1>")//创建h1标签 // $ele.html('hello') // $el ...

  4. centos 下修改mysql 默认字符集

    解决办法: CentOS 7下修改MySQL数据库字符编码为UTF-8,UTF-8包含全世界所有国家需要用到的字符,是国际编码. 具体操作: 1.进入MySQL控制台 mysql  -u root - ...

  5. RabbitMQ系列教程之六：远程过程调用（RPC）（转载）

    RabbitMQ系列教程之六:远程过程调用(RPC) 远程过程调用(Remote Proceddure call[RPC]) (本实例都是使用的Net的客户端,使用C#编写) 在第二个教程中,我们学习 ...

  6. IIS Express

    当前程序员只能通过下面两种web服务器之一来开发和测试ASP.NET网站程序: 1. Visual Studio自带的ASP.NET开发服务器(webdev.exe). 2. Windows自带的II ...

  7. Ubuntu网卡配置

    目录 1.查看所有可用网卡 2.编辑配置文件 3.添加可用网卡信息 4.重启网络服务 5.查看网卡信息 1.查看所有可用网卡 $ ifconfig -a # -a display all interf ...

  8. T-SQL行合并成列与列拆分成行

    本文出处:http://www.cnblogs.com/wy123/p/6910468.html 感觉最近sql也没少写,突然有一点生疏了,对于用的不是太频繁的一些操作,时间一久就容易生. 多行的某一 ...

  9. 浅析SQL Server 中的SOS_SCHEDULER_YIELD类型的等待

    本文出处:http://www.cnblogs.com/wy123/p/6856802.html 进程的状态转换 在说明SOS_SCHEDULER_YIELD等待之前,先简要介绍一下进程的状态(迷迷糊 ...

  10. 小程序：pages/index/index/出现脚本错误或未正确调用Page()

    第一次尝试玩小程序,配置好以后报错.pages/index/index/出现脚本错误或未正确调用Page() 才发现解决的方式是:新建的文件默认是没有page()的,所以你需要在.js文件中加上Pag ...