在 Vue中使用layui日历控件,标注重要日子

时间:2019-11-06
本文章向大家介绍在 Vue中使用layui日历控件,标注重要日子,主要包括在 Vue中使用layui日历控件,标注重要日子使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

因为在vue文件中通过import加载,不知道为什么打包后会找不到js,

所以通过这种方法引入

在index.html中引入

 文件目录

需要放在static目录下

<input type="text" :key="num" placeholder id="test1" v-model="date" />

  

// 使用方式
laydate.render({
        elem: "#test1",
        // type: "datetime",
        value: that.dateFormat(new Date()),
        mark: that.obj,  // 用来标注重要的日
        trigger: "click",
        format: "yyyy-MM-dd",
        done(value, date, a) {
          // alert('你选择的日期是:' + value + '\n获得的对象是' + JSON.stringify(date));
          console.log(value);
          that.date = value;
          that.referIndex();
          console.log(that.date);
        },
        change: function(value, date, endDate) {
          console.log(value, date, endDate);
          that.yearMonth = value.split('-')[0]+'-'+value.split('-')[1]
          that.getworkPlan();
        },
        showBottom: false
      });

   标注重要日子的结构

  

      最后的样式

    

.layui-laydate::after {
  position: absolute;
  background-color: #0048ff;
  width: 5px;
  height: 5px;
  bottom: 8px;
  left: 24px;
  border-radius: 50%;
  content: "";
}

.layui-laydate-main::after {
  position: absolute;
  content: "提交的日志";
  bottom: 3px;
  left: 34px;
}

  

原文地址:https://www.cnblogs.com/js-liqian/p/11806574.html