What's Changed

• Feature/add part attribute to today day by @achamorro-dev in https://github.com/motss/app-datepicker/pull/206
• chore: minor cleanup by @motss in https://github.com/motss/app-datepicker/pull/208

New Contributors

• @achamorro-dev made their first contribution in https://github.com/motss/app-datepicker/pull/206

Full Changelog: https://github.com/motss/app-datepicker/compare/v5.0.1...v5.1.0

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

Notable changes 🎉 🚀

1. Major rewrite with the following tech stacks:
   1. [email protected]
   2. [email protected]
   3. Material Design 2021 - fully integrated with Material Design Web Components as well as compatible with MD design tokens with slight changes for app-* elements
   4. [infra] web-test-runner + Playwright
   5. [infra] eslint + typescript-eslint
   6. [infra] simple-git-hooks
   7. [infra] nano-staged
2. Implemented AppDatePicker, AppDatePickerDialog, and 🆕 AppDatePickerInput
3. Added changelogs
4. Updated browser supports to just last 2 versions of evergreen browsers and dropped support on Internet Explorer 11 and legacy Microsoft Edge
5. Better interoperability with other frontend libraries/ frameworks. Tested with [email protected] + [email protected] as of writing
6. Added new Discord channel to talk more about web or app-datepicker

Full Changelog: https://github.com/motss/app-datepicker/compare/v5.0.1...v6.0.0-rc.24

What's Changed

• refactor: Use [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

Changes

1. Update dependencies
2. Update to pin all dependency versions

Notable changes

• Update @material/mwc-button to v0.20.0

Notable changes

• Update @material/mwc-button to v0.19.1

Notable changes

• Update @material/mwc-button to v0.18.0
• Remove sideEffects: false in package.json to fix #181 and #184

Changes

• Update @material/mwc-button to v0.15.0

📦 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:

1. To embrace latest and greatest web platform features
2. No external dependencies on things like animations, i18n, date manipulation in JavaScript, and UI component
3. Keep everything as simple and small as possible
4. Easy-to-use with public properties and methods that make sense
5. Must be based on Google's Material Design

Notable changes

• [feat] Rewritten with the following technologies:
  • TypeScript 3.8
  • lit-element 2.3.1 (lit-html 1.2.1)
  • @material/mwc-button 0.14
• [feat] Adopted Material Design 2 (datepicker's design before year 2020)
• [feat] Full support for touch-capable devices and mobile, especially calendar swiping!
• [perf] Now at 16.6KB (minified + gzipped). That is ~70.62% smaller as compared to v3 (56.5KB)
• [perf] Faster thanks to lit-element, Shadow Parts, Constructible Stylesheets, Web Animations with CSS Animations fallback (no polyfill required) and Web Components v1
• [css] Full CSS customization made possible by Constructible Stylesheets, instead of exposing too many CSS Custom Properties, e.g. dark theme support
• [a11y] Full keyboard support and screen reader support
• [test] Migrated to use webdriverio@5 for unit testing
• [test] Tested on last 2 versions of evergreen browsers including Microsoft Edge 79+. IE11 is no longer support but should work with polyfills.
• [interop] First class support for @material's material-web-components such as mwc-dialog
• [ci] Migrated to use Github Actions for CI/CD

Once again, thank you and have a great day ahead! Stay home stay safe! 🏠

Changes

• 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);
    }
  }
  

🐛 BUG FIX

• As of v2.11, all dates will no longer include users' local system's timezone offset and all will be default to GMT/ UTC timezone. For more info, please see #89.
• Fixed #85 where format does not work as expected.

🌮 🎉 app-datepicker is now a hybrid Polymer element that supports both Polymer 1.x and Polymer 2.0 stable!!

• Pleased to announce that app-datepicker is now compatible with both Polymer 1.x and Polymer 2.0 stable.
• Now Intl polyfill will not load (previously it does) if the browser does not natively support it and it is recommended for users to load the polyfill at the top-level document by some feature detections.
• 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.

NEW FEATURE

1. confirmLabel - proposed by #61 to allow customization for text in confirm button of app-datepicker-dialog.
2. dismissLabel - proposed by #61 to allow customization for text in dismiss button of app-datepicker-dialog.
3. Various bug fixes: #55, #62, #67, #53, #54.

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

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

• New feature added: 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).
• Merged multiple animations into one single file - to reduce network request when loading this element.
• Updated all dependencies to the latest.
• Fixed #23 for missing dependencies iron-iconset-svg.
• Fixed #24 to increase readability for hovered year in the list view.
• Updated demo to include the newly added property autoUpdateDate.

• Added styling when mouse hover at dates on the calendar on all available themes.
• Fixed #12 to enable fast month switching.
• Use new Date() to get total number of days in a month.
  eg.

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

• Added locale support with Intl.DateTimeFormat for all modern browsers and Safari with Intl.js polyfill - to fix #8 with 0d851dd, 7b18c9c
• DRY-up the code.
• Added browser support information
• A full list of language codes can be found in the demo page.

• Added two new properties to allow more controls of the element:
  • 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.

• A list of new features being added in the release:
  • 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.
• Dynamically generate non-critical elements further reduces the element nodes generated behind the screen.
• Added support for IE11 and Edge by fixing the layout issue (at long last!!!)
• CSS tweaks.
• Improved how codes run inside a datepicker.
• Sneak peek: To provide minified version of all files inside a new directory dist for production in the upcoming release..

• 89777d38f287ef9571281c6a57d9bc04027543d9: Removed all Lodash methods as of v2.1.12 after weeks of deep consideration about the issue.
• PART 3 OTW: Expect to bring a few more improvements and/ or features to this element!