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?

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

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"
  />

@bseber here are my changes. They seem to work the same in my testing. Does anything stand out to you as wrong, or are there any parts you disagree with? Let me know :)

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 https://github.com/ionic-team/stencil/issues/2621

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.

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/

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

One can see days from other months but not select them. First one has to switch months and then select the days.

Describe the solution you'd like

Above here we see 1-5 days in September. It would be nice to be able to click one of these days in September and have the calendar select the day and at the same time switch months.

Fixes #64

If an event is fired from within a component with shadow DOM and listened to outside (like document or window), the event.target will not pierce the shadow DOM and show as the top level component. For example, listening to a click event on the document in the following situation (if foo-bar had a shadow dom)

<foo-bar>
  <duet-date-picker></duet-date-picker>
</foo-bar>

will have foo-bar as the event target! Therefore the condition if (this.dialogWrapperNode.contains(target) || this.datePickerButton.contains(target)) { will not be met because target always returns a parent node!

Enter composedPath to the rescue. https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath It returns an array of nodes and will contain shadow dom nodes as long as it is open. I realized that composedPath is not supported in IE (IE doesn't support shadow dom at all), so if composedPath is available it will be used, otherwise it will fallback to target.

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 added this script in the head:

Datepicker initialized correctly but creates a constructed stylesheet with css selectors which I do not want. For example I think it's a bad idea to have a selector like .is-active .duet-date__dialog-content. It may interfere with other css (for example an open accordion). I have no other choice than to override this css. Another example is that the Datepicker overrides default focus-Style of the browser which I also think it's wrong.

Describe the solution you'd like Extract the css in own file and make it optional by importing it whenever you want.

Describe alternatives you've considered Didn't find any solution

Additional context N/A

Problem

When using isDateDisabled I want to check whether the date given in the callback is in a list of dates that I have supplied. My list of dates is in ISO8601 format ("YYYY-MM-DD") which fits nicely with the main inputs and outputs of this date-picker. The problem is that obtaining "YYYY-MM-DD" from this particular Date object is surprisingly awkward, and having only this representation available means it is less possible to share code between isDateDisabled and duetChange callbacks.

What happens now

isDateDisabled currently provides the date only as a javascript Date object, representing midnight in local time. Converting that to "YYYY-MM-DD" is awkward, partly because the javascript Date object does not supply adequate methods for doing so. The fact that it's local time makes things harder, because Date.toISOString() returns UTC, leading to the resulting YYYY-MM-DD portion of the string being off-by-one depending on local time zone. One alternative is taking the individual components such as Date.getMonth() and formatting them, which is straightforward but surprisingly verbose for reasons that can be seen in the code below.

The code I am using now:

  // convert a date to a string 'yyyy-mm-dd'
  // 'date' from this widget is a midnight in local time, which is awkward
  function dateStr(date) {
    const pad2 = (x) => (String(x).padStart(2,'0'))
    return `${date.getFullYear()}-${pad2(date.getMonth()+1)}-${pad2(date.getDate())}`
  }
  picker.isDateDisabled = (date) => ! myDatesList.includes(dateStr(date))

Whereas checking for disabled dates in the duetChange callback is a short one-liner and does not require such helper functions:

  picker.addEventListener("duetChange", function(e) {
    // check for unavailable dates (entered manually) is easy:
    if (! myDatesList.includes(e.detail.value) // { alert(...) }
  }

Suggested solution

Add to the isDateDisabled callback a new argument giving the same detail that is provided as the argument to the duetChange callback. This detail contains both the Date object and the YYYY-MM-DD string representation.

I do not wish to recommend here any particular backward compatibility strategy; options include adding an optional second argument, or making a differently named callback while keeping (or deprecating) isDateDisabled. Let's say for example that we make a differently named callback, that supplies a parameter in the same form as duetChange does. Then the user code could be a short one-liner matching the implementation of duetChange:

  picker.isDateDisabled = (e) => ! myDatesList.includes(e.detail.value)

Alternatives considered

Looked for simpler ways to use the supplied Date object; found no really simple ways to do so without further dependencies.

Is your feature request related to a problem? Please describe. In some languages, two characters is not enough to distinguish between weekday names. A lot of other date pickers, such as jquery date picker, support three characters to resolve this.

Describe the solution you'd like Allow for weekday names to use three characters.

Describe alternatives you've considered There really isn't another solution.

Additional context N/A

Is your feature request related to a problem? Please describe. In trying to use this control to stand in for a regular text box, and to work like other controls on a page, there are times when a 'readonly' property would be preferred over the 'disabled' property. When a regular input type="text" is disabled, its value will not be sent when submitting the form, and it is not focusable. When it is readonly, its value is sent when submitting the form, and it is focusable, but just not editable. Currently, the duet date picker supports only a 'disabled' property, which behaves mostly like a native 'disabled' property with the exception that there is a hidden field that does get submitted with the value of the control.

Describe the solution you'd like I suggest having both a 'disabled' and a 'readonly' property that mimic the behavior of the native controls as much as possible

Describe the bug

I'm experiencing some strange behavior when using VoiceOver on Safari.

After I select a date, calendar closes and the browser focus moves back to the calendar button. The VoiceOver cursor stays on the date, which is now hidden. VoiceOver says, "you are currently on a toggle button, inside of a blank."

To Reproduce Steps to reproduce the behavior:

1. Open the Duet Date Picker demo in Safari with VoiceOver running
2. Use the VoiceOver keyboard controls to activate the calendar button. The calendar opens.
3. Use the VoiceOver keyboard controls to navigate to a date and select it.
4. The calendar closes.
5. The message in the screenshot below should appear.

Expected behavior I'd expect the VoiceOver cursor to return to the calendar button. I'd then expect VoiceOver to announce that I'm on the calendar button. (Adding an aria-live region might help.) Alternately, the calendar could remain open after I make a selection.

Thank you!

Screenshots

Desktop (please complete the following information):

• OS: macOS 12.4
• Browser: Safari 15.5