Skip to content

轻量小巧的vue日历组件、picker(单选、多选、区间选择)

Notifications You must be signed in to change notification settings

kuan1/kuan-vue-calendar

Repository files navigation

kuan-vue-calendar

一个小巧轻量的 vue 日历组件和 picker,支持单选、多选、区域选择

预览地址

安装

yarn add kuan-vue-calendar
# or
npm i kuan-vue-calendar -S

使用

<template>
  <div class="test-container">
    <h2 class="sub-title">日历单选</h2>
    <calendar v-model="value" />
    <button @click="alert('value')" class="test-btn">确定</button>
    <h2 class="sub-title">日历多选</h2>
    <calendar v-model="value2" mode="multiple" />
    <button @click="alert('value2')" class="test-btn">确定</button>
    <h2 class="sub-title">日历区间</h2>
    <calendar v-model="value3" mode="range" />
    <button @click="alert('value3')" class="test-btn">确定</button>
    <h2 class="sub-title">日历picker</h2>
    <calendar-picker v-model="value3" mode="range" />
    <button @click="alert('value3')" class="test-btn">确定</button>
  </div>
</template>

<script>
  import { Calendar, CalendarPicker } from 'kuan-vue-calendar'

  export default {
    components: {
      Calendar,
      CalendarPicker
    },
    data() {
      return {
        value: '2019-07-21', // 单选
        value2: ['2019-07-09', '2019-07-20'], // 多选
        value3: ['2019-07-09', '2019-07-20'] // 区间
      }
    },
    methods: {
      alert(key) {
        alert(JSON.stringify(this[key]))
      }
    }
  }
</script>

修改日志

2.0.2

  • 显示星期(日历必有的功能,感谢这里的提醒issues/3

    2.0.0

  • 日历重写、使用方法发生改变

  • 添加日历 picker

  • bug 修复

    1.0.0

  • 样式修改

  • bug 修改

About

轻量小巧的vue日历组件、picker(单选、多选、区间选择)

Resources

Stars

Watchers

Forks

Packages

No packages published