• 如何给vue 日期控件赋值


    项目中需要用到日期时间插件,尝试用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>
  • 相关阅读:
    用户态切换到内核态的3种方式
    vim_action
    import date
    __sizeof__()
    classmethod staticmethod
    Java对对象的引用 不是 引用调用 而是按值引用 Java不存在引用调用
    多线程同步
    Does Hadoop require SSH?
    hdfs namenode出错
    软件项目的一致性语义描述
  • 原文地址:https://www.cnblogs.com/zjw2004112/p/11512026.html
Copyright © 2020-2023  润新知