fymmot/inclusive-dates

A human-friendly datepicker – now as a Web Component! Supports natural language input through Chrono.js. Fully accessible with keyboard and screen reader. Contributions welcome!

inclusive-dates's Issues

[BUG] Broken calendar and functionality in some timezones

Describe the bug
Datepicker is broken in some time zones including EST.

Calendar days are missing and date parsing is incorrect (tomorrow, yesterday etc)

(Screen shot local date is 2022-01-18, time 14:56 and I typed "tomorrow"

Reproduction
Steps to reproduce the behavior:

1. Change local timezone to Washington DC time
2. Type "tomorrow"
3. Open the calendar and browse dates.

Expected behavior
Datepicker should be able to handle different timezones.

Is it possible to add min and max date ?

Hello,

is it possible to limit dates in the calendar with min and max date ?

Remove role=presentation from the <table>

• A screen reader user who is familiar with table navigation commands will prefer having the option to navigate that way versus arrow keys

• The up/down arrow keys do not help much when the current column is unknown to them

• Removing the table semantics also means the column headers (the days of the week) are not announced.

• You can use ARIA grid roles instead if you want to convey that the entire table is a single compound control (which may be most appropriate).

• From experience training and testing with users, asking them to switch modes (particularly into Applications mode) will be ignored (if even understood).

[BUG] High Code Scanning vulnerability

Describe the bug
In the inclusive-dates_3.entry.js, it has this code's part:
exports.extractTerms = extractTerms;
function matchAnyPattern(dictionary) {
const joinedTerms = extractTerms(dictionary)
.sort((a, b) => b.length - a.length)
.join("|")
.replace(/./g, "\.");
The code scanning said "This does not escape backslash characters in the input."

failing while using vite (rollup)

Describe the bug
I'm trying to build a library that uses this incllusive-dates

getting this error

PS C:\Users\emers\Source\Repos\histoire-demo> npm run story:dev

[email protected] story:dev
histoire dev

Failed to resolve dependency: vscode-oniguruma, present in 'optimizeDeps.include'
Failed to resolve dependency: vscode-textmate, present in 'optimizeDeps.include'
Using 4 threads for story collection
Collect stories start all
➜ Local: http://127.0.0.1:6006/
➜ Network: use --host to expose
12:35:56 AM [vite] Failed to load source map for /node_modules/inclusive-dates/dist/themes/light.css.
(node:19672) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
Error while collecting story C:/Users/emers/Source/Repos/histoire-demo/docs/SButton.story.vue:
C:\Users\emers\Source\Repos\histoire-demo\node_modules\inclusive-dates\dist\components\inclusive-dates.js:1
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
^^^^^^

SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:360:18)
at wrapSafe (node:internal/modules/cjs/loader:1084:15)
at Module._compile (node:internal/modules/cjs/loader:1119:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
at Module.load (node:internal/modules/cjs/loader:1033:32)
at Function.Module._load (node:internal/modules/cjs/loader:868:12)
at ModuleWrap. (node:internal/modules/esm/translators:169:29)
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:526:24)

Reproduction
Steps to reproduce the behavior:

1. git clone https://github.com/emersonbottero/histoire-demo.git
2. npm i
3. npm run story:dev
4. See error

Expected behavior
it should build and show the component rendered in histoire

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

System:
OS: Windows 10 10.0.22621
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Memory: 5.89 GB / 15.92 GB
Binaries:
Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.1.3 - ~\AppData\Roaming\npm\npm.CMD
Browsers:
Chrome: 114.0.5735.134
Edge: Spartan (44.22621.1830.0), Chromium (114.0.1823.51)
Internet Explorer: 11.0.22621.1
npmPackages:
@histoire/plugin-vue: ^0.16.1 => 0.16.1
@vitejs/plugin-vue: ^4.2.3 => 4.2.3
histoire: ^0.16.2 => 0.16.2
vite: ^4.3.9 => 4.3.9

Create popup version of calendar widget

Next button unexpected behavior.

The "Next" button goes back instead of advancing.

"previous/last 12 december"

Turns into 12 dec 2020 instead of 2019.

Add esbuild and rollup.js examples to docs

The docs mention using esbuild and rollup.js, but I'm having some issues getting either to work for inclusive-dates.

With esbuild I'm getting this error on page load, Error: Dynamic require of "./inclusive-dates_3.entry.js" is not supported.

With rollup.js I'm getting several warnings during building and this error on page load, Uncaught ReferenceError: require is not defined.

I'm not very familiar with JS build systems, so the solutions aren't obvious to me. I will probably be able to muddle my way through in time, but having ready examples would be fantastic.

"day before yesterday"

returns same result as "yesterday"

[BUG] Confirmation/Dismissal Announcements

Describe the bug
Dismissal of the date range modal does not announce confirmation with screen readers.

Reproduction
Selection (with the ENTER key) or dismissal (with the ESC key) on date range is announced with a screen reader (such as NVDA). When confirming a date by adjusting from the date range field itself (using the ENTER key) there is no screen reader confirmation. The same goes for when the date range modal is dismissed using the ESC key—no announcement.

Expected behavior
The expectation is that both opening and closing of the modal is confirmed by announcement.

Context
W3C ARIA APG references aria-label=”string” (setting an initial “choose date” value and changing it to the “date_string” when selected) but we’re not seeing where the hole is with the confirmation and dismissal not getting picked up by screen readers. (Everything else is announced flawlessly, including date selection.)

• Device: Desktop PC
• Operating System: Windows 10
• Browser: Chrome
• Example implementation: https://uhn.dev.sandboxsoftware.ca/events/ (Date Range Field)

[BUG] Bundling error

Describe the bug
The module seems to be missing some typings for InclusiveDates elements.

Reproduction
Steps to reproduce the behavior:

1. npm install inclusive-dates
2. Navigate to node_modules/inclusive-dates/dist/components/index.d.ts
3. See error 'cannot find module' on line 2.

Expected behavior
The inclusive-dates module should include a dist/types/components/inclusive-dates folder with typings.

Screenshots

Context
I'm bundling inclusive-dates into a React component library to backbone a DatePicker component.

I did pull down the inclusive-dates repo and noticed that without adjusting any config, I built the library twice. After the first build, the dist folder looked exactly like what I pulled down from npmjs. After the second build, the dist folder updated to include all the typings. When I copied that locally built dist folder into my component library's assets folder and used inclusive-dates from there, it worked perfectly.

Please add a license file

At present, it may not legal for anybody to use or even read this code. Though yes, MIT is specified in the package.json, it isn't enough for most corporations and programmers to consider valid.

Implement tests (Cypress or similar)

Rewrite as vanilla JS instead of Jquery

Rewrite demo page without using any CSS framework

Right now the demo pages uses Foundation 6. I would like to go more lightweight and minimize dependencies

"next thursday"

Turns into 2020-07-30, which is the week after next thursday.

Can you please publish 0.1.10 to npm?

Hi @fymmot,

Thanks for accepting my PR last week. Looks like the publish chore failed. Any chance you can publish the latest version to npm?

Down Arrow doesn't proceed forward in time past the current month

I love this thing, but I noticed that the down arrow only goes to the last week in the month and then cycles back around to the same day, the first week of the month. This is unlike the up arrow that proceeds to move back in time past the current month.

Refactor the code for easier reuse

Goals:

• Separate the calendar from the input processing feature and the keyboard shortcuts
• Make it possible to toggle features on and off (input processing, keyboard shortcuts)
• Use templating for all HTML code that is inserted with script
• Make it possible to translate and modify all text

Some questions about the demo and working

First of all I looked at a lot of datepickers and I really like this one but the documentation is a little bit unclear for me (maybe skill issue)

https://fymmot.github.io/inclusive-dates/#demo

if deselect show-clear-button this works in the demo above. If I deselect show-today-button this is not visible (or invisible) in the demo above.

show-keyboard-hint changes the wrong setting (formatting)

is there a way to disable the quickButtons (today, yesterday, 10 days)? For example show-quick-buttons

I have difficulty to set the labels. Is it possible to set this inline (not in js/ts). Something like this isn't working

<inclusive-dates
   		first-day-of-week="1"
   		id="datepicker"
   		class="datepicker"
   		min-date="2023-01-01"
   		max-date="2023-04-20"
   		locale="nl-NL"
   		show-today-button="false"
   		input-should-format="false"
   		label="Kies een datum"
   		labels="{
 clearButton: 'Clear value!!!',
 monthSelect: 'Select month!!!',
 nextMonthButton: 'Next month!!!',
 nextYearButton: 'Next year!!',
 picker: 'Choose date!!!',
 previousMonthButton: 'Previous month!!!',
 previousYearButton: 'Previous year!!!',
 todayButton: 'Show today !!!',
 yearSelect: 'Select year!!!'
}"
   	></inclusive-dates>

And i also miss the Keyboard commands and Open calendar. The last one I see in defaultLabels but I have no idea how to set this because it's a constant

feature request - support other languages, support internationalization

Currently it works only with english language.

Consider <output> to display date

After collecting the date from the user and converting it to the more formal format, consider putting that value into an <output> element so a user can see it (or hear it if a screen reader user) immediately.

This would allow them to quickly confirm the date and skip the picker altogether if the calculated date is correct.

I use this approach with good success in a prototype that I tested with small group of users on a project. A simplified example is here: https://adrianroselli.com/2019/07/maybe-you-dont-need-a-date-picker.html#Prototype

How to use on a basic site without NPM?

How do we use this library on a basic site with no NPM and with just a script tag to include it?

support for compound dates

I was doing some testing and noticed dates like "Monday" and "two weeks" work, but not "two weeks from Monday". I think being able to combine these relative dates would be really powerful and people may mistakenly assume they already do work.

Better feedback for screen reader users when entering valid natural language date