mobile-vue-datepick/src/modules/index.js

A Vue.js project,vue-calendar,vuejs,vue

import PickerCom from '../components/Picker.vue'
import {mergeOptions, getDate} from './util'
import '../css/calendar.scss'

let Picker = {};


Picker.install = function (Vue) {

  let t = new Date();

  Vue.prototype.$picker = {}

  let CalendarMainCom = Vue.extend(PickerCom)

  let instance = new CalendarMainCom({
    el: document.createElement('div')
  })

  document.body.appendChild(instance.$el);

  Vue.prototype.$picker.show = (settings = {}) => {
    let date = new Date()
    instance = Object.assign(instance, {
      show: true,
      type: 'picker', //默认选择器
      data: [],
      year: date.getFullYear(),
      month: date.getMonth() + 1,
      day: date.getDate(),
      startTime: '',
      endTime: '',
      date: '',
      lang: {
        cancel: '取消',
        confirm: "确定",
        year: "年",
        month: "月",
        day: "日",
      },
      onOk(e) {
        console.log(e)
        console.log('选中回调')
      },
      onCancel() {
        console.log('取消回调')
      }
    })

//如果是日期模式
    if (settings.type == 'datePicker') {
      let years = [1950, 2050];
      let lang = {
        cancel: '取消',
        confirm: "确定",
        year: "年",
        month: "月",
        day: "日",
      };

      // 有设置结束时间
      if (settings.endTime) {
        let endY = (new Date(getDate(settings.endTime))).getFullYear();
        years[1] = endY;
      }
      // 有设置开始时间
      if (settings.startTime) {
        let startY = (new Date(getDate(settings.startTime))).getFullYear();
        years[0] = startY;
      }
      // 两个都设置了
      if (settings.startTime && settings.endTime) {
        if ((new Date(getDate(settings.startTime))).getTime() >= (new Date(getDate(settings.endTime))).getTime()) {
          years[0] = 1950;
          settings.startTime = '1950-01-01';
        }
      }

      if (settings.date) {
        const setDate = new Date(getDate(settings.date));
        const end = (new Date(getDate(settings.endTime) || '2050-01-01').getTime());
        const start = (new Date(getDate(settings.startTime) || '1950-01-01').getTime());
        //验证输入的年的范围是否正确
        if (setDate.getTime() >= start && setDate.getTime() <= end) {
          settings.year = setDate.getFullYear();
          settings.month = setDate.getMonth() + 1;
          settings.day = setDate.getDate();

        } else {
          settings.date = '';
        }

      }
      if (settings.lang) {
        if (settings.lang.cancel !== undefined) {
          lang.cancel = settings.lang.cancel;
        }
        if (settings.lang.confirm !== undefined) {
          lang.confirm = settings.lang.confirm;
        }
        if (settings.lang.year !== undefined) {
          lang.year = settings.lang.year;
        }
        if (settings.lang.month !== undefined) {
          lang.month = settings.lang.month;
        }
        if (settings.lang.day !== undefined) {
          lang.day = settings.lang.day;
        }
      }

      let months = [1, 12];
      let days = [1, 31];
      let yearsList = [], monthsList = [], daysList = [];

      for (; years[0] <= years[1]; years[0]++) {
        yearsList.push(years[0] + lang.year)
      }
      for (; months[0] <= months[1]; months[0]++) {
        monthsList.push(months[0] + lang.month)
      }
      for (; days[0] <= days[1]; days[0]++) {
        daysList.push(days[0] + lang.day)
      }

      settings.dataList = [
        yearsList, monthsList, daysList
      ]
    }

    mergeOptions(instance, settings)

  }
  Vue.prototype.$picker.hide = () => {
    instance.show = false
  }

}
export default Picker