Hi there, Could anybody please give an example how to import the language dependencies via webpack, too? Am I missing something?

@import Datepicker from 'path/to/node_modules/vanillajs-datepicker/js/Datepicker.js';
==
import { Datepicker } from 'vanillajs-datepicker';

@import de from 'path/to/node_modules/vanillajs-datepicker/js/i18n/locales/de.js';
== 
???

Thanks in advance and best regards!

Module not found: Error: Can't resolve 'vanillajs-datepicker'

Typically, when using npm packages; I can simply require them via their namespace. No matter what I try with this project, it cannot find the module. I've also tried the path supplied in the docs. Its a Laravel 6/Bootstrap 4 project. Compiling using Mix.

Any idea what I am doing wrong?

It looks really odd that the input field loses focus for a short moment when you click somewhere on the picker. This seems to be easily fixable:

1. In file pickerListeners.js add the following function:

  export function onMouseDownPicker(ev) {
    ev.preventDefault();
  }

2. In file Picker.js import also onMouseDownPicker and register it:

      ...
   
      import {
        ...
        onMouseDownPicker
      } from '../events/pickerListeners.js';
   
      ...
   
          registerListeners(datepicker, [
             ...
             [element, 'mousedown', onMouseDownPicker],
             ...
          ]);
   

@mymth Please let me know what you think of this enhancement. I could prepare a PR if you like.

Hello, Thank you for this great library.

I do have a minor issue. The minDate doesn't work. I tried to set it to today's date, but all previous dates remain active.

First, many thanks for this great project. vanillajs-datepicker is remarkably flexible, but you currently cannot really use it with custom elements in shadow DOM. There are two showstoppers:

1. Option container should not only allow a string vaue but also an HTMLElement instance (as document.querySelector will not find elements in the shadow DOM).

   These lines here: https://github.com/mymth/vanillajs-datepicker/blob/4843b2f8527e0dda08db9d12091796f0e570fce7/js/Datepicker.js#L156-L159
   could be replaced by:

   const container =
       options.container instanceof window.HTMLElement
         ? options.container
         : typeof options.container === 'string'
         ? document.querySelector(options.container)
         : null;
   
     if (container) {
       config.container = container;
     }
   

2. document.activeElement is not working if a corresponding input element is in shadow DOM. See: https://github.com/mymth/vanillajs-datepicker/blob/4843b2f8527e0dda08db9d12091796f0e570fce7/js/events/otherListeners.js#L7-L9

   Couldn't that just be replaced with the following?

   if (!datepicker.active) {
     return;
   }
   

Would be extremely great if these two issues could be fixed. Let me know if I shall prepare a PR. TYVMIA.

Hello,

I have a problem with the focused class being added to the current date. When they move from March to April, April 29 becomes active, why? This is not today's date.

Every month, the 29th of the month has focused class, which in my opinion should only be March. The problem also occurs in the demo: https://raw.githack.com/mymth/vanillajs-datepicker/v1.1.4/demo/

Can you help me with this?

Hey there I recently thrown out all of jQuery / bootstrap of a project and used your plugin as a replacement. Works flawlessly and mostly perfect. Our setup is a daterange picker for different view levels in date, month or year view, so users can live-edit by clicking between their view level.

One thing we recognized during testing is that when switching to either day or month view the range-dates set by minDate and maxDate are not selectable anymore. I tracked the problem down to the date validation and parsing based on the format.

What I found out (I do not open a PR but simply describe here as it is quicker for me for the moment):

In Datepicker.js following lines do check if we are in month / year view. The problem comes when we set new options by the API method setOptions and internly the processOptions / validateDate functions parse the Dates. https://github.com/mymth/vanillajs-datepicker/blob/9de5051545626b116db3d213b0b1e429f296967c/js/Datepicker.js#L36-L59

What I pass in to the options:

minDate: "2019-10",
maxDate: "2021-03",
format: "yyyy-mm"
...

For todays date (2021-03-25), I added a console-log at following position: https://github.com/mymth/vanillajs-datepicker/blob/9de5051545626b116db3d213b0b1e429f296967c/js/options/processOptions.js#L24-L28 retrieving following output dates - time values rewritten in readable format (here only the max-date):

{
  value: "2021-03",
  format: "yyyy-mm",
  origValue: "2021-03-25"
  returnValue: "2021-03-01"
}

The return value for the max-date is not useful, as it reflects the beginning of the month, not the ending. What struggles me more is that for the rangeEnd range-check now the maxDate is correctly set to the last day of the month but checked against the first day of the month, which then leads to a blocked selectable month in the picker (when clicking, nothing happens).

The same problem comes when using year format, the max-range year is not selectable.

