duetds / date-picker Goto Github PK

Describe the bug
The calendar grid identifies as a table/grid to my screen reader, but drops me into a mode where arrow keys choose between dates instead of letting me move word-by-word or character-by-character. If I use table navigation (Ctrl + Alt + arrow keys in JAWS), every cell reports as the end of the row or column.

If I back out of the grid and press T to access it as a table, I can at least navigate the header row (the days of the week) with table navigation, but I cannot get into the grid of dates.

To Reproduce
Steps to reproduce the behavior:

1. Go to the grid,
2. Use Ctrl + Alt + arrow keys to move within the grid,
3. Observe it says "end of row" or "bottom of column" or similar;
4. Press Shift + Tab to back out of the grid,
5. Press T to move to the table,
6. Use Ctrl + Alt + down arrow to move into days,
7. Observe it says "bottom of column".

Expected behavior
I should be able to navigate the entire calendar grid using my screen reader's table navigation controls.

Screenshots
I made a video, but GitHub does not allow me to embed it.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 85
• JAWS 2020

Additional context
Using first example at https://duetds.github.io/date-picker/

Describe the bug
If a min or max date is set and the arrow keys are used to attempt to navigate beyond the date the arrow key navigation stops updating correctly leaving the focus'd date the date closest to the limit. If tab/shift-tab is used it can kick the picker into updating the focus state to where it should have been.

To Reproduce
Steps to reproduce the behaviour:

1. Open a picker with a max date set
2. Use right or down arrow key to navigate to the end date and use keys to attempt to navigate beyond the max date
3. Use up or left arrow keys to try and navigate back within range
4. Focus'd date never updates although month may change

Expected behaviour
When trying to navigate beyond a min or max date focus should remain on the min/max date allowed. When navigating back within range the focus should update immediately

Desktop (please complete the following information):

• OS: Windows 10, OSX 10.15
• Browser: Firefox 84, Chrome 87, Trident Edge

Additional context
Add any other context about the problem here.

Describe the bug
Hi, I'm noticing that the input control never registers the value has been changed unless the input value is 0 or 10 characters (e.g. a date 2002-02-02) in length.

If it's 2002-02-0 it will not update the value.

But if you change 2002-02-0 to 2002-02-02 it will update the value, or if you change "2" to "".

To Reproduce
Steps to reproduce the behavior:

1. Go to date control

2. input 2002-02-02

3. change it to 2002-02-0

4. look for the form value to change, doesn't change

5. Go to date control

6. input 2002-00

7. change it to 2002-02-02

8. look for the form value to change, it will only change when you enter 2002-02-02

Expected behavior
Every time you change the value the input control's value should change.

Screenshots

This was recently fixed in Duet Design System, need to bring in the changes to the open source version:

Describe the bug
Google lighthouse complains that the datepicker uses an eventlistener that is not passive

To Reproduce
Steps to reproduce the behavior:

1. Use the date picker somewhere
2. Run Google Lighthouse
3. Se warning

Expected behavior
Google lighthouse shows no warnings

Desktop (please complete the following information):

• Chrome, latest

Additional context
It might be related to ionic-team/stencil#2621

The default screen width threshold that puts the calendar in mobile view is currently 39rem. My website has different mobile threshold. Can we make the calendar go into mobile view at a custom screen width?

Describe the bug
On Safari, clicking on the calendar icon emits the 'duetFocus' event. I think it happens because the focus goes to the input element.

Expected behavior
On Chrome, clicking on the calendar icon doesn't emit the 'duetFocus' event, because focus is given to the calendar overlay as stated on the docs on the "show" method:
https://github.com/duetds/date-picker#show--promisevoid

I think datePicker's behavior in Chrome is more suit, because the behavior on Safari is what makes Safari's month selector to show up below the calendar overlay, as described on the folowing closed bug, which doesn't work well along with our date-picker:
#23 (comment)

Desktop (please complete the following information):

• OS: Macos
• Browser: Safari
• Version 13.1.1

Smartphone (please complete the following information):

• Device: iPhone Xr
• OS: IOS 13.5.1
• Browser Safari

N/A

Describe the bug
When placing the component within a shadow DOM, the calendar month and year controls immediately close the calendar popup. Specifically, the month forward/back buttons as well as selecting a value in the month or year menus cause this unexpected closing.

To Reproduce
Steps to reproduce the behavior:
I've created an example codepen. It creates a very simple web component with shadow dom and places a plain date picker within

