sqrrl / wc-datepicker Goto Github PK

View Code? Open in Web Editor NEW

53.0 3.0 6.0 786 KB

A small, accessible and customizable datepicker written in TypeScript.

Home Page: https://sqrrl.github.io/wc-datepicker

License: MIT License

CSS 15.79% TypeScript 81.80% HTML 1.69% JavaScript 0.72%

accessibility date-picker datepicker javascript typescript vanilla web-component webcomponent calendar a11y

wc-datepicker's Introduction

wc-datepicker

A small, accessible and customizable datepicker written in TypeScript.

Features

🦶 Small footprint: About 8 KB minified and gzipped.
🪁 Dependency-free: No external dependencies.
🖼 Framework-agnostic: Standard Web Component that works with any framework.
💪 Strongly typed: Written in TypeScript.
🧏‍♀️ Accessible: Built to support users of assistive technology.
🇪🇺 Localizable: Customizable labels and date formats.
🌈 Customizable: Semantic markup with no built-in styles.
🧪 Well tested: Quality assured by means of unit tests.
📆 Range selection: Allows to select single dates or ranges.

Documentation & Demo

https://sqrrl.github.io/wc-datepicker

wc-datepicker's People

Contributors

Stargazers

Watchers

Forkers

alexander-merz fymmot duncanhunter davemccrea heybran

wc-datepicker's Issues

[QUESTION] Show/hide widget

There really isn't a method to show/hide the picker? Or better yet, show/hide automatically when an input receives/loses focus?

[QUESTION] Value is not selected in picker?

Hey! I'm trying to bind the same value to both a date input field and the picker. Clicking on a value in the picker updates the date input field, but not the other way around. I can see though that the calendar itself gets updated (if for example, the month changes), but the date is not selected in the calendar. Is there something I'm missing? Thanks!

Sample code

Set default value from html

Hey
Great work, it looks awesome
Thanks for your work

I'm trying to use and it works pretty sharm, but I can't set a default value.
"start-date" shows the correct month/year, but doesn't show any day selected
maybe I'm using wrong "value"

This is my code
<wc-datepicker locale="es" first-day-of-week="1" start-date="1971-02-27" value={"1971-02-27"} id="Fecha1"></wc-datepicker>

Everything else works perfect
Thanks again

[BUG] Broken calendar in some timezones

Hi!
I received feedback from an American user that the calendar does not handle timezones and can break or give incorrect results. See issue fymmot/inclusive-dates#42 in my repo.

For instance, if you change your local timezone to US East coast or Sao Paolo in the browser, the days of the month go missing and the date selection is incorrect. If I click October 29 the selected value will be October 28

[BUG] Console error is shown if a user enters unsupported year

Describe the bug
In Year field in datepicker, a user can enter the year number. If we enter invalid year number (For example: 1000000) Then a console error is being shown and the calendar is not clickable anymore even though you re enter a valid date.
There should be a boundary on maximum Year that should be used. For example: 9999?
User should not allow to enter any symbols except numbers:
-, +, etc…

Reproduction
Steps to reproduce the behavior:

Go to https://sqrrl.github.io/wc-datepicker/#demo
Change the year to 1000000
Open the console
See the js error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
https://ibb.co/NTq67rF

Context
I tested this on your demo.

Device: Macbook Pro
Operating System: MacOS
Browser: Chrome

[QUESTION] …example doesn't work

I have tried to use your via script tags example and get error: TypeError: target.attributes is undefined.
None of the page content is displayed.
Excuse my English, my native language is Spanish.

<head>
  <script
    type="module"
    src="https://cdn.jsdelivr.net/npm/wc-datepicker/dist/esm/wc-datepicker.js"
  />

  <!-- Loading the theme is optional. -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/wc-datepicker/dist/themes/light.css"
  />
</head>

<body>
  <wc-datepicker></wc-datepicker>
</body>

A11y improvements

Hi!

Thank you for your amazing library! We used it to build our accessible web components design system.

We received some feedback from our a11y consultant, and he identified some improvement opportunities:

Add an aria-label attribute to the th elements. The abbr attribute is not announced by all screen readers.
Only change the value of the hidden span in wc-datepicker__header when the selected value changes (currently, it changes when users navigate through the dates with the keyboard).
In range mode, change the value of the hidden span in wc-datepicker__header to express the selected range (e.g., “June 21, 2024 to June 25, 2024”).
Add a title attribute to the month and year selection fields (same value as the aria-label).
When using disableDate, prevent the disabled dates from being focused.

Do you think these changes could be implemented?
I can open PRs if you prefer.

[QUESTION] … how to define a default range?

Hello!

I would like to know how we can define a default range to the datepicker?
I try to manage this by setting the value but it's not working.

thank you.

Kudos!!

Hi!
I'm just reaching out to tell you what an amazing job you've done with this project! 🌟
Stumbling upon your datepicker felt like hitting the jackpot after searching for a very long time. It really checks all the boxes for me.

I hope you don't mind if I use wc-datepicker as the basis for my own personal datepicker project?

I work as an accessibility specialist and have been thinking a lot about inclusive datepickers.
A couple of years back I created a proof of concept for a "smarter" datepicker that would allow more ways for the user to enter dates, including via natural language and speech input. E.g

"Yesterday"
"Next week"
June fifth
In 23 days

etc.

My proof of concept ( https://github.com/fymmot/inclusive-dates ) received some attention, but I never managed to make it into a reusable component.

Now, finally, I'm building v2 around your datepicker. I have some of the basic functionality down including date parsing but a lot of things still remain before it's viable. If you wanna take a look, it's here:

Docs: https://inclusive-dates-v2.vercel.app/ (GORGEOUS documentation template btw!)
Repo: https://github.com/fymmot/inclusive-dates-v2

If you want to talk, you could find me via e-mail ([email protected]). I would love to collaborate with you around this in any way I can!

All the best, and thank you again!