A vue component using Bootstrap 4 styles for date range selection

Overview

vue-date-range-picker

A vue component using Bootstrap 4 styles for date range selection

Vue-Treeselect Screenshot

Live demo (jsfiddle)

Features

  • Date range selection
  • Compare feature: select a second date range
  • No integration: DIY with your favorite vue components or js libraries
  • Bootstrap 4 styles (requires Bootstrap 4 CSS)
  • Returns Moment.js instances (requires moment.js)

Installation

npm install --save @havietduc91/vue-date-range-picker

Usage

Webpack

JavaScript

// Import the component
import DateRangePicker from '@havietduc91/vue-date-range-picker'
import '@havietduc91/vue-date-range-picker/dist/vue-date-range-picker.css'

export default {
  // Register the component
  components: { DateRangePicker },
  
  // Create a method for the submit event
  methods: {
    updateRanges: function(range) {
      ...
    }
  },
  ...
}

HTML template

<date-range-picker v-on:submit="updateRanges" />

API

Events

As the component needs to transmit multiple values (startDate, endDate, compare, startDateCompare, endDateCompare), it can not use v-model.

Instead, it triggers 2 events:

  • submit: when the submit button is clicked; provides an Object argument with the 5 attributes mentioned above
  • cancel: when the cancel button is clicked

Props

Prop Type Default Description
calendar-count Number 2 Number of calendars to display
allow-compare Boolean true Enable/disable the comparison feature
ranges Object { currentMonth: { ... }, lastMonth: { ... } } Predefined ranges displayed in select menu(s)
compareRanges Object { currentMonth: { ... }, lastMonth: { ... } } Predefined compare ranges displayed in select menu(s)
default-range-select String currentMonth Key of the range to select by default
default-range-select-compare String lastMonth Key of the range to select by default (compare)

Development

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies

npm run build

Inspiration

TODO

  • Tests
  • CSS without bootstrap dependency
Owner
Hà Việt Đức
Fullstack Web Developer
Hà Việt Đức
Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js.

Litepie Datepicker is a date range picker component for Vue.js and Tailwind CSS, dependent to day.js. Documentation For full documentation, visit lite

Ken 199 Jan 20, 2022
a date-range-picker follows the Material Design spec powered by vue.js (alpha)

Document | 中文文档 If the document is not accessible, please open an issue, I will fix it right away. v-md-date-range-picker Material Design DateRangePic

小小鲁班 67 Oct 27, 2021
A date-range-picker follows the Material Design spec powered by vue.js

A date-range-picker follows the Material Design spec powered by vue.js

小小鲁班 67 Oct 27, 2021
Range date picker with simple usage

VueRangedatePicker Date picker with range selection Demo https://bliblidotcom.github.io/vue-rangedate-picker/demo/ Installation npm install --save vue

Blibli.com 216 Dec 15, 2021
VueJS component to select dates & time, including a range mode

VueCtkDateTimePicker A vue component for select dates (range mode available) & time This documentation is for v2.*. Find v1 documentation here Dark mo

Chronotruck 790 Jan 16, 2022
A vue2 range datepicker

A simple range datepicker based on Vue2

HC 3 Sep 13, 2021
A vue date picker component inspired by material design

Vue Date Picker A vue date picker component inspired by material design Contents Installing Examples Formatting Selected Date API Installing $ npm ins

Trevor Stacy 57 Nov 6, 2021
Datepicker component for vue.js built with Tailwind CSS, and the day.js date library.

Datepicker component for vue.js build with Tailwind CSS & dayjs date library

Ken 183 Dec 15, 2021
An easy-to-use and customizable date picker component powered by Vue js

vue-datepicker An easy-to-use and customizable date picker component powered by Vue js Demo:s https://codesandbox.io/s/eager-rubin-5zcm9 Install npm i

Krijan Niroula 2 Dec 4, 2021
Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and more.

vue-datetime Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and more. Demo Go to demo. Installation Bundler (We

Mario Juárez 984 Jan 6, 2022
A vue plugin to select jalali date and time

vue-persian-datetime-picker A vue plugin to select jalali date and time See documentation and demo at vue-persian-datetime-picker Installation browser

Mohamad Talkhabi 498 Jan 16, 2022
A Vue project - single date picker

A Vue project - single date picker

null 16 Jun 11, 2021
A vue plugin to select jalali date and time

vue3-persian-datetime-picker A vue plugin to select jalali date and time See documentation and demo at vue-persian-datetime-picker. If you are using v

Mohamad Talkhabi 26 Jan 11, 2022
Lightweight and mobile friendly date time picker based on Vue.

Vue date pick Lightweight and mobile friendly date time picker based on Vue. Vue date pick emphasizes performance, elegant and usable UI on all screen

Damir Brekalo 230 Jan 10, 2022
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.

Vue 3 Datepicker A datepicker Vue component. Compatible with Vue 3 Only Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dat

shubhadip 19 Jan 16, 2022
Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped

DraggableCal A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Available Languages Dev & Build Licence Thanks Demo To view a demo

Tom 82 Jan 5, 2022
A Vue component of formatting dates using moment.

el-moment A Vue component of formatting dates using moment. Installation yarn add el-moment moment # npm i el-moment moment -S Usage import ElMoment f

null 9 Oct 18, 2018
[Deprecated] calendar and datepicker component with material design for Vue.js

vue-datepicker calendar and datepicker component with material design for Vue.js Demo The demo page is HERE. Requirements Vue.js ^1.0.0 & ^2.0.0 momen

Awe 704 Dec 9, 2021
A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations

Datepicker A datepicker Vue component. Compatible with Vue 2.x Demo Install Usage Date Formatting Props Events Disabled dates Highlighted dates Transl

Charlie Kassel 2.5k Jan 19, 2022