1. Go to https://codepen.io/geekify/pen/QWKerQG
2. Click on the icon to bring up the calendar
3. Notice, clicking on a date on the calendar will work, however ...
4. Clicking on the forward or back button, or selecting a value in any dropdown closes the calendar popup and does nothing

Expected behavior
The calendar popup should NOT collapse when interacting with month and year controls

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Mac OS
• Browser: Firefox, Safari, Chrome. (Safari - the menus work but not the forward / back)

Additional context
I originally noticed this issue in StencilJS, I narrowed down a few things and found that it was shadow dom related so the sample codepen should be the simplest example.

Hi, any idea why the date control is not showing a value with these dates:

2019-11-14T00:55:31.820Z
2020-11-25T15:18:15Z
2020-11-25T15:18:15+00:00
2002-02-02T00:00:00.000Z

Here's how I've added the control,

      <duet-date-picker
        :id="inputId"
        type="text"
        :value="value"
        v-on="maskedInputEvents()"
        :localization.prop="localization()"
      />

here's the localization & maskedInputEvents function

  public localization(): any {
    return {
      buttonLabel: "Choose date",
      placeholder: "YYYY-MM-DD",
      selectedDateMessage: "Selected date is",
      prevMonthLabel: "Previous month",
      nextMonthLabel: "Next month",
      monthSelectLabel: "Month",
      yearSelectLabel: "Year",
      closeLabel: "Close window",
      keyboardInstruction: "You can use arrow keys to navigate dates",
      calendarHeading: "Choose a date",
      dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
      monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
      monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    };
  }

  public maskedInputEvents(): any {
    const _vm = this as DateInput;
    return Object.assign({},
      // parent listeners
      this.$listeners,
      {
        // custom listeners
        input(event: any) {
          // Emit updated value
          _vm.$emit('input', event.target.value);
        },
        duetBlur(event: any) {
          const value = _vm.value;
          const matches = value ? value.match(/^(\d{0,4})(\d{0,2})(\d{0,2})$/) : value;
          if (value && matches) {
            _vm.$emit('input', `${matches[1]}-${matches[2]}-${matches[3]}`);
          } else {
            _vm.$emit('input', value);  
          }
        },
        duetChange(event: any) {
          // Emit updated value
          _vm.$emit('input', event.detail.value.length > 0 ? event.detail.value : undefined);
        }
      }
    );
  }

It does work with 2019-11-14

Any ideas what could be wrong here?

Is your feature request related to a problem? Please describe.
I am working on a client project with Svelte and this date picker would be a great replacement for the current one that I am using.

Describe the solution you'd like
Add instructions of how to get Duet Date Picker up and running with Svelte.

Is your feature request related to a problem? Please describe.
In case of using it in diary application for example, I'd like to highlight the specific dates I wrote the diary. But I couldn't find the feature about it.

Describe the solution you'd like
a selected property can be populated with an array of dates to highlight.

Describe alternatives you've considered
N/A

Additional context
N/A

Describe the bug
When I navigate with keyboard, I open the date picker.
I go from date to year to next/prev month buttons.

When I leave the next/prev month buttons:
If it's the current month: the default focus is today's date (Sep 17th) - Correct
If it's any month in the future: the default focus is still today's date (= Oct 17th, Nov 17th etc) - Seems strange
I think it would be better if the focus goes to the 1st.

I am trying to use duet-date-picker with Thymeleaf (server-side rendering). It works as long as I don't use the localization support.

I added this in a <script> tag in my page:

    const picker = document.querySelector('duet-date-picker');
    const DATE_FORMAT = /^(\d{1,2})\.(\d{1,2})\.(\d{4})$/;

    if (picker) {
        picker.dateAdapter = {
            parse(value = '', createDate) {
                try {
                    console.log('parsing' + value);
                    const matches = value.match(DATE_FORMAT);

                    if (matches) {
                        return createDate(matches[3], matches[2], matches[1]);
                    }
                } catch (err) {
                    console.log(err);
                }
            },
            format(date) {
                console.log('formatting: ' + date);
                return `${date.getDate()}.${date.getMonth() + 1}.${date.getFullYear()}`;
            },
        };
    }

I see lot's of formatting... statements, but never parsing... and also no error in the console.

