release 1.2.0

CHANGELOG.md

@@ -1,5 +1,47 @@
 # changelog
 
+## 1.2.0
+
+### Potentially breaking changes
+
+- __Edge Legacy (non-Chromium Edge) is no longer supported.__
+  - Since Microsoft no longer supports it already and its market share is lower than IE, I decided not to add fallback code for Shadow DOM API.
+  - If your program needs to support Edge Legacy, please use [Web Components polyfill](https://www.npmjs.com/package/@webcomponents/webcomponentsjs).
+- __Date picker element is now inserted after the associated input element by default.__
+  - The default value of the `container` option is changed to `null`.
+  - If your program has the input element inside an element styled with `overflow` other than `visible` and the element doesn't have enough space, the picker will be clipped.
+  - If you need the previous version's behavior to avoid it, please set `'body'` to the container option,
+  - The purpose of this change is to make z-index adjustment in cases like #50 basically unneeded.
+  - This change doesn't apply for inline picker.
+
+### New features
+
+- Add Bootstrap 5 support (#37, #73)
+- Add Web Components support (#83)
+  - `container` option now accepts HTMLElement instance.
+
+### Bug fix
+
+- Fix #56 — `minDate`/`maxDate` aren't set to the start/end of month/year when pickLevel > 0 and either format or passed date string doesn't contain the date part.
+  - The same fix is applied to `datesDisabled` as well
+- Fix — picker doesn't hide on unfocus if a date outside the minDate/maxDate range is entered to the input field.
+- Fix — `disableTouchKeyboard` doesn't work
+- Fix — picker doesn't hide on click outside after input is unfocused by closing mobile keyboard (maybe related to #72?)
+- Fix — picker is placed incorrectly when container is user-specified element. (related to #81)
+
+### Changes
+
+- Change the default placement of `orientation: 'auto'` to bottom-left (#54, #82)
+- Replace out-of-date dev dependencies: node-sass, uglyfy-es → dart-sass, terser (#76)
+- Deprecate `disableTouchKeyboard` option. (#78)
+- Change the way to Keep input element focused when clicking picker in order to prevent flicker (#85)
+  - The change also adds capability for users to extend the picker (see #4 in [this comment](https://github.com/mymth/vanillajs-datepicker/issues/85#issuecomment-966604223) - Thank you, @xdev1)  
+- Remove keydown event cancellation except arrow keys' preventDefault (#88)
+- Apply the bootstrap-datepicker's locale updates
+- Revise container's functionality
+  - Not used internally for position calculation, only for users to control stacking context.
+  - No changes for inline picker
+
 ## 1.1.4
 
 ### Changes

README.md

@@ -14,12 +14,13 @@ The package also includes pre-built js/css files for those who like to use it di
 - i18n support (locales, CSS-based text direction detection)
 - Easily customizable to adapt stylesheet for various CSS frameworks
 - Dependency free
-- Made for modern browsers — no IE support
-- Lightweight (well, relatively…) — 33kB (minified, uncompressed)
+- Made for modern browsers — no support for IE and Edge Legacy (aka non-Chromium Edge)  
+  _** If you need to support Edge Legacy, [Web Components polyfill](https://www.npmjs.com/package/@webcomponents/webcomponentsjs) will allow this library to run on it._
+- Lightweight (well, relatively…) — 34kB (minified, uncompressed)
 
 ### Demo
 
-[Live Online Demo](https://raw.githack.com/mymth/vanillajs-datepicker/v1.1.4/demo/)
+[Live Online Demo](https://raw.githack.com/mymth/vanillajs-datepicker/v1.2.0/demo/)
 
 ### Documentation
 

docs/README.md

@@ -20,7 +20,7 @@ The package also includes pre-built js/css files for those who like to use it di
 
 ##### Demo
 
-[Live Online Demo](https://raw.githack.com/mymth/vanillajs-datepicker/v1.1.4/demo/)
+[Live Online Demo](https://raw.githack.com/mymth/vanillajs-datepicker/v1.2.0/demo/)
 
 ## Quick Start
 
@@ -239,29 +239,29 @@ const datepicker = new Datepicker(elem, {
 1. From CDN, load css and js files.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker.min.css">
 
 ...
 
-<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker-full.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/datepicker-full.min.js"></script>
 ```
 
 _If you use Bulma, Bootstrap (v5, v4) or Foundation, you can use the css for your framework instead._
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker-bulma.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker-bulma.min.css">
 <!-- or -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker-bs5.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker-bs5.min.css">
 <!-- or -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker-bs4.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker-bs4.min.css">
 <!-- or -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker-foundation.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker-foundation.min.css">
 ```
 
 _And if don't need date range, you can use the datepicker-only version of js file._
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/datepicker.min.js"></script>
 ```
 
 2. Call `Datepicker`/`DateRangePicker` constructor in the same way as explained [above](?id=quick-start). (The classes are exposed to global scope.)

docs/i18n.md

@@ -34,10 +34,10 @@ Object.assign(Datepicker.locales, es, fr, zhCN);
 Load the locale files you need after Datepicker
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker-full.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/locales/es.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/locales/fr.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/locales/zh-CN.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/datepicker-full.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/locales/es.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/locales/fr.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/locales/zh-CN.js"></script>
 ```
 
 ### Custom locale