vue3-range-calendar
TypeScript icon, indicating that this package has built-in type declarations

0.3.3 • Public • Published

Vue3-range-calendar

Overview

Vue3-range-calendar is a calendar UI component library for picking date, week, month, year ranges, with zero dependencies and high customizability for Vue3.

Installation

npm

yarn add vue3-range-calendar
# or
npm install vue3-range-calendar

Install component to the Vue instance.

import { createApp } from 'vue'
import rangeCalendar from 'vue3-range-calendar'
import 'vue3-range-calendar/dist/styles/index.css'

const app = Vue.createApp({...})
app.use(rangeCalendar)

Then you can use the range calendar on your component.

eg.

<script setup>
const start = ref<Date | null>(null)
const end = ref<Date | null>(null)
</script>


<template>
  <p>start: <input v-model="start" type="text" /></p>
  <p>end: <input v-model="end" type="text" /></p>
  <range-calendar v-model:start="start" v-model:end="end" />
</template>

Documentation

To check out examples and options, visit here.

Package Sidebar

Install

npm i vue3-range-calendar

Weekly Downloads

92

Version

0.3.3

License

MIT

Unpacked Size

96.4 kB

Total Files

12

Last publish

Collaborators

  • azurewarth