When I check with dev tools, I see updates to the value attribute of <duet-date-picker>, but the value of the actual <input> is not updated. Due to this, my server-side thinks that nothing was selected. For some reason, that does not seem to be an issue when not using the localization support. Am I doing something wrong?

Is your feature request related to a problem? Please describe.
Currently the days of the week aren't announced by a screen reader when navigating the calendar. The <table> structure is correct, so presumably this is due to the use of grid + gridcell roles. Whatever the cause, the result is that screen reader users don't know what day of the week their currently-focused date is.

Describe the solution you'd like
Simplest solution would be to append or prepend the day of the week to the hidden text in each button, i.e.:

<span class="duet-date__vhidden">Thursday, 2020-09-24</span>

This could be done with Date.toLocaleDateString() to support internationalization.

Describe alternatives you've considered
The only alternative I can think of would be to drop the use of grid and just use a plain table, but this doesn't seem like a good solution—it would mean sighted keyboard users would be forced to TAB through the calendar instead of using arrow keys.

Additional context
Tested with JAWS, NVDA and MacOS Voiceover.

Is your feature request related to a problem? Please describe.
It would be very useful to have a duetClose event we can listen to. This would allow us to know when the modal is closed via keyboard "close" button.

Describe alternatives you've considered
I've tried to use the duetBlur event but that seems to be fired when the modal opens so it's not a good flag for when it has been closed.

Is your feature request related to a problem? Please describe.
When doing ranges of dates (from/to):
Is it possible to add multiple date pickers on the same page?

Describe the solution you'd like
I would like to add multiple date pickers on the same page.

Using the localization support, you can write a custom parse and format function. However, when the format you want to use has a space, the user cannot type that space in the input field.

For example, when using Luxon, one of the default formats is 1 okt. 2020.

Also, suppose the format is dd.mm.yyyy, then maybe you don't want to allow users to type / or - which are currently possible.

Is there maybe a workaround I can use for now to be able to allow the user to use spaces?

It would be great to be able to apply a custom SVG icon to the toggle button. Is there any possibility that this might be on a future feature list?

Describe the solution you'd like
Hey, is there a plan to support datetime and time formats as well and show a picker for hourse and minutes, seconds (optionally)? If not, feel free to close the issue…

Describe the bug
Thank you very much for all your hard work, this date picker is incredibly neat!

I've been trying to implement this date picker into a Vue JS project. I'm a bit new and as I understand from your documentation, in order to use the properties of duet date picker (e.g. Localization, dateAdapter, direction, etc.) I need to override their defaults. I've been trying to add them as props to my component but so far no luck. Is this a bug or just a gap on my own understanding?

To Reproduce
Steps to reproduce the behavior:

1. Create a Vue component that uses duet date picker
2. Pass localization object as a prop

Expected behavior
I expect the placeholder to change it's label from "YYYY-MM-DD" to "DD/MM/YYYY"

Desktop (please complete the following information):

• OS: Catalina 10.5.15
• Browser: [Chrome, FF, IE11, Safari]
• Version: Duet date-picker version 1.0.1

Additional context
Component in case:

  <duet-date-picker 
    ref="date-picker"
    identifier="date"
    direction="left"
    :value="enteredDate"
    v-bind:class="{'has-error': hasErrors}"
    v-bind:required="isRequired"
    :name="name"
    :localization="{placeholder: 'DD/MM/YYYY'}"
    :dateAdapter="format_date()"
    @duetChange="dateChanged"
  />

Describe the bug

NVDA reads the placeholder as "Y Y Y Y M M D D".
It is not pleasant or helpful for the user.
Please put the format in the label along with a more clear readout.

By the way:
Why is there a placeholder?
I mean, it's the date picker's job to populate with the correct format when we choose date from the date picker.
Right?

Desktop (please complete the following information):

• OS: Win10
• Chrome with NVDA

