vue daterange-picker component

Overview

vue-daterange-picker

A vue component for picking range of dates.

Install

npm install vue-daterange-picker --save

import in project:

  import VueDaterangePicker from 'vue-daterange-picker';
  
  components: {
    VueDaterangePicker
  }

Dependencies:

vue-clickaway: npm install vue-clickaway --save

momentJS: npm install moment --save

Props:

Component expects properties:

start-date: String

end-date: String

format 'MM/DD/YY'. And then it will initiate callendar between these dates.

double: Boolean

display single callendar or double callendar.

format: String

changes the format of the inputs (default: 'MM/DD/YYYY')

title-format: String

changes the format of the calendar months (default: 'MMMM Y')

start-place-holder: String

changes the text in the start Date placeholder.

example: start-place-holder="01/01/2018"

end-place-holder: String

changes the text in the end Date placeholder.

example: end-place-holder="01/01/2018"

example:

When click away or hit escape key the component fires event 'get-dates' that contains an object with startDate and endDate keys holding values of start date and end date in utc format.

  <vue-daterange-picker 
      double 
      start-date="06/10/2017" 
      end-date="06/10/2018" 
      start-place-holders="12/01/2017"
      end-place-holders="04/01/2018"
      @get-dates="getDates"/>
Issues
  • Handeling dates before startDate

    Handeling dates before startDate

    hey mate,

    Iv'e added a small change when selecting start date. Iv'e noticed that after you select a start date there is a small chance that the end date will be before the start date. So i added a small change that when he chooses the end date it will disable the selection of dates before the start date (when he re-enters he will be able to choose the start date again from the disabled dates of course).

    Ron

    opened by merkinron 3
  • Adding dates placeholders

    Adding dates placeholders

    Instead of having one placeholder for both starting date and ending date. now we can differ and choose the placeholder for both starting date and ending date.

    opened by merkinron 2
  • Deprecation warning from Moment

    Deprecation warning from Moment

    I'm getting this warning: moment.js?cbd3:293 Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

    I'm using moment 2.18.1

    opened by jamiechong 1
Owner
Zlatko
name: Zlatko Iliev birth date: 31/05/1985 hobby: web design, web dev occupation: Full stack web Developer skills: React.js, Vue.js, Node.js, MongoDB, Sass
Zlatko
Vue date range picker component

A responsive date range picker for Vue.js that displays the number of nights selected and allow several useful options like custom check-in/check-out

Krystal Campioni 724 Jan 24, 2022
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 Color Picker Component Based on Vue And Element-UI Supports Drag And Drop

@toc Introduction 简介 This is a color picker component based on vue and element-ui. It is powerful and supports drag and drop, color picking and other

null 0 Dec 7, 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
VueJS Monthly Picker component

vue-monthly-picker Vue Monthly Picker Components Checkout demo at https://ittus.github.io/vue-monthly-picker/ Support Install npm install vue-monthly-

Thang Minh Vu 63 Jan 2, 2022
Fast, powerful and easy to use component datetime picker for VueJS

Vue Datetime Picker Fast, powerful and easy to use component datetime picker for VueJS. The component includes localization, highlight and disable dat

Vladyslav Shchepotin 29 Sep 22, 2021
A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support

Vue2 Timepicker ?? Dead repo recharged ?? A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support. Demo You can see

Phoenix Wong 419 Jan 15, 2022
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
🕒 Simply customizable powerful time picker for Vue.js

vue-timeselector ?? Simple customizable Vue.js timepicker component vue-timeselector is a Vue (2.x) component that gives you ability to select a time

Alexis Colin 40 Oct 27, 2021
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 Vue project - single date picker

A Vue project - single date picker

null 16 Jun 11, 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
Vue time picker!

Vue Time Picker DEMO Simple, no nonsense time picker built and optimized for Vue. Installation Yarn yarn add -D @tygr/vue-time-picker import TimePick

Tyler Grinn 6 Oct 28, 2020
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
A dead simple and elegant month picker for Vue

vue-month-picker A lightweight month picker for Vue.js with no dependencies. Install npm npm install --save vue-month-picker yarn yarn add --save vue-

Andreas Rein 32 Jan 14, 2022
Just emoji picker created in Vue.js

Emojis Emoji picker coded with Vue.js. Includes fast search engine by keywords of icons. Click emoticon to copy it into your clipboard. ?? Demo link F

Kacper Stawiński 5 Aug 3, 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
Vuetify datetime picker with input fields

Vuetify plugin VDatetimeField Vuetify datetime picker with input fields ?? Featu

null 0 Dec 30, 2021
[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