移动端网页轻量级日期控件LCalenda

移动端网页轻量级日期控件LCalenda
为了避免某天被挂掉这里我也上传了文件,下载地址

(所用项目:9dian9/aicc-dianxin)
这里仅记录一下在vue-cli里的使用:


<template>
<input type="text" name="start_date" id="start_date" placeholder="开始日期" readonly="readonly" v-model="createTimeBegin"/>
<input type="text" name="end_date" id="end_date" placeholder="结束日期" readonly="readonly" v-model="createTimeEnd"/>
template>
<script>
import '@/css/LCalendar.min.css'
import '@/utils/LCalendar.min.js'
export default {
  data() {
    return {
      createTimeBegin: null,
      createTimeEnd: null,               
    }
  },
  mounted(){
    this.initDate()
  },
  methods: {
    initDate(){
      var calendar = new LCalendar();
      calendar.init({
        'trigger': '#start_date', //标签id
        'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
        'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
        'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期
      });
      var calendar = new LCalendar();
      calendar.init({
        'trigger': '#end_date', //标签id
        'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
        'minDate': (new Date().getFullYear()-3) + '-' + 1 + '-' + 1, //最小日期
        'maxDate': (new Date().getFullYear()+3) + '-' + 12 + '-' + 31 //最大日期
      });
    },
  }
}
script>

这样每次在改变了日期后,查询时可以通过this.createTimeBegin和this.createTimeEnd获取选择的日期进行后续操作。

你可能感兴趣的:(工作记录)