Describe the bug
Currently @duetds/date-picker does not work with Rollup (or I didn't get it to).
The problem appears to be a dynamic import statement with a template string:

return import(`./${bundleId}.entry.js${""}`);

Rollup seems to ignore these imports: "Dynamic imports on runtime are ignored by Rollup #2463"

To Reproduce
Clone this repository https://github.com/sto3psl/rollup-duet-date-picker and follow the steps to create a bundle.

Expected behavior
<duet-date-picker></duet-date-picker> should render in the browser with no errors.

Desktop (please complete the following information):

• OS: macOS 10.15.6
• Browser: all of them

I'm not sure if this problem comes through duetds/date-picker or Stencil.js or the way everything is published.

Describe the bug
When I click the calendar button in Safari or React Native Webview on iOS, the native month picker comes up and hide duetds.

To Reproduce
Steps to reproduce the behavior:

1. connect to the page in Safari or React Native Webview on iOS
2. click the calendar button
3. native month picker comes up after the duetds shows up

Expected behavior
The native month picker wouldn't show up.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone11
• OS: iOS 14, iPhone11
• Browser: safari
• Version: "@duetds/date-picker": "^1.0.1"

Describe the bug
Running npm install fails when automated testing detects unacceptable differences in the image snapshot diffs.

To Reproduce

1. Clone the project
2. Run npm install
3. Wait while install process runs
4. See error

Expected behavior
I expected the installation not to fail, and to complete successfully.

Screenshots
Console output:

Images found in \date-picker\src\components\duet-date-picker\__image_snapshots__\__diff_output__:

Desktop (please complete the following information):

• OS: Windows 10 Enterprise Version 10.0.17763 Build 17763
• Browser: n/a
• Version: Node.js v12.18.3, npm 6.14.6

Hello!

Thanks for this project, the picker is really great.

I would like to propose an enhancement to it regarding the display of the year list when range values are used.

The use case is as follows:

• using the picker to pick a birth date within a range of acceptable values (say 1920-2020).
• year list only display 20 entries at a time. To display more I need to select the first one, close the list and then open it again. So the user could easily do this multiple times if she is born in 1954 for example. Which is not quite straightforward and a bit tedious for some users.

To enhance this behaviour, the picker could display all the years within the range only when range values are set (either min, max or both).

Thanks again for this great project!

Is your feature request related to a problem? Please describe.
The component isn't really a 'date-picker' per se. It's a form field with a date-picker.

In my company we already have a set of full featured, styled form components. So I don't really want to re-style the duet date field, esp as the api of the field is slightly different from the rest of our fields. Ideally, I'd like to just be able to use the 'picker'. This would then allow me to do pre-sets of company preferred settings e.g. date-format or split fields into multiple if I wish e.g. [dd] [mm] [yyyy]

Describe the solution you'd like
An abstraction of 2 components. The input and the picker.

Describe alternatives you've considered
Adding the git repo as a dependency and re-creating the picker from there.

N/A

N/A

Describe the bug
I discovered a live region in the code:

<div class="duet-date__vhidden duet-date__instructions" aria-live="polite">You can use arrow keys to navigate dates</div>

However when I access the control I do not hear the live region announced.

To Reproduce
Steps to reproduce the behavior:

1. Go to the grid,
2. Interact with it (typing a date, opening the calendar, navigation it, choosing one, etc),
3. Observe the screen reader does not announce the content from the live region.

Expected behavior
I expect to hear the live region.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 85
• JAWS 2020

Additional context
Using first example at https://duetds.github.io/date-picker/

I'm looking for some advice on where i'm possibly going wrong when trying to apply the polyfills to get the duet date picker working in IE11 using basic HTML.

I think i am either trying to import it wrong or misunderstanding how i'm supposed to bundle the loader and import it into html.

This is how i am pulling the dependancies into the html head and my initial attempt at getting the polyfill working.

<script type="module" src="https://cdn.jsdelivr.net/npm/@duetds/[email protected]/dist/duet/duet.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@duetds/[email protected]/dist/duet/duet.js"></script>

<script>
  // applyPolyfills & defineCustomElements are both undefined
  applyPolyfills().then(function () {
    defineCustomElements(window);
  })
</script>

I have additionally tried to use browserfy to bundle the dependencies into a single standalone UMD js file and import that instead.

var loader = require("@duetds/date-picker/dist/loader");

module.exports = {
  applyPolyfills: loader.applyPolyfills,
  defineCustomElements: loader.defineCustomElements,
};

browserify --standalone duetLoader -r ./assets/javascript/duet-non-bundled.js -o assets/javascript/duet-bundled.js

<script type="text/javascript" src="/assets/javascript/duet-bundled.js"></script>
<script>
  var applyPolyfills = duetLoader.applyPolyfills;
  var defineCustomElements = duetLoader.defineCustomElements;
  applyPolyfills().then(function () {
     defineCustomElements(window);
  })
</script>

The above approach resolves the issue with the methods being undefined but i get the following stack trace on runtime when the <duet-date-picker> tags are rendered and the date picker becomes unusable / non responsive to on click events.

duet-bundled.js:1422 Error: Cannot find module './duet-date-picker.cjs.entry.js'
    at o (duet-bundled.js:1)
    at duet-bundled.js:1
    at duet-bundled.js:1432
    at async initializeComponent (duet-bundled.js:1163) undefined

Prior to trying to get the poly fills to work i have encountered no issues with the date picker.

Any advice or a point in the right direction would be much appreciated. If it's something missing in the docs that could be improved i'd be happy to contribute to improving them once i've managed to find a solution.

P.S this is a great date picker in terms of UI and accessibility, I look forward to seeing it develop further.

[Edit: In the demo] users of Windows High Contrast who rely on keyboard cannot see what is being focused, neither the button which opens the datepicker, nor anything inside once it is opened.

To Reproduce
Steps to reproduce the behavior:

1. Open demo datepicker in a Windows browser which supports WHC (Firefox, Edge. IE if you're brave)
2. Press Alt+Shift+PrtScn to activate Windows High Contrast. It shouldn't matter which theme is running
3. Attempt to use the datepicker with keyboard. Focus is visible when the input receives focus, but not the calendar-activation button nor anything inside.

Expected behavior
A focus ring is always available.

Additional context
I will attempt a PR this weekend, although I didn't find the focus styles when looking through the code via Github. [Edit: only the demo has styles]

The solution is simple though: change the outline: 0 on the focus states to outline: 3px dotted transparent. This gives WHC users a visible outline while no other users will see an outline.

Edit: Ideally the demo shows this so developers see examples of code for all users :D

Is your feature request related to a problem? Please describe.
When JS is disabled, it doesn't work

Describe the solution you'd like
This should be a native datePicker, till it can be enhanced by JS.

It seems there is no way to set the input to required, is there any workaround or is this on the roadmap?

Is your feature request related to a problem? Please describe.
Using our current date picker doesn't offer a fully disabled state, which makes this one attractive, but we need to be able to disable specific days per week and dates as well.

Describe the solution you'd like
It'd be helpful to be able to select specific days of the week to disable, as well as pass in an array of dates to disable.

Describe alternatives you've considered
N/A

Additional context
The calendar we're currently using is flatpickr, which allows us to disable entire days from each week (i.e.: Mondays, Wednesdays, Fridays) and specific dates (i.e.: Dates that have already been booked, or closed holidays)

Is your feature request related to a problem? Please describe.
Ability to display a dual month view when screen space allows

Describe the solution you'd like
Ability to request dual month view above a specified screen size similar to what can be seen on https://www.airbnb.co.uk/
Also option to disable skipping years and months using the dropdowns ie. only able to use the next previous arrows.

Describe the bug
When navigating the calendar grid (<table>) in JAWS, the column headers are not announced. All I hear is "two zero two zero dash zero four dash zero two" (or whatever is the date in this number format).

To Reproduce
Steps to reproduce the behavior:

1. Go to the grid,
2. Navigate between days within a week,
3. Observe the screen reader does not announce the day of the week.

Expected behavior
As I navigate from column to column, I should hear the column header. Specifically I should hear the day of week as I move through a week.

Screenshots
I made a video, but GitHub does not allow me to embed it.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Version 85
• JAWS 2020

Additional context
Using first example at https://duetds.github.io/date-picker/

Is your feature request related to a problem? Please describe.
In Denmark (and supposedly other countries as well) many people plan using week numbers (say fx. wednesday in week 33). It is stupid, I know, but it is an everyday occurence in Denmark. Everybody plans vacation in Denmark using week numbers fx.

Describe the solution you'd like
I would like the ability to enable weeknumbers as an extra column to the left of each week. Is must support the different weeknumbering systems there are in different countries. (1st week is 1st monday, 1st week is 1st week with thursday etc.)

Describe the bug
I expected to be able to use all arrow keys to navigate within the dates.
Only up key and down key work fine.
The left key and right key will read out a digit, one digit at a time.
This is confusing for the user.

Using Win 10 with NVDA.

Describe the bug

When the cursor is in the middle of the text, and you type, the cursor jumps to the end. This is likely because of setting the value without changing the "selection"

To Reproduce
Steps to reproduce the behavior:

1. type part of a date
2. move your cursor to somewhere inside the text
3. type something
4. see cursor jump to the end

Expected behavior

cursor stays where you enter text

Screenshots

Desktop (please complete the following information):

• OS: macOS 10.14
• Browser: Safari Tech Preview
• Version: Release 113 (Safari 14.0.1, WebKit 15610.2.3.1)

Additional context

I've seen this problem before, in e.g.:

• facebook/react#955
• facebook/react#14904

Is your feature request related to a problem? Please describe.
When using the date-picker for a date range it would be useful if the range of dates that has/is being selected could be highlighted visually, providing the user feedback as to the range they have selected.

Describe the solution you'd like
Additional class added to dates within a set range to enable highlighting of the dates within the range that has been selected by the user.
Similar to https://pikaday.com/examples/date-range.html

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.

Some of the colors are re-used and may/will lead to difficulties when customising inputs. Specifically, borders:

.duet-date__input {
    border: 1px solid var(--duet-color-text);
    border-radius: var(--duet-radius);
    color: var(--duet-color-text);
}

Describe the solution you'd like

Add a new variable, --duet-color-border. To maintain backards compatibility, it can fall back:

border: 1px solid var(--duet-color-border, var(--duet-border-text))

Additional context

See why here (duetds among material ui fields)

By the way, the picker is amazing 🎉

Describe the bug
The value of <duet-date-picker> is not updated when a valid date is changed to an invalid one. This can cause a form to submit with the former valid date instead of erroring or submitting the actually entered invalid date.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/silly-sunset-cvxkq
2. Enter a valid date into the date picker input (eg. 2020-11-12)
3. Submit the form
4. See that submitted value and actual value are the same.

5. Change date picker input to an invalid date (eg. 2020-11-121244345)
6. Submit the form
7. See that submitted value is still the old one and not the one entered.

Expected behavior
I'm not sure what the expected behavior is. Maybe an empty string or something like INVALID DATE should get submitted. That way my submit handler can validate against bad inputs.

Additional context
Version @duetds/[email protected]

I think the problem is that the hidden input with name=date is only updated when a correct date was entered. Then changing to an invalid date will not trigger an update which causes the hidden input to keep its former valid date, which gets submitted. As described above, my suggestion is to update the hidden input with some kind of invalid date value.

Our team working on Duet Design System couldn’t find an existing date picker that would’ve ticked all the requirements we had for accessibility (supporting WCAG 2.1 as well as we can)

Do you have a list of what those requirements are?

Describe the bug

@duetds/date-picker’s ESM build is currently broken.

To Reproduce

If you inspect the package.json, the "module" entrypoint is set to ./dist/index.js. This is its contents:

export * from './esm-es5/index.js';

If you navigate to ./esm-es5/index.js, though, it is blank. As a result, the ESM build of @duetds/date-picker is empty.

I made a reproduction using Snowpack, an ESM installer.

Expected behavior
The "module" entrypoint of the package should export the expected code.

Screenshots
N/A

Desktop (please complete the following information):

• OS: Any
• Browser: Any
• Version: Any

Smartphone (please complete the following information):

• Device: Any
• OS: Any
• Browser: Any
• Version: Any

Additional context

Not a part of this issue at all, but it’d also be great if @duetds/date-picker could add an export map as part of its package contents. This would help the ESM be further-optimized.

Describe the bug
On windows, if you do not open the year dropdown but use arrows keys, the selected year jumps around by more than one year at a time.

To Reproduce
Steps to reproduce the behavior:

1. open calendar
2. tab to year dropdown
3. hit up/down keys
4. observe undesirable behaviour:

Start -> 2020
Down -> 2021 (+1)
Down -> 2023 (+2)
Down -> 2026 (+3)
Up -> 2028 (+2)
Up -> 2029 (+1)
Up -> 2029 (+0)
Up -> 2028 (-1)
Up -> 2026 (-2)
Down -> 2025 (-1)

Expected behavior
Years increment/decrement one year at a time

Desktop (please complete the following information):

• OS: Windows
• Browser: Edge
• Version: 85.0.564.51

Hi, is it possible to format the date when entering it in the text box or should you be only changing the date via the control?

Hi, i'm using the control with Vue and I'm trying to increase the options available in the year picker.

Currently it's only showing ranges from 2020 to 2010.

I tried using the properties min="1990-06-10" and max="2020-07-18" but this had no effect.

Any ideas how to solve this?

N/A