a date-range-picker follows the Material Design spec powered by vue.js (alpha)

Overview

Document | 中文文档

If the document is not accessible, please open an issue, I will fix it right away.

v-md-date-range-picker

Material Design DateRangePicker for Vuejs 2.0


NPM Package Version Build Status NPM Download Count

Pictures for Examples

WX20190522-193329@2x

WX20190522-193351@2x

Getting Started

Installation

npm install v-md-date-range-picker --save

# or use yarn
yarn add v-md-date-range-picker

Quick Start

you can use vue-cli to create project

1. npm install -g @vue/cli # or yarn global add @vue/cli
2. vue create hello-world
 <!-- App.js -->
<template>
  <v-md-date-range-picker></v-md-date-range-picker>
</template>
// main.js
<script>
import Vue from 'vue';
import VMdDateRangePicker from "v-md-date-range-picker";

Vue.use(VMdDateRangePicker);
</script>

Build

Powed by following:

Comments
  • [Bug Report] CSS doesn't install/import

    [Bug Report] CSS doesn't install/import

    CSS doesn't exist nor import:

    import "v-md-date-range-picker/dist/v-md-date-range-picker.css";

    Looking into the vendor files for dist, and there is no CSS. Based on documentation installation, this is not ready out of the box.

    https://ly525.github.io/material-vue-daterange-picker/#quick-start

    Bug Report 
    opened by timothymarois 3
  • build(bili): update moduleName and dependency version.

    build(bili): update moduleName and dependency version.

    update moduleName from MdDateRangePicker to VMdDateRangePicker and remove demos folder

    BREAKING CHANGE: module name will change from md-date-range-picker to v-md-date-range-picker

    released 
    opened by ly525 3
  • [Bug Report] TypeError: slotActivator.querySelector is not a function

    [Bug Report] TypeError: slotActivator.querySelector is not a function

    Describe the bug

    Error in v-on handler: "TypeError: slotActivator.querySelector is not a function"
    

    If you want to get the element of the input(or activator) slot, you should use this.$slots.input[0].elm, not this.$slots.input[0]

    https://github.com/ly525/v-md-date-range-picker/blob/2ca9e997e1109c5f53411bd08fd4e964793aba5e/src/components/Picker.vue#L241

    To Reproduce Steps to reproduce the behavior:

    <v-md-date-range-picker>
      <input type="text" slot="input" />
    </v-md-date-range-picker>
    

    Version Info (please complete the following information):

    • v-md-date-range-picker 2.5.0
    released Bug Report 
    opened by ly525 1
  • [Bug Report] click the inputbox twice, the picker panel is hidden

    [Bug Report] click the inputbox twice, the picker panel is hidden

    Describe the bug https://drive.google.com/open?id=1bdnvUcTP87sZhJPxH-v6ZDSrK1vcGvp1

    Expected behavior https://drive.google.com/open?id=1jfF0akVdOv7yKIa5hjCjDV_F30v7iA2U

    Version Info (please complete the following information):

    • v-md-date-range-picker v2.4.3
    released Bug Report 
    opened by ly525 1
  • [Bug Report]  the input box is updated when the start is clicked(click first time)

    [Bug Report] the input box is updated when the start is clicked(click first time)

    Describe the bug the date range picker should automatically update the value of the element when the selected dates change. (click apply button or click the end date(click two times) if you set autoApply)

    but in v2.4.1, the value of input element is updated whether the start is clicked (click the first time)


    -- Chinese -- 日期选择器应该在点击 end (设置了 autoApply) 或 点击 Apply 按钮, 之后再更新 input 的值。 在 v.2.4.1 版本中,点击了第一次之后,输入框的值就被更新了

    released Bug Report 
    opened by ly525 1
  • [Bug Report] When the date picker is not open by default, clicking on it's outer area will also triggers the change event

    [Bug Report] When the date picker is not open by default, clicking on it's outer area will also triggers the change event

    Describe the bug When the date picker is not open by default, clicking on its outer area will also trigger the change event (当日期选择器默认是不打开的时候,点击其外部区域,也会触发 change 事件)

    To Reproduce Steps to reproduce the behavior:

    1. <v-md-date-range-picker @change="handleChange" />
    2. if the date picker is hidden by default, clicking on its outer area will trigger change event(the handleChange event will be called)

    Expected behavior do not emit change event when the picker is hidden if you click the outer area of the picker

    Version Info (please complete the following information):

    • v-md-date-range-picker v.2.4.0
    released Bug Report 
    opened by ly525 1
  • [Bug Report] start and end were updated by clicking preset, but the calendar did't update

    [Bug Report] start and end were updated by clicking preset, but the calendar did't update

    Describe the bug start and end were updated by clicking preset, but the calendar didn't update.

    To Reproduce Steps to reproduce the behavior:

    1. if today is 2019-01-02
    2. click start and end: 2018-10-01, 2018-10-04
    3. click any preset like today or yesterday etc..
    4. you will see, the month of the left calendar didn't update to 2019-01

    Expected behavior the left calendar updated with the start date when the preset was clicked.

    Screenshots image

    Version Info (please complete the following information):

    • v-md-date-range-picker 2.1.1
    released Bug Report 
    opened by ly525 1
  • [Bug Report] The first click is the calendar on the right, the right calendar is rendered incorrectly

    [Bug Report] The first click is the calendar on the right, the right calendar is rendered incorrectly

    If the location of the first click is on the right calendar, and the right calendar was not fixed and moved left

    To Reproduce see more in this gif https://drive.google.com/file/d/1Ln4Q1nH8hImJ2jC9Yd4U6TgJfDDd_kW7/view

    Expected behavior if the first click is the right calendar, keep the right calendar still.

    • v-md-date-range-picker v2.1.0
    bug released Bug Report fixed 
    opened by ly525 1
  • Responsive Issue

    Responsive Issue

    Describe the bug Testing several times I got this issue of responsive behavior. In a resolution of (738px - 564px) while the calendar is open the calendar start to crop from left side after reaching in 564px resolution it changes to one column and solves the problem, but the problem lies in that specific resolution.

    To Reproduce Steps to reproduce the behavior:

    1. Go to 'Calendar'
    2. Click on 'Input section'
    3. reduce the browser size to '738px or less but greater than 565px '
    4. See error

    Expected behavior It should be in one column

    Screenshots

    Screenshot from 2021-01-30 13-48-46

    Screenshot from 2021-01-30 13-48-11

    Screenshot from 2021-01-30 13-52-58

    Version Info (please complete the following information):

    • OS: [e.g. Windows/Linux]

    • Browser [e.g. chrome, safari]

    • v-md-date-range-picker

    Bug Report 
    opened by Mithunjack 0
  • Is there any way to change the date format? (eg.: instead of 08/26/2019 I would like to 2019-08-26)

    Is there any way to change the date format? (eg.: instead of 08/26/2019 I would like to 2019-08-26)

    @rotigithub I'm so sorry. I had a busy weekend. There's a problem with the documentation, I will implement the function as soon as possible(maybe this week)

    Feel sorry about it

    Thank you! Another question: Is there any way to change the date format? (eg.: instead of 08/26/2019 I would like to 2019-08-26)

    Originally posted by @rotigithub in https://github.com/ly525/material-vue-daterange-picker/issues/65#issuecomment-524792944

    enhancement In progress 
    opened by ly525 2
  • How to unlink calendars?

    How to unlink calendars?

    Hi!

    I tried to unlink the calendars but I can't find any info in the documentation about this just that the default value of the linkedCalendar is true. How this works?

    Bug Report 
    opened by rotigithub 3
  • Disabled dates

    Disabled dates

    minDate: (Date or string) The earliest date a user may select. maxDate: (Date or string) The latest date a user may select.

    I need to block the selection before and after a set date range. Please help!!!

    In progress 
    opened by camilo0119 4
