storageddd / vue-date-pills

Lightweight complete date pills component for filtering data by date range based on Vue 3 and DayJS

vue-date-pills

Lightweight complete date pills component for filtering data by date range based on Vue 3 and DayJS

Description

Some mobile interfaces includes choice month intervals for grab related data. Also it based on dates range. Vue data pills created for solve this issue and makes it easy.

Features

• Month range selection
• Year range selection
• Flexible date format
• Mobile compatibility
• Locale support
• Ease CSS vars customization
• Lightweight
• SSR support
• Included type definitions

Sections

• Demo
• Installation
• API
  • Props
  • Events
• Examples
  • Basic usage
  • Localization
• Styling

Demo

https://storageddd.github.io/vue-date-pills/

Installation

Note: package based and depends on Vue 3 and DayJS libraries and its excludes from build by vite. You must install in manually.

yarn add vue-date-pills

# or

npm install vue-date-pills

Import and register component

Global

import { createApp } from 'vue';
import App from './App.vue';

import VueDatePills from 'vue-date-pills';
import 'vue-date-pills/dist/style.css';

const app = createApp(App);
app.component('VueDatePills', VueDatePills);

Local

<script>
  import VueDatePills from 'vue-date-pills';
  import 'vue-date-pills/dist/styles.css';
    
  export default {
    components: { VueDatePills }
  }
</script>

API

Props

Name	Type	Default	Description
modelValue	object	null	Default property for v-model
dateTo	string	2022-01-01	Date until shown pills
format	string	YYYY-MM-DD	Date format. Can used any supported format by DayJS
mode	string	month	Mode of range pills. Available variants: month and year
locale	string	en	Localization name. Can used any supported by DayJS
wrap	boolean	false	Container wrap mode (same as flex)

Events

Name	Parameters	Description
@update	value	Emitted when model changed
@change	value	Emitted in the same scenarios as in @update

Examples

Basic usage

For control the value component uses v-model. You can use DayJS methods like dayjs().startOf('month').format('YYYY-MM-DD') for filling current value or if you leave null, component will fill it after initialization and also fire update event.

<script setup>
const form = reactive({
  selectedDate: {
    dateStart: '2023-04-01',
    dateEnd: '2023-04-30'
  }
});
</script>

<template>
  <vue-date-pills v-model="form.selectedDate" />
</template>

Localization

<script setup>
import 'dayjs/locale/es';
...
</script>

<template>
  <vue-date-pills v-model="form.selectedDate" locale="es" />
</template>

Styling

You can very easy and flexible customize styles as you want:

:root {
  --date-pills-font-size: 14px;
  --date-pills-font-family: Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif;
  --date-pills-font-weight: normal;
  --date-pills-color: #262626;
  --date-pills-background-color: #ebebeb;
  --date-pills-hover-background-color: #e5e5e5;
  --date-pills-active-color: #ffffff;
  --date-pills-active-background-color: #262626;
  --date-pills-transition: all .3s cubic-bezier(.645, .045, .355, 1);
  --date-pills-padding: 8px 16px;
  --date-pills-gap: 8px;
  --date-pills-border-radius: 16px;
}