sqrrl / wc-datepicker Goto Github PK
View Code? Open in Web Editor NEWA small, accessible and customizable datepicker written in TypeScript.
Home Page: https://sqrrl.github.io/wc-datepicker
License: MIT License
A small, accessible and customizable datepicker written in TypeScript.
Home Page: https://sqrrl.github.io/wc-datepicker
License: MIT License
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
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
There really isn't a method to show/hide the picker? Or better yet, show/hide automatically when an input receives/loses focus?
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
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:
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!
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:
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.
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.
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:
aria-label
attribute to the th
elements. The abbr
attribute is not announced by all screen readers.wc-datepicker__header
when the selected value changes (currently, it changes when users navigate through the dates with the keyboard).wc-datepicker__header
to express the selected range (e.g., “June 21, 2024 to June 25, 2024”).title
attribute to the month and year selection fields (same value as the aria-label).disableDate
, prevent the disabled dates from being focused.Do you think these changes could be implemented?
I can open PRs if you prefer.
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!
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>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.