Releases(v2.6.0)
Vue3-daterange-picker - Date range picker component for vue made without jQuery dependency

vue3-daterange-picker A modified date range picker to run on Vue 3. The componen

ADEGBOYE JOSHUA 2 Aug 31, 2022
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 56 Nov 16, 2022
A simple Vue.js date and time picker made with material design in mind

vue-material-date-time-picker A date and time picker Vue component. Compatible with Vue 2.x. Performed in material design. Demo Install Usage Props NB

Technorely Inc 8 Feb 2, 2022
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 769 Dec 29, 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 346 Jan 3, 2023
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 Jul 8, 2022
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
A vue component using Bootstrap 4 styles for date range selection

vue-date-range-picker A vue component using Bootstrap 4 styles for date range selection Live demo (jsfiddle) Features Date range selection Compare fea

Antoine Matyja 28 Nov 23, 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 982 Dec 16, 2022
A Vue project - single date picker

A Vue project - single date picker

null 17 Oct 9, 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 247 Dec 8, 2022
Mobile friendly datetime picker for Vue. Supports date and datetime modes, i18n and disabling dates.

Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

null 0 May 1, 2020
Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.

null 0 Feb 7, 2019
Custom column type for RevoGrid component based on duetds-date-picker library

Custom column type for RevoGrid component based on duetds-date-picker library

Revolist 3 Apr 19, 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 86 Dec 1, 2022
[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 706 Nov 21, 2022
Vue Time Picker - A simple time picker for Vue with a Bootstrap style

Vue Time Picker - A simple time picker for Vue with a Bootstrap style

Justin Dowty 0 Feb 13, 2020
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 828 Dec 26, 2022
A vue2 range datepicker

A simple range datepicker based on Vue2

HC 4 Oct 30, 2022