zoukankan      html  css  js  c++  java
  • vue使用日期时间插件layDate

    项目中需要用到日期时间插件,尝试用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; 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>
  • 相关阅读:
    动态规划——Best Time to Buy and Sell Stock IV
    动态规划——Split Array Largest Sum
    动态规划——Burst Ballons
    动态规划——Best Time to Buy and Sell Stock III
    动态规划——Edit Distance
    动态规划——Longest Valid Parentheses
    动态规划——Valid Permutations for DI Sequence
    构建之法阅读笔记05
    构建之法阅读笔记04
    构建之法阅读笔记03
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/10611028.html
Copyright © 2011-2022 走看看