mymth / vanillajs-datepicker Goto Github PK

Hello there,

probably the best and maintained datepicker out here. I've been using air datepicker for a long time, but it's not maintained anymore and there was not a better alternative, but there is now. Really thanks for you work!

To my question. currently there is option for range slider to slip it into two inputs, would be also possible to add option to make it in one input? eg. http://t1m0n.name/air-datepicker/docs/#example-range

It would also be nice to have an option to extend it into two calendars beside each other (in one input again), like here https://wakirin.github.io/Litepicker/ I think it could be more user friendly in some cases.

Hi,

the buttons to switch between the months are missing the type attribute. So when you click on a button a form submit is triggered. My current workaround for this is to search all buttons in the inline datepicker DIV and add the type.

import nodeEach from "../helper/_node-each.function.js";

const container = document.querySelector(".js--get-datepicker");
const dp = new Datepicker(container, {
  format: "dd.MM.yyyy",
  language: "de",
  todayBtn: false,
  todayHighlight: false,
});

const buttons = container.querySelectorAll("button");
nodeEach(buttons, (button) => button.setAttribute("type", "button"));

But it would be nice if the type "button" would be set by the script itself.

Hi there.

I'm using this Datepicker in an Electron app and it is working perfectly well. Thanks a lot for providing this script.

The only thing I am missing and cannot accomplish myself is to alter the click event behind the clear button.

In default config it will just trigger the .destroy() method if I am not mistaking. How am I able to not only trigger that particular method but also call a custom function?

Is there a way to limit the number of days between the two inputs with the DateRangePicker? Such as limiting the second date to be less than 30 days after first date selected or more than 90 days or even equal to 7 days.

We could use the changeDate API, with a little math and popup an alert if they exceeded the suggested time frame, but it would be easier if the calendar only offered dates within the specified period.

It would be nice to see a Bootstrap 5 (currently alpha) support.
The first step for migration is:

• replace "color-yiq" with "color-contrast" in the scss file.

Every time I select a day from the calendar the value in the element advances by a year. So if the date in the text box, for example, is '04/21/20' and then I click on '04/25/20' in the calendar, the value gets updated in the text box to '04/25/21'. It keeps advancing the year by one every time I select a date. Also when I select years and then months 'nan' gets displayed instead of the day numbers in the calendar.

This is how I instantiate the component:
$(function () {
let datepicker = new Datepicker($('#test')[0]);
});

<input type="text" id="test" value="04/21/20" />

Hey again, all is going well with the module.

I was just trying to use the DateRangePicker and I was expecting to find the setDates() method but I read there is only the getDates() that is implemented for this type of datepicker.

Would it be a good idea to make a wrapper setDates() method which would be specific to DateRangePicker API ?

Right now I'm having to do a work around like this in my script:

function setMinDate(date) {
    html.dateRange.datepickers[0].setDate(date, "yyyymmdd")
}

function setMaxDate(date) {
    html.dateRange.datepickers[1].setDate(date, "yyyymmdd")
}

Thanks again and have a good day.

