vue-datepicker icon indicating copy to clipboard operation
vue-datepicker copied to clipboard

disabledDates ranges but inclusive

Open NindaKhairunisa opened this issue 3 years ago • 3 comments

Hi, I just wondered it is possible to do disableDates with ranges but inclusive? For example i want datepicker is open in October 2019 and October 2022 only. I can't figure out how to do it Thank you

NindaKhairunisa avatar Oct 13 '22 16:10 NindaKhairunisa

Not currently... but you can get around this with something like the following:

<Datepicker
  :open-date='new Date(2019, 9, 1)'
  :disabled-dates="{
    to: new Date(2019, 9, 1),
    from: new Date(2021, 9, 31),
    ranges: [
      {
        from: new Date(2019, 9, 31),
        to: new Date(2021, 9, 1),
      }
    ]
  }"
/>

N.B. I added an open-date as without this, the calendar opens on today's month with the focus on the previous button. We should probably amend this so that - by default - the calendar focuses the last available date?

mst101 avatar Oct 14 '22 14:10 mst101

@mst101 thank you it work sorry not replying for a week

NindaKhairunisa avatar Oct 20 '22 08:10 NindaKhairunisa

You're welcome.

Personally, I'm not a great fan of the way these to/from dates work currently... I'd prefer it if they were INCLUSIVE i.e. in the above example, you would disable all dates up to (and including) 30th September 2019, and also from 1st October 2021 and beyond. You'd also have a disabled date range between the two years i.e. from 1st November 2019 up to (and including) 30th September 2021. Would that make more sense to you?

<Datepicker
  :open-date='new Date(2019, 9, 1)'
  :disabled-dates="{
    to: new Date(2019, 8, 30),
    from: new Date(2021, 10, 1),
    ranges: [
      {
        from: new Date(2019, 10, 1),
        to: new Date(2021, 8, 30),
      }
    ]
  }"
/>

@MrWook - what are your thoughts on this? I did raise this in #176 but have kept things as they were for now. Happy to submit a PR, if you like?

mst101 avatar Oct 20 '22 09:10 mst101