damienroche/vue-mj-daterangepicker

🗓Vue.js date range picker with multiples ranges and presets (vue 2.x)

vue-mj-daterangepicker

Installation

You need Vue.js version 2.0+.

1 Install via npm

npm install vue-mj-daterangepicker
yarn add vue-mj-daterangepicker

2 Import and use

import Vue from 'vue'
import DateRangePicker from 'vue-mj-daterangepicker'
import 'vue-mj-daterangepicker/dist/vue-mj-daterangepicker.css'

...

Vue.use(DateRangePicker)

Props

Name	Type	Default	Description
locale	String	en	set the locale ['de', 'es', en', 'fr', 'ru']
from	String	null	ISO-8601 date of start range
to	String	null	ISO-8601 date of end range
begin	String	null	ISO-8601 date to display since beginning range
allowFrom	String	null	ISO-8601 date to disable selection of all dates before (strict)
allowTo	String	null	ISO-8601 date to disable selection of all dates after (strict)
past	Boolean	true	allow/disallow user to select past dates
future	Boolean	true	allow/disallow user to select future dates
panel	String	null	choose which panel to be open by default
panels	Array	[ 'range', 'week', 'month', 'quarter', 'year' ]	choose which panels to be available
yearsCount	Number	2	number of past/future years to display in year panel
showControls	Boolean	true	show bottom controls
theme	Object	see customize section	customize colors
width	String	'auto'	set component width
resetTitle	String	'Reset'	change Reset button title
submitTitle	String	'Submit'	change Submit button title
presets	Object	see preset section	select which presets to be available
rangeDisplayed	String	'to'	select which range is visible when calendar is displayed

Customize

theme = {
  primary: '#3297DB',
  secondary: '#2D3E50',
  ternary: '#93A0BD',
  border: '#e6e6e6',
  light: '#ffffff',
  dark: '#000000',
  hovers: {
    day: '#CCC',
    range: '#e6e6e6'
  }
}

Presets

available presets : ['custom', 'today', 'yesterday', 'tomorrow', 'last7days', 'next7days', 'last30days', 'next30days', 'last90days', 'next90days', 'last365days', 'next365days', 'forever']

warning: forever need begin props to be set.

Events

This datepicker emit three events, @update, @select and @reset

@update is triggered when submit button is clicked. @select is triggered when a range is selected, can be useful if you don't want to show bottom controls (with showControls = false) @reset is triggered when reset button is clicked

All return an object with the start and end date, plus the active panel

{
  to: '2019-04-23T10:26:00.996Z',
  from: '2018-04-23T10:26:00.996Z'
  panel: 'range'
}

Examples

<template>
  <date-range-picker :from="$route.query.from" :to="$route.query.to" :panel="$route.query.panel" @update="update"/>
</template>

<script>

export default {
  methods: {
    update(values) {
      this.$router.push({ query: Object.assign({}, this.$route.query, {
        to: values.to,
        from: values.from,
        panel: values.panel
      }) })
    }
  }
}
</script>

vue-mj-daterangepicker's Issues

Add api to set default preset selection

Currently, 'custom' is hardcoded to be the default selected presets.

vue-mj-daterangepicker/src/components/DateRangePicker.vue

Line 165 in b3782e2

preset = 'custom'

can we add an api to pass default preset selection? for example I may want 'next7days' to be the default selected presets.

thank you.I can open the pr if you want me to

Year panel selection with future false breaks

Year panel selection with future false causes browser to toss the long script warning. even if I set the yearsCount to 0. It should simply not show the future years but the right count of years in the past.

the 'currentPanel' is not updated when updating the 'panel' prop

By default i want month and week panel to be available but when you click a certain button i have written code to update the 'panel' prop. But the calander is not updated and when i look what is stored in the 'currentPanel' data variable it is still month and week. Is it possible to update this?

Get rid off node-sass

Nobody wants node-sass in its project dependencies.

Namespace for element classes

Hello, it's very common now a days to use webpack to filter-out unused classes from css files. Adding a namespace so that all styles related to this component, specially since the DOM isn't present on html files which is what webpack looks over. having a consistent namespace for classes would make it very easy to whistlist classes

Month Range

Is this library support to select the month range?

No .d.ts available.

There's no .d.ts available for this, so can't just use when you develop in TypeScript.
https://definitelytyped.org/

other locales

Is possible to add other locales like 'es'?

Thanks

[Enhancement] Is it possible click on month or year

Is it possible that if user open week panel and if he wants to change the year or month of opened calendar then on click on month it will open month panel from which they can select month and the functionality of selecting week for that panel remain same.

[question, enhancement] is it possible to highlight public holidays?

Is it possible to provide a list of dates which can be highlighted as holidays? or maybe a pill type hover to say which holiday it is?

How to add a new language?

I'd like to add a new language, but I currently have no clue on how to do that.

Can I add a language without having to change the source code?

$attrs is readonly error

I have used the same code as described in the example. (in laravel-vue working project). After istalation i saw this errors in browser console:[Vue warn]: $attrs is readonly and [Vue warn]: $attrs is readonly and [Vue warn]: $listeners is readonly.
Before this error wasnt exists((( Is this problem from datepicker or this depends on some special config of my app? Thanks

presets buttons only work on first DateRangePicker in v-for loop

<div v-for="(Device,key) in Devices" :key="key">
<date-range-picker :ref="Device.Id"  @update="update" :theme="dateRangeTheme"  :from="Device.startDate" :to="Device.endDate" :presets='presets' :panels="['range', 'week', 'month']"/>
</div>

Only the first iteration of the date-range-picker component allows me to change the presets. The others don't respond when I click the input button. Although the Submit and Reset ranges buttons work still. I'm not receiving any errors in my console.

Is there a option to show 6 weeks in range panel when first day of month is Sunday

As plugin show only 5 weeks in panel therefor if first day of month is last day of week of previous month then it will not appear in current calendar month. Like in attach image 1st March 2020 is not shown in March 2020 calendar.

Show the range from begin month

Hi, Damien!
You made a great date range picker!
I have a question about start and finish range date begin.

What's the point?
Today is 09 March. I set the date range from 15 March to 05 April and save it.
Then I refresh the page, after page is loaded I see that current month setted as April (because the end range is next month and i do not see March), it would be better if calendar could begin from Start range - March!

What I see when page is loaded: (End of the range)

What i expected to see: (Start of the range)

I try to use begin param with a start date, but it does not help.

<date-range-picker 
    ref="rangepicker"
    :begin="'{{ $item->start }}'"
    :from="'{{ $item->start }}'" 
    :to="'{{ $item->finish }}'" 
    :past="false" 
/>

Btw, it would be useful to add a Home icon (or a method to quickly back to the current day, but without it selected)

¿could I set a default preset selected?

I save dateFrom and dateTo in localstorage or cookie to set up it after page reload. If I set lastDay preset i need remember it.

You know that I meen?

Present sets!

The ability to select a date range not from today but from an arbitrary date of 3 months? or year? it would be nice to present

The date-range-picker does not even show-up.

First of all thanks to the wonderful plugin. The design looks very neat and superb.

The picker does not even show up in the component I have used.
I have used the same code as described in the example.
There are no errors in the console though.

<date-range-picker begin="2016-02-19T00:00:00.000+01:00" :from="from" :to="to" :panel="panel" :theme="theme"/>

<script>

export default {
  name: "SampleComponent",
  data: () => ({
    to: '2019-04-23T10:26:00.996Z',
    from: '2018-04-23T10:26:00.996Z',
    panel: 'range',
    theme: {
      primary: '#46C3A3',
      secondary: '#2D3E50',
      ternary: '#93A0BD',
      light: '#ffffff',
      border: '#e6e6e6',
      dark: '#000000',
      hovers: {
        day: '#CCC',
        range: '#e6e6e6'
      }
    }
  }),
  methods: {
    update(values) {
      this.$router.push({
        query: Object.assign({}, this.$route.query, {
          to: values.to,
          from: values.from,
          panel: values.panel
        })
      });
    }
  }
};

</script>

The initialisation is done in the application.js

import Vue from "vue";
import DateRangePicker from 'vue-mj-daterangepicker'
import 'vue-mj-daterangepicker/dist/vue-mj-daterangepicker.css'

Vue.use(DateRangePicker)

Is it possible to activate the data 'day selector' value

I want to make the 'day picker' data value = true. How can i change this. There is nothing about it on the documentations and no props to update the value. I know its effect and functions by updating it by the vue devtools

How to set the first day of the week?

The first day of the week is not always Monday in some of the countries, is the picker aware of that?

If not, how can I set the first day of the week as a prop? (Here is an example: https://element.eleme.io/#/en-US/component/datetime-picker#picker-options)