Datepicker element built with Google's lit and Material Design 2021
MIT License
Bot releases are hidden (Show)
Full Changelog: https://github.com/motss/app-datepicker/compare/v5.0.1...v5.1.0
Published by motss over 2 years ago
1️⃣ + year of rewrite in ✌️6️⃣ has become the main
branch as of March 27, 2022. There were some ups and downs in the past 1 year and many things happened in life such as Covid 19 and people working from home. I never stop learning more stuff in my life especially frontend web development. It's been a wonderful and fruitful journey for me to work on this open source project and fortunate enough to continuing to witness its growth since its first release about 7 years ago. As more and more browsers gaining native support for date pickers, I can't wait to see the bright future of date pickers to be available in all the web and that's possibly when this project reaches its end of life.
Cheers everyone and hope to see you in Discord! 👋😄 -- @motss
[email protected]
[email protected]
app-*
elementsweb-test-runner
+ Playwright
eslint
+ typescript-eslint
simple-git-hooks
nano-staged
AppDatePicker
, AppDatePickerDialog
, and 🆕 AppDatePickerInput
[email protected]
+ [email protected]
as of writingapp-datepicker
Full Changelog: https://github.com/motss/app-datepicker/compare/v5.0.1...v6.0.0-rc.24
Published by motss almost 3 years ago
[email protected]
by @motss in https://github.com/motss/app-datepicker/pull/203
Full Changelog: https://github.com/motss/app-datepicker/compare/v4.5.3...v5.0.1
Published by motss over 3 years ago
Published by motss almost 4 years ago
@material/mwc-button
to v0.20.0
Published by motss about 4 years ago
@material/mwc-button
to v0.19.1
Published by motss about 4 years ago
@material/mwc-button
to v0.18.0
sideEffects: false
in package.json to fix #181 and #184v0.15.0
Published by motss over 4 years ago
📦 app-datepicker@v4
is finally released!!! 🎉 🔥 🔥 🔥
After more than a year since v3
(first release was at Dec 27, 2018), a new major release is finally here with tons of fixes and features added to this release. It's been a long journey and without the support from the community and the users, it wouldn't have been possible. I've tried my best to hear all the voices and feedbacks that have been given to me to improve my this element. 👍 Thank you all for the support.
The core of the element is simple:
TypeScript 3.8
lit-element 2.3.1
(lit-html 1.2.1
)@material/mwc-button 0.14
16.6KB
(minified + gzipped). That is ~70.62% smaller as compared to v3
(56.5KB
)lit-element
, Shadow Parts, Constructible Stylesheets, Web Animations with CSS Animations fallback (no polyfill required) and Web Components v1webdriverio@5
for unit testing@material
's material-web-components
such as mwc-dialog
Once again, thank you and have a great day ahead! Stay home stay safe! 🏠
Published by motss almost 5 years ago
Calendar swiping feature needs some serious refactoring due to change of API and bugs. It has been disabled as of this version until further notice.
Add more styling entry points via CSS Custom Properties so that users can customize the appearance of the date picker such as adding support for dark theme:
@media (prefers-color-scheme: dark) {
app-datepicker,
app-datepicker-dialog {
--app-datepicker-bg-color: #000;
--app-datepicker-color: #f5f5f5;
--app-datepicker-disabled-day-color: rgba(255, 255, 255, .35);
--app-datepicker-focused-day-color: #000;
--app-datepicker-selector-color: rgba(255, 255, 255, .55);
--app-datepicker-separator-color: #000;
--app-datepicker-weekday-color: rgba(255, 255, 255, .55);
}
}
Published by motss over 7 years ago
🐛 BUG FIX
format
does not work as expected.Published by motss over 7 years ago
app-datepicker
is now a hybrid Polymer element that supports both Polymer 1.x and Polymer 2.0 stable!!app-datepicker
is now compatible with both Polymer 1.x and Polymer 2.0 stable.alwaysResetSelectedDateOnDialogClose
- proposed by #74 to allow datepicker to reset the selected date to today's date once the datepicker closes and the demo has this included as well.Published by motss almost 8 years ago
confirmLabel
- proposed by #61 to allow customization for text in confirm button of app-datepicker-dialog
.dismissLabel
- proposed by #61 to allow customization for text in dismiss button of app-datepicker-dialog
.[email protected]
[email protected]
is working in progress to address some of the issues of 2.x such as support for web accessibility, support for Polymer 2.0, etc. Meaning mainly bug fixes will likely to occur as of now and new features will go into [email protected]
! 🎉
While waiting for Polymer 2.0 to go stable, feedbacks are welcome to help make app-datepicker
more useful and awesome and feature rich.
Published by motss about 8 years ago
disableDates
- proposed by #45 to support disabling dates defined by the user and see Live demo for more details.Intl
polyfill was previously being importHref
for browsers that do not support native Intl. Now, users are recommended to load polyfills at the top-level document (usually index.html
) using feature detection.Published by motss over 8 years ago
autoUpdateDate
proposed by #20 to enable auto date update when datepicker is a standalone element on the document (not inside an overlay/ dialog and has no button for date confirmation).iron-iconset-svg
.autoUpdateDate
.new Date()
to get total number of days in a month. // To get the total number of days in February.
let _givenFullYear = 2016;
let _givenMonth = 1;
let _totalNumberOfDays = new Date(_givenFullYear, _givenMonth + 1, 0).getDate();
console.log(_totalNumberOfDays); // 29
Published by motss over 8 years ago
theme
- To make changing themes simple by setting new value via property.view
- The datepicker can be structured and displayed at the user's will regardless of the orientation of the device used.
Published by motss over 8 years ago
inputDate
- To allow date change from the external, #7.invalidDate
- Comes with inputDate
to indicate valid input date.noAnimation
- To disable/ enable animations and transitions within the datepicker.pageEntryAnimation
- To customize entry animation when page switching between months.pageExitAnimation
- To customize exit animation when page switching between months.enforceDateChange
- By default, a datepicker will not trigger date change when a date is being tapped on. Buttons are required to confirm before propagate the changes. This method is now open to update selected date without respecting the confirmation.dist
for production in the upcoming release..Published by motss over 8 years ago