Join our webinar on Wednesday, June 26, at 1pm EDTHow Chia Mitigates Risk in the Crypto Industry.Register →
react-date-picker
Advanced tools
Comparing version 9.2.1 to 9.3.0
| { | ||
| "name": "react-date-picker", | ||
| "version": "9.2.1", | ||
| "version": "9.3.0", | ||
| "description": "A date picker for your React app.", | ||
| "main": "dist/entry.js", | ||
| "source": "src/entry.js", | ||
| "types": "./index.d.ts", | ||
| "main": "dist/cjs/index.js", | ||
| "module": "dist/esm/index.js", | ||
| "source": "src/index.js", | ||
| "sideEffects": [ | ||
| "*.css" | ||
| ], | ||
| "scripts": { | ||
| "build": "yarn build-js && yarn copy-styles && yarn copy-types", | ||
| "build-js": "babel src -d dist --ignore \"**/*.spec.js,**/*.spec.jsx\"", | ||
| "build": "yarn build-js && yarn copy-styles", | ||
| "build-js": "yarn build-js-esm && yarn build-js-cjs", | ||
| "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext", | ||
| "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs", | ||
| "clean": "rimraf dist", | ||
| "copy-styles": "node ./copy-styles.js", | ||
| "copy-types": "node ./copy-types.js", | ||
| "jest": "jest", | ||
| "lint": "eslint sample src test --ext .jsx,.js", | ||
| "copy-styles": "node ./copy-styles.mjs", | ||
| "lint": "eslint . --ext .js,.jsx,.ts,.tsx", | ||
| "prepack": "yarn clean && yarn build", | ||
| "prettier": "prettier --check . --cache", | ||
| "test": "yarn lint && yarn prettier && yarn jest" | ||
| "test": "yarn lint && yarn tsc && yarn prettier && yarn unit", | ||
| "tsc": "tsc --noEmit", | ||
| "unit": "vitest run" | ||
| }, | ||
@@ -33,25 +38,20 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@types/react-calendar": "^3.0.0", | ||
| "@wojtekmaj/date-utils": "^1.0.3", | ||
| "@wojtekmaj/date-utils": "^1.1.3", | ||
| "clsx": "^1.2.1", | ||
| "get-user-locale": "^1.2.0", | ||
| "make-event-props": "^1.1.0", | ||
| "get-user-locale": "^2.2.1", | ||
| "make-event-props": "^1.4.2", | ||
| "prop-types": "^15.6.0", | ||
| "react-calendar": "~4.0.0", | ||
| "react-fit": "^1.4.0", | ||
| "update-input-width": "^1.2.2" | ||
| "react-calendar": "^4.2.0", | ||
| "react-fit": "^1.5.1", | ||
| "update-input-width": "^1.3.1" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.15.0", | ||
| "@babel/core": "^7.15.0", | ||
| "@babel/preset-env": "^7.15.0", | ||
| "@babel/preset-react": "^7.14.0", | ||
| "@testing-library/dom": "^9.0.0", | ||
| "@testing-library/jest-dom": "^5.15.0", | ||
| "@testing-library/react": "^13.4.0", | ||
| "@testing-library/react": "^14.0.0", | ||
| "@testing-library/user-event": "^14.4.0", | ||
| "eslint": "^8.26.0", | ||
| "eslint-config-wojtekmaj": "^0.7.1", | ||
| "eslint-config-wojtekmaj": "^0.8.3", | ||
| "husky": "^8.0.0", | ||
| "jest": "^29.0.0", | ||
| "jest-environment-jsdom": "^29.0.0", | ||
| "jsdom": "^21.1.0", | ||
| "prettier": "^2.7.0", | ||
@@ -61,3 +61,6 @@ "pretty-quick": "^3.1.0", | ||
| "react-dom": "^18.2.0", | ||
| "rimraf": "^3.0.0" | ||
| "rimraf": "^3.0.0", | ||
| "typescript": "^5.0.2", | ||
| "vitest": "^0.29.2", | ||
| "vitest-canvas-mock": "^0.2.2" | ||
| }, | ||
@@ -68,5 +71,2 @@ "peerDependencies": { | ||
| }, | ||
| "resolutions": { | ||
| "semver@7.0.0": "^7.0.0" | ||
| }, | ||
| "files": [ | ||
@@ -73,0 +73,0 @@ "dist", |
@@ -1,2 +0,2 @@ | ||
| [](https://www.npmjs.com/package/react-date-picker)  [](https://github.com/wojtekmaj/react-date-picker/actions) [](https://github.com/facebook/jest) | ||
| [](https://www.npmjs.com/package/react-date-picker)  [](https://github.com/wojtekmaj/react-date-picker/actions) | ||
@@ -69,5 +69,8 @@ # React-Date-Picker | ||
| If you don't want to use default React-Date-Picker and React-Calendar styles, you can import React-Date-Picker without them by using `import DatePicker from 'react-date-picker/dist/entry.nostyle';` instead. | ||
| If you want to use default React-Date-Picker and React-Calendar styling to build upon it, you can import them by using: | ||
| Styles loaded by the default entry file are `react-date-picker/dist/DatePicker.css` and `react-calendar/dist/Calendar.css`. You can copy them to your project to build your own upon them. | ||
| ```js | ||
| import 'react-date-picker/dist/DatePicker.css'; | ||
| import 'react-calendar/dist/Calendar.css'; | ||
| ``` | ||
@@ -86,40 +89,40 @@ ### Next.js and Vite | ||
| | Prop name | Description | Default value | Example values | | ||
| | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------- | | ||
| | autoFocus | Automatically focuses the input on mount. | n/a | `true` | | ||
| | calendarAriaLabel | `aria-label` for the calendar button. | n/a | `"Toggle calendar"` | | ||
| | calendarClassName | Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> | | ||
| | calendarIcon | Content of the calendar button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul> | | ||
| | className | Class name(s) that will be added along with `"react-date-picker"` to the main React-Date-Picker `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> | | ||
| | clearAriaLabel | `aria-label` for the clear button. | n/a | `"Clear value"` | | ||
| | clearIcon | Content of the clear button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul> | | ||
| | closeCalendar | Whether to close the calendar on value selection. | `true` | `false` | | ||
| | data-testid | `data-testid` attribute for the main React-Date-Picker `<div>` element. | n/a | `"date-picker"` | | ||
| | dayAriaLabel | `aria-label` for the day input. | n/a | `"Day"` | | ||
| | dayPlaceholder | `placeholder` for the day input. | `"--"` | `"dd"` | | ||
| | disabled | Whether the date picker should be disabled. | `false` | `true` | | ||
| | disableCalendar | When set to `true`, will remove the calendar and the button toggling its visibility. | `false` | `true` | | ||
| | format | Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`. | n/a | `"y-MM-dd"` | | ||
| | isOpen | Whether the calendar should be opened. | `false` | `true` | | ||
| | locale | Locale that should be used by the date picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | User's browser settings | `"hu-HU"` | | ||
| | maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-Date-Picker will ensure that no later date is selected. | n/a | Date: `new Date()` | | ||
| | maxDetail | The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`. | `"month"` | `"year"` | | ||
| | minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Date-Picker will ensure that no earlier date is selected. | n/a | Date: `new Date()` | | ||
| | minDetail | The least detailed calendar view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`. | `"century"` | `"decade"` | | ||
| | monthAriaLabel | `aria-label` for the month input. | n/a | `"Month"` | | ||
| | monthPlaceholder | `placeholder` for the month input. | `"--"` | `"mm"` | | ||
| | name | Input name. | `"date"` | `"myCustomName"` | | ||
| | nativeInputAriaLabel | `aria-label` for the native date input. | n/a | `"Date"` | | ||
| | onCalendarClose | Function called when the calendar closes. | n/a | `() => alert('Calendar closed')` | | ||
| | onCalendarOpen | Function called when the calendar opens. | n/a | `() => alert('Calendar opened')` | | ||
| | onChange | Function called when the user picks a valid date. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a "base". | n/a | `(value) => alert('New date is: ', value)` | | ||
| | onFocus | Function called when the focuses an input. | n/a | `(event) => alert('Focused input: ', event.target.name)` | | ||
| | openCalendarOnFocus | Whether to open the calendar on input focus. | `true` | `false` | | ||
| | portalContainer | Element to render the calendar in using portal. | n/a | `document.getElementById('my-div')` | | ||
| | required | Whether date input should be required. | `false` | `true` | | ||
| | returnValue | Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed. | `"start"` | `"range"` | | ||
| | showLeadingZeros | Whether leading zeros should be rendered in date inputs. | `false` | `true` | | ||
| | value | Input value. | n/a | <ul><li>Date: `new Date()`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li></ul> | | ||
| | yearAriaLabel | `aria-label` for the year input. | n/a | `"Year"` | | ||
| | yearPlaceholder | `aria-label` for the year input. | `"----"` | `"yyyy"` | | ||
| | Prop name | Description | Default value | Example values | | ||
| | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | autoFocus | Automatically focuses the input on mount. | n/a | `true` | | ||
| | calendarAriaLabel | `aria-label` for the calendar button. | n/a | `"Toggle calendar"` | | ||
| | calendarClassName | Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> | | ||
| | calendarIcon | Content of the calendar button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li><li>React function: `CalendarIcon`</li></ul> | | ||
| | className | Class name(s) that will be added along with `"react-date-picker"` to the main React-Date-Picker `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> | | ||
| | clearAriaLabel | `aria-label` for the clear button. | n/a | `"Clear value"` | | ||
| | clearIcon | Content of the clear button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li><li>React function: `ClearIcon`</li></ul> | | ||
| | closeCalendar | Whether to close the calendar on value selection. | `true` | `false` | | ||
| | data-testid | `data-testid` attribute for the main React-Date-Picker `<div>` element. | n/a | `"date-picker"` | | ||
| | dayAriaLabel | `aria-label` for the day input. | n/a | `"Day"` | | ||
| | dayPlaceholder | `placeholder` for the day input. | `"--"` | `"dd"` | | ||
| | disabled | Whether the date picker should be disabled. | `false` | `true` | | ||
| | disableCalendar | When set to `true`, will remove the calendar and the button toggling its visibility. | `false` | `true` | | ||
| | format | Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`. | n/a | `"y-MM-dd"` | | ||
| | isOpen | Whether the calendar should be opened. | `false` | `true` | | ||
| | locale | Locale that should be used by the date picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | User's browser settings | `"hu-HU"` | | ||
| | maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-Date-Picker will ensure that no later date is selected. | n/a | Date: `new Date()` | | ||
| | maxDetail | The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"month"`, `"year"`, `"decade"` or `"century"`. | `"month"` | `"year"` | | ||
| | minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Date-Picker will ensure that no earlier date is selected. | n/a | Date: `new Date()` | | ||
| | minDetail | The least detailed calendar view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`. | `"century"` | `"decade"` | | ||
| | monthAriaLabel | `aria-label` for the month input. | n/a | `"Month"` | | ||
| | monthPlaceholder | `placeholder` for the month input. | `"--"` | `"mm"` | | ||
| | name | Input name. | `"date"` | `"myCustomName"` | | ||
| | nativeInputAriaLabel | `aria-label` for the native date input. | n/a | `"Date"` | | ||
| | onCalendarClose | Function called when the calendar closes. | n/a | `() => alert('Calendar closed')` | | ||
| | onCalendarOpen | Function called when the calendar opens. | n/a | `() => alert('Calendar opened')` | | ||
| | onChange | Function called when the user picks a valid date. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a "base". | n/a | `(value) => alert('New date is: ', value)` | | ||
| | onFocus | Function called when the focuses an input. | n/a | `(event) => alert('Focused input: ', event.target.name)` | | ||
| | openCalendarOnFocus | Whether to open the calendar on input focus. | `true` | `false` | | ||
| | portalContainer | Element to render the calendar in using portal. | n/a | `document.getElementById('my-div')` | | ||
| | required | Whether date input should be required. | `false` | `true` | | ||
| | returnValue | Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed. | `"start"` | `"range"` | | ||
| | showLeadingZeros | Whether leading zeros should be rendered in date inputs. | `false` | `true` | | ||
| | value | Input value. Note that if you pass an array of values, only first value will be fully utilized. | n/a | <ul><li>Date: `new Date(2017, 0, 1)`</li><li>String: `"2017-01-01"`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li><li>An array of strings: `["2017-01-01", "2017-08-01"]`</li></ul> | | ||
| | yearAriaLabel | `aria-label` for the year input. | n/a | `"Year"` | | ||
| | yearPlaceholder | `aria-label` for the year input. | `"----"` | `"yyyy"` | | ||
@@ -126,0 +129,0 @@ ### Calendar |
New alerts
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by34.3%
308790
- Dependency count
- decreased by-9.09%
10
- Dev dependency count
- decreased by-5.88%
16
- Number of package files
- increased by93.48%
89
- Lines of code
- increased by38.11%
6896
- Number of lines in readme file
- increased by1.81%
169
Worsened metrics
- Number of high maintenance alerts
- increased byInfinity%
1
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedclsx@2.1.1(transitive)
+ Addedget-user-locale@2.3.2(transitive)
+ Addedmap-age-cleaner@0.1.3(transitive)
+ Addedmem@8.1.1(transitive)
+ Addedmimic-fn@3.1.0(transitive)
+ Addedp-defer@1.0.0(transitive)
+ Addedreact-calendar@4.8.0(transitive)
+ Addedwarning@4.0.3(transitive)
- Removed@types/react-calendar@^3.0.0
- Removed@types/prop-types@15.7.12(transitive)
- Removed@types/react@18.3.3(transitive)
- Removed@types/react-calendar@3.9.0(transitive)
- Removedcsstype@3.1.3(transitive)
- Removedget-user-locale@1.5.1(transitive)
- Removedlodash.memoize@4.1.2(transitive)
- Removedreact-calendar@4.0.0(transitive)
Updated@wojtekmaj/date-utils@^1.1.3
Updatedget-user-locale@^2.2.1
Updatedmake-event-props@^1.4.2
Updatedreact-calendar@^4.2.0
Updatedreact-fit@^1.5.1
Updatedupdate-input-width@^1.3.1