damienroche / vue-mj-daterangepicker

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

Hi there 👋

vue-mj-daterangepicker's Issues

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)

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

Month Range

Is this library support to select the month range?

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

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/

¿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?

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

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.

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)

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)

other locales

Is possible to add other locales like 'es'?

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.

$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

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?

[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?

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

[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.

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.

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?

Get rid off node-sass

Nobody wants node-sass in its project dependencies.