Currently, you can set the orientation options for vertical placement on 'top', 'bottom' or 'auto' (see https://mymth.github.io/vanillajs-datepicker/#/options?id=orientation)

However, the 'auto'-option by default will place the datepicker as 'top'. The online example of the datepicker places the datepicker on the bottom and I think that should be the preferred position.

Is the preference for top-placement by purpose, or is this an issue in the current code? If so, we are happy to help!

Hello again dear mymth,

I have come across an exception where it was necessary that the datepicker inputField does not receive a "change" event by the .setDate() method.

I've added the option to prevent dispatching the change event for that purpose so here's the suggestion:

//calling the method in my script:
datepicker.setDate(value, options {
    preventChangeEvent: true
});

//in the datepicker.js file
setDate(...args) {
    const dates = [...args];
    const opts = {clear: false, render: true, autohide: this.config.autohide, preventChangeEvent: false};
    //...
    if (newDates.toString() !== this.dates.toString()) {
    this.dates = newDates;
    this.picker.update();
    this.refresh(
            opts.render ? undefined : 'input',
            opts.preventChangeEvent ? false : true
    );
    triggerDatepickerEvent(this, 'changeDate');
    //.... 
};

//...
refresh(target = undefined, shouldDispatchEvent = true) {
    if (target !== 'input') {
        this.picker.render();
    }
    if (!this.inline && target !== 'picker') {
        const newVal = stringifyDates(this.dates, this.config);
        if (this.inputField.value !== newVal) {
            this.inputField.value = newVal;
            if (shouldDispatchEvent) {
                this.inputField.dispatchEvent(new Event('change'));
            }
        }
    }
}

Is this an idea that could be useful for others too?
Btw, I'm sorry I don't know how to properly make a "pull request" yet.

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.

Please add 543 to Year when use locale the
Or Buddha Era Option
Ex. 2020 >> 2563

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!

With disableTouchKeyboard set to true, the touch keyboard does not display upon initial focus on the input element, but the keyboard does display when selecting next or previous month on a mobile device. Ideally, the keyboard would not display when changing months if disabled. This is being observed on Chrome v80.0 and Firefox v68.6 on Android on the live demo as well as my own plain CSS implementation.

Bootstrap datapicker has 'minView' option for select month or year only. How can I add this for vanillajs-datepicker ?

When date format is set to 'mm/dd/yy' for input element it also changes the year selection buttons and header format to two digits which looks weird. Header shows "May 20" instead of "May 2020" which looks like your talking about the 20th of May instead of May 2020. Year in calendar should always display in four digit format regardless of input format or at least make it a separate configurable option.

When entering a form to edit and load the data from the DB within the input it generates the following error with several dates...

Hello,

First of all, I would like to thank you for a great tool. Your datepicker is the best!

I am using the maxNumberOfDates option which allows me to select 3 dates from the calendar. When I try to select the fourth, the first is deselected. This causes confusion for users of my site as they may be unaware that an option has deselected.

Can I do so that when I choose 3 dates and I want to choose the fourth one, I can't do it? Then I have to deselect one of the chosen ones first and only then can I select another. How can I do this?

Thank you in advance for your help!

There is a bug when placed in a modal window.

Hi, great work.

Is there an option to prevent the picker from showing the final row? I'd like only to see rows that include days for the current/shown month, and not next's.

In this case, I'd like Jan 2 to be the last day shown.

Datepicker Throws error in console on IE11:

SCRIPT1010: Expected identifier
datepicker.min.js (1,153)
SCRIPT5009: 'Datepicker' not defined

Is there any way to get the date picker to show larger on a mobile device? Like take up the whole screen as I think this would work better for responsive phones and small devices...
Has anyone seen a way of achieving this?

Hi,

Would it be possible to add an option to disable Edit mode enabling ?

First off, thanks for a great package!

I was wondering, is it possible to customize a DateRangePicker with the beforeShowDay/Month/Year/Decade options, but get information on the field (start or end) we are rendering in?

My goal is to make some dates pickable as a start date but not as an end date, and vice versa.

Hi,

I've been using the DateRangePicker v1.0 and everything was working fine. I have the simplest implementation ever. As per documentation, a container with 2 input elements inside.
I've decided to go for the latest version as I really need the new feature that been added (updateOnBlur).

I've replaced the source files (I'm using the From Browser implementation link). I didn't change my implementation and it just stopped to work. I reviewed the changelog and I can't see any breaking changes with the implementation. I reviewed the documentation and went through the source code. Looks like there is a problem with Datepicker instance while using the Date Range Picker. Could you please review it? Those are the errors that I'm getting.

Thank you!

For my unique implementation I need to know who triggered the changeDate event. Did it come from the user clicking on a date in the calendar or did it come from a setDate() API call. Right now there is no way to tell. The event target is always "input.datepicker-input", which is untrue for both situations.

Could you please add the source of the event in the callback?

Hello. How to show a popup message when I click one date?
Thanks.

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?

Hi,

Is there an option to close the datepicker without selecting an actual date, just by clicking outside of the picker?

Hello @mymth,

I've been playing around with your great tool for a moment trying to implement some personal favorite features and I'd like to suggest it to you just in case you would like the idea too.

So basically I want to only need to enter 1 or 2 digits in the input field so that it will automatically set a new date string according the the current view month and year.
For example, you type "5" and it will insert 5 April 2020 because we are currently in the month of April inside the calendar view.
Then, if you switch to the month of June and you type "5" in the date input field this time, it would automatically set date to 5th of June 2020 because the calendar view is now set on June.

In the source code I was able to achieve it like so (almost surely a bad way because I'm still new to JavaScript):

update(options = undefined) {
    if (this.inline) {
        return;
    }

    const opts = Object.assign({autohide: false}, options);

    // Try to allow 1-2 digits user inputs to automatically set date
    // according to view's current month.
    let reformattedUserInput = this.inputField.value.trim();
    if (reformattedUserInput && reformattedUserInput.length === 1 || reformattedUserInput.length === 2) {
        const currentMonth = this.picker.views[1].focused + 1;
        reformattedUserInput = reformattedUserInput + " " + currentMonth; // my date format is set to d MM yyyy (that's why I append a space)
    }
    const inputDates = stringToArray(reformattedUserInput, this.config.dateDelimiter);
    // const inputDates = stringToArray(this.inputField.value, this.config.dateDelimiter);

    const newDates = processInputDates(inputDates, this.config);

    //...
}

So if you have a few minutes and would like to comment on this idea, I'd be glad to have your feedbacks. Thanks :)

Alex

It would be really nice to be able to limit the start date so it can't be older than today. Thank you!

None of the event binding methods work and there are no examples on how this is done in the API docs. Tried this:
let picker = new Datepicker($('#test')[0], options);
picker.addEventListener("changeDate", () => { console.log('changeDate'); });

Also tried:
picker.changeDate = () => { console.log('changeDate') }

And setting this through options:
let options = { changeDate: () => { console.log('changeDate') } }

Is there another way I am not aware of?

To start, thanks for all the hard work.

I have the datepicker implemented in a component, so there is a live instance most of the time.

With every click outside the input, it keeps firing the ui update code (which calls the custom formatter).

if possible, toss in at the top of the event handler
js/events/otherListeners.js: line 5

if ( !datepicker.active ) return;

Unless i am missing something, i dont think anything needs to happen behind the scenes when the picker is not active.

Also, during debugging, when the custom toValue formatter was called, it would call twice.
One call with date === 'Dec 26th' and a second call with date === '2020'
(which was giving me some getFullYear is not defined errors).

I found a better way to write my component, so i no longer have this issue (with toValue), this is more of an FYI.

Thanks again!
-Joe

Hello
Is any way to your datepicker support jalali calendar (Persian Calendar)?
For logic difference between these dates(jalali & gregorian) you can use: Persian Date OR jalaali-js
Thanks

I'm using webpack for bundling with hot reloading. When I put import { Datepicker } from 'vanillajs-datepicker' in my code at runtime (with hot reload), the datepicker is working awesome and without any errors. But when I want to stop and restart my webapp, then I get the following error: Error: Cannot find module 'vanillajs-datepicker'

When I use import Datepicker from 'path/to/node_modules/vanillajs-datepicker/js/Datepicker.js' I get the same behavior but a different error message: ReferenceError: EventTarget is not defined

Do you now anything about that?

.

I set it to have a date range within 3 days, so if it were September 30th, it would allow them to pick between September 30th, October 1st, October 2, as seen in the image attached.

var date = new Date();
var minDate = new Date();
var maxDate = date.setDate(date.getDate() + 2);

var datepicker = new Datepicker(elem, {
    minDate: minDate, 
    maxDate: maxDate,
    autohide: true,
});

When I clicking the next arrow in the top right, it does nothing. When I hover the previous arrow (top left) it shows an icon visually letting me know that is not an option.

Option 1: can you at least allow for the user to click to the next month if the maxDate spills into the next month?

Another option is to add a new option that allows for only showing that current month's dates, so it would not show the August 30, 31 as the first two dates, as well as hiding October 1-10, and allowing to click next to view October, so the user can click the 1st or 2nd date?

Option 1 seems the easiest.

The current titleFormat is a constant set to "MM y". I would like to change it to "M y". Of course I can do this by changing the source and then the min version but can this be made a publicly set prop so I and maybe others don't have to modify the code for every new release?

datepicker.setDate() will not bring the date I am setting into view, if the date is the same as the currently selected date. Going out of view can happen if the user moved the month/year but has not selected a new date leaving the calendar in a view where the selected date is not visible. How do I programmatically set the selected date back into view?

Currently every time I set a date I have to do this silliness to guarantee my date is in view:

datepicker.setDate(new Date());  // any random date in case it was clear
datepicker.setDate([], { clear: true });  // clear it in case it had a date
datepicker.setDate({myNewDate});   // finally set it to my desired date which could be nothing

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.

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:

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

Hello! Is there an option setting that can address this? I'm thinking perhaps defaultViewDate, but I don't know what setting would fix the following issue for date range calendars...

Today is April 23. Therefore, my start calendar opens in April as expected. However, if I select a start date in May and open the end calendar, it also opens in April. I'm expecting May. But what's worse is that when I click forward to get to May, the calendar skips May and goes straight to June. We have to click backward from June to get to May. It's a bit disorienting.

I'd love to see the defaultViewDate set to "today() or start date if selected". I'm not sure what's causing the calendar to skip from April to June, but maybe this could be addressed with this change.

Once again, I wholeheartedly appreciate this tool. Thank you so much for creating and sharing it!

Hey, love your vanillajs date picker!
Are there any plans to include a time picker?

From the CHANGELOG for version 1.1.0:

• Add showOnClick option (#21)
  • Along with this, picker element's click handler is changed to keep the focus on input field after auto-hiding on date selection

I much prefer the previous behavior of not keeping the focus. Could that be made configurable? I suggest a blurOnHide option.

Very nice component!! Thanks for sharing it. I'm impressed by its quality and all the customization that's possible to change.

EDIT: I've been able to find a little something that might possibly be an improvement:
With settings like this:

const elem = document.querySelector('#date__input');
const datepicker = new Datepicker(elem, {
    autohide: true,
    format:"d MM yyyy",
    language: "fr-CH",
    minDate: "1 Janvier 2019",
    maxDate: "31 Décembre 2022",
    todayBtn: true,
    todayBtnMode: 1, // select
    todayHighlight: true,
    weekStart: 0
});

I noticed that pressing the "today" button will not update the calendar view to what "today" corresponds to. For example, if you were in another month like May and then you choose "today", next time you open the calendar it will be displaying the month of May still.

Would it be a a good thing that today updates the view to "today" ?

BTW: Your code is really clean in my opinion this is a very good structure which is much easier to follow than many libraries I checked recently. So clean that it was easy to find where that action is happening and I could fix it just by changing render: false to true.

    function onClickTodayBtn(datepicker) {
        const picker = datepicker.picker;
        if (datepicker.config.todayBtnMode === 1) {
            datepicker.setDate(today(), {render: true}); // <--- false becomes true and it works now
            if (datepicker.config.autohide) {
                datepicker.hide();
                return;
            }
        } else {
            picker.changeFocus(today());
        }
        picker.changeView(0).render();
    }

This is a great datepicker!

In a range setup, I'm finding that it's possible to set the range backwards. Is it possible to prevent this from happening? When this happens the calendar is in a broken state. If the visitor selects a date while the range is reversed they will see a date from another month appear in the input.

Hello again mymth,

Your latest release has fixed rendering update issues correctly, I can confirm that all linked cases I had mentioned are now working perfectly fine. Thanks again.

I now am trying to find a best-compromise to enabled refocusing the input field after the onClickPicker() event.
I have read your inline comment that you disabled auto-refocusing for the purpose of not messing with option set on "autoShowOnFocus".
Although I really need that auto refocusing to happen so I was able to get a desirable result by adding this else condition in the function:

    function onClickPicker(datepicker, ev) {
        ev.preventDefault();
        ev.stopPropagation();

        // check if the picker is active in order to prevent the picker from being
        // re-shown after auto-hide when showOnFocus: true
        // it's caused by bubbled event from cells/buttons, but the bubbling cannot
        // be disabled because it's needed to keep the focus on the input element
        if (!datepicker.inline && datepicker.picker.active) {
            datepicker.inputField.focus();
        } else {
            datepicker.inputField.focus();
            datepicker.hide()
        }
    }

I know it is hacky and not logical to focus, then have the autoShow make it open again, then close it again, but it does work and I don't even have time to see the autoShowOnFocus happening.
In the end, I am submitting the suggestion because I suspect that you might have a much better idea than my addition to more officially support this feature.

Alex

When a customer fills in a form with the keyboard and he doesn't hit enter before moving to the next input field, the date isn't set and submitted.

I read your statement in #6, but couldn't this be a configurable feature? Alternatively, could you maybe give a code example how to update the picker field when the input loses focus?

Thanks for this great module and the good documentation!

All work fine, but I need the changeDate event.

<input name="DatePickerCtrl" type="text" changeDate="console.log("NeverLogged");">

I'm using your component in inline mode and then popping the calendar up with my own code because of more advanced positioning I need and don't want or need it tied to a textbox. But every time I do pop up the calendar I need to have the currently selected day brought into view and if no date the month of today brought into view. Is there some internal function I can call that can force this? Also if left in month or year pick mode I need that gone too when 'bring into view' is called.

Having to press enter to set the value when manually entering a date in the input element is really not intuitive for the user. What the user does is types a date, doesn't press enter because why would they, and either tabs to next field or clicks on another field and the value reverts back to previous date because they did not press enter. Then they submit the form with wrong date because they didn't see that when they left the field the value they entered did not stick. Calendar should always synchronize to the value that is in seen in the input field and never change it on its own from where the user left it. If calendar can not parse the date from the input field then it should just show as no date selected when shown. All other date pickers I've seen behave like this.

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.