移動端vue仿安卓系統日曆選擇器

終於坑坑坑上了…

描述

這是一個基於vue的日期選擇組件，支持按周和按月份顯示(默認按周顯示，下滑按月顯示)。

安裝

npm install vv-calendar -s

使用

屬性

name	type	Value
type	string	month / week，分別代表顯示周、月，和只顯示周。
configDayData	array	在某些天上需要加上的標識數據

事件

name	type	arguments	callback
selectDateChange	function	date	返回當前選中的日期相關數據

import Vue from "vue";
import Calendar from "vv-calendar";
Vue.use(Calendar);

<Calendar
  v-model="selectedDate"
  :select-date-change="onSelectDateChange"
  :config-day-data="calendarConfigDayData"
  type="month"
/>

 data() {
    return {
      selectedDate: new Date(),
      calendarConfigDayData: [
        { date: 1586706786234, numberCount: 3 },
        { date: 1585842786000, numberCount: 1 },
        { date: 1586361186000, numberCount: 2 },
        { date: 1586351186000, numberCount: 216 }
      ],
    };
  },
  methods: {
    onSelectDateChange(date) {
      this.selectedDate = date.date.timeString;
      console.log(date);
      console.log(this.selectedDate);
    },
  }

GitHub ：稍等，還沒上傳~