I guess there are now several possible fixes, one way I fixed the problem locally is by modifying the min- and max-date ranges in Datepicker.js (the lines referenced at the beginning) as following:

  let newDates = inputDates.reduce((dates, dt) => {
    let date = parseDate(dt, config.format, config.locale);
    if (date === undefined) {
      return dates;
    }
    let minDate = config.minDate
    let maxDate = config.maxDate
    if (config.pickLevel > 0) {
      // adjust to 1st of the month/Jan 1st of the year
      // or to the last day of the monh/Dec 31st of the year if the datepicker
      // is the range-end picker of a rangepicker
      const dt = new Date(date);
      if (config.pickLevel === 1) {
        // MONTH
        date = rangeEnd
          ? dt.setMonth(dt.getMonth() + 1, 0) // set to last day of month
          : dt.setDate(1); // set to first day of month
      } else {
        // YEAR
        date = rangeEnd
          ? dt.setFullYear(dt.getFullYear() + 1, 0, 0) // set to last day of year
          : dt.setMonth(0, 1); // set to jan 1st
      }
      // We need to also adjust the month / year view for min and max dates
      maxDate = config.pickLevel === 1
        ? (new Date(maxDate)).setMonth(dt.getMonth() + 1, 0) // set to last day of month
        : (new Date(maxDate)).setFullYear(dt.getFullYear() + 1, 0, 0) // set to last day of year
      minDate = config.pickLevel === 1
        ? (new Date(minDate)).setDate(1) // set to first day of month
        : (new Date(minDate)).setMonth(0, 1) // set to jan 1st
    }

By updating the min/max ranges now the isInRange method correctly allows the selection of the upper range month / year, in my example 2021-03.

Hope this helps. Maybe I open a PR later, but feel free to do it yourself.

Is there a way to not bind the component to an input element? I need to open the calendar when user clicks on a div, show the floating calendar positioned absolute with a given (x, y) offset relative to the clicked div then upon selecting a day from the calendar, it needs to update a variable. Also when calendar pops up the selected day should be that of the variable's value.

Trying to hack it right now by binding to a hidden input but its an ugly solution especially when I don't see a way to control the calendar's positioning. It would be nice if datepicker.show() would accept some parameters to control positioning like this:

datepicker.show(atElement, {x: 4, y: 15});

Where calendar would be positioned at x, y offset from the location of given element.

Please forgive the noob-ness of this question, but I am wondering how I can listen for when a date is selected to call a function. In my case, I wish the page to reload with a new URI using the date when a selection occurs. (window.location.href = urlNew; // where urlNew is generated to include a Date-parameter based on the selected date)

Enhances Datepicker to allow user to extend picker by adding custom buttons with specified dates, like for example Yesterday, Start/End of Quarter, Birthdays :) and many more, user provided dates. Allows users to add more than one button, though not recommanded to have more than 2 for better UX.

This PR includes the changes to

1. Datepicker and DateRangepicker API to allow users to add button with label and function that provides the date.
2. Add implementation in Picker UI and a place holder for these buttons in pickerTemplate and add new quick control template
3. Add test cases to Datepicker to test new API
4. Styling to these new buttons, similar styling as Clear/Today button to be consistant with rest of UI
5. Finally, add them to demo code that demonstrates this new feature

Potential issues not tested are buttons are diplayed at top when Picker pops up than down; and when user provided function takes long time to return a date (calls a remote server etc.), could degrade the performance of Picker UI. Considering the simple scenarios of user function returns quickly returns outweights these issues, hopefully.

The current behavior for setting dates which are not within the given minDate maxDate range is to just ignore them. When the datepicker is not used to pick the date but the date is entered by hand there is no feedback about the wrong date. There is no way to display a warning or hint, either. Additionally the state between input element value and the datepicker date(s) diverge and if the selected date is processed through Datepicker#getDate(), the user enters a date which he/she is not aware of. I'm currently thinking of a softer approach which allows to set invalid dates when entering them using the keyboard. In this case, the minDate and maxDate could prevent dates to be picked using the picker. Additionally there could be a small API which allows to check the state (valid/invalid) of the entered dates like Datepicker#isDateValid() or perhaps an event like dateInvalid. The latter could be used e. g. to change the border color or other. What do you think?

Will be nice to do something like next:

{
  ...
  daysOfNextMonth: false,    //  default is true
  daysOfPreviousMonth: false,    //  default is true
  ...
}

Might be even I can try to implement it. So, what you think?

From my understanding, if one doesn't append the year to a date, then only the current year's is disabled, but if the year is appended then same date of different years doesn't get disabled.

Is recurrence of disabled dates possible? If not, is it not in the spirit of the plugin to implement this possibility?

Thank you for this nice plugin.

Hello! really appreciate all the hard work you've put into this library!

I use it for a site where you can visualise your family tree generations back. Because of this, when you go back in time, some dates will be approximate. Maybe you just know the year, or just a year and date. In the backend I support this by allowing both YYYY-MM-DD, YYYY-MM, and YYYY in the same field. I'd like to allow the user to type in those values, no need to support them in the actual picker.

Problem is, I the datepicker seems to try to parse the year to a full date.

It looks like I should be able to give a private format option, define a toValue and toDisplay value. But I can't figure out how to reuse all of your wondeful existing logic. I don't want to copy your whole parser, so I was hoping that I could call that existing parser, except for the cases where the format matches YYYY-MM or YYYY...

Is there someone that reads this that could give some pointers that can help me achieve this?

My setup is as simple as this:

var options = {
    format: "yyyy-mm-dd",
    weekStart: 1,
    format: {
        toValue(date, format, locale) {
            ...
        },
        toDisplay(date, format, locale) {
            ...
        },
    },
};
var elements = document.querySelectorAll('.date input');
elements.forEach((elem) => { new Datepicker(elem, options) });

Hi,

I really like your datepicker. I use it as a meal planner. Each time a user connects, I will look for the dates in a db. But the view is automatically on the last date. I would like the focus to be on today's date.

Do you think this feature is possible?

Thanks!