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>
  <date-pills v-model="form.selectedDate" />
</template>

Localization

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

<template>
  <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;
}