New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-datetime-picker
Advanced tools
react-datetime-picker - npm Package Compare versions
Comparing version 4.2.1 to 5.0.0
| { | ||
| "name": "react-datetime-picker", | ||
| "version": "4.2.1", | ||
| "version": "5.0.0", | ||
| "description": "A date range picker for your React app.", | ||
| "main": "dist/entry.js", | ||
| "source": "src/entry.js", | ||
| "main": "dist/cjs/index.js", | ||
| "module": "dist/esm/index.js", | ||
| "source": "src/index.js", | ||
| "sideEffects": [ | ||
| "*.css" | ||
| ], | ||
| "scripts": { | ||
| "build": "yarn build-js && yarn copy-styles", | ||
| "build-js": "babel src -d dist --ignore \"**/*.spec.js,**/*.spec.jsx\"", | ||
| "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", | ||
| "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" | ||
| }, | ||
@@ -34,26 +41,22 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@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-clock": "^4.0.0", | ||
| "react-date-picker": "^9.2.0", | ||
| "react-fit": "^1.4.0", | ||
| "react-time-picker": "^5.2.0" | ||
| "react-calendar": "^4.2.0", | ||
| "react-clock": "^4.2.0", | ||
| "react-date-picker": "^10.0.0", | ||
| "react-fit": "^1.5.1", | ||
| "react-time-picker": "^6.0.0" | ||
| }, | ||
| "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", | ||
@@ -63,3 +66,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" | ||
| }, | ||
@@ -70,5 +76,2 @@ "peerDependencies": { | ||
| }, | ||
| "resolutions": { | ||
| "semver@7.0.0": "^7.0.0" | ||
| }, | ||
| "files": [ | ||
@@ -75,0 +78,0 @@ "dist", |
110
README.md
@@ -1,2 +0,2 @@ | ||
| [](https://www.npmjs.com/package/react-datetime-picker)  [](https://github.com/wojtekmaj/react-datetime-picker/actions)   [](https://github.com/facebook/jest) | ||
| [](https://www.npmjs.com/package/react-datetime-picker)  [](https://github.com/wojtekmaj/react-datetime-picker/actions) | ||
@@ -68,5 +68,9 @@ # React-DateTime-Picker | ||
| If you don't want to use default React-DateTime-Picker, React-Calendar, and React-Clock styles, you can import React-DateTime-Picker without them by using `import DateTimePicker from 'react-datetime-picker/dist/entry.nostyle';` instead. | ||
| If you want to use default React-DateTime-Picker, React-Calendar and React-Clock styling to build upon it, you can import them by using: | ||
| Styles loaded by the default entry file are `react-datetime-picker/dist/DateTimePicker.css`, `react-calendar/dist/Calendar.css`, and `react-clock/dist/Clock.css`. You can copy them to your project to build your own upon them. | ||
| ```js | ||
| import 'react-datetime-picker/dist/DateTimePicker.css'; | ||
| import 'react-calendar/dist/Calendar.css'; | ||
| import 'react-clock/dist/Clock.css'; | ||
| ``` | ||
@@ -85,52 +89,52 @@ ### Next.js and Vite | ||
| | Prop name | Description | Default value | Example values | | ||
| | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------- | | ||
| | amPmAriaLabel | `aria-label` for the AM/PM select input. | n/a | `"Select AM/PM"` | | ||
| | 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-datetime-picker"` to the main React-DateTime-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> | | ||
| | clockClassName | Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> | | ||
| | closeWidgets | Whether to close the widgets on value selection. | `true` | `false` | | ||
| | data-testid | `data-testid` attribute for the main React-DateTime-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 datetime picker should be disabled. | `false` | `true` | | ||
| | disableCalendar | When set to `true`, will remove the calendar and the button toggling its visibility. | `false` | `true` | | ||
| | disableClock | When set to `true`, will remove the clock. | `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`, `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`. | n/a | `"y-MM-dd h:mm:ss a"` | | ||
| | hourAriaLabel | `aria-label` for the hour input. | n/a | `"Hour"` | | ||
| | hourPlaceholder | `placeholder` for the hour input. | `"--"` | `"hh"` | | ||
| | isCalendarOpen | Whether the calendar should be opened. | `false` | `true` | | ||
| | isClockOpen | Whether the clock should be opened. | `false` | `true` | | ||
| | locale | Locale that should be used by the datetime 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-DateTime-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 `"hour"`, `"minute"` or `"second"`. Don't need hour picking? Try [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker)! | `"minute"` | `"second"` | | ||
| | minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateTime-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"` | | ||
| | minuteAriaLabel | `aria-label` for the minute input. | n/a | `"Minute"` | | ||
| | minutePlaceholder | `placeholder` for the minute input. | `"--"` | `"mm"` | | ||
| | monthAriaLabel | `aria-label` for the month input. | n/a | `"Month"` | | ||
| | monthPlaceholder | `placeholder` for the month input. | `"--"` | `"mm"` | | ||
| | name | Input name. | `"datetime"` | `"myCustomName"` | | ||
| | nativeInputAriaLabel | `aria-label` for the native datetime 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 datetime. 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)` | | ||
| | onClockClose | Function called when the clock closes. | n/a | `() => alert('Clock closed')` | | ||
| | onClockOpen | Function called when the clock opens. | n/a | `() => alert('Clock opened')` | | ||
| | onFocus | Function called when the focuses an input. | n/a | `(event) => alert('Focused input: ', event.target.name)` | | ||
| | openWidgetsOnFocus | Whether to open the widgets on input focus. | `true` | `false` | | ||
| | portalContainer | Element to render the widgets in using portal. | n/a | `document.getElementById('my-div')` | | ||
| | 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"` | | ||
| | required | Whether datetime input should be required. | `false` | `true` | | ||
| | secondAriaLabel | `aria-label` for the second input. | n/a | `"Second"` | | ||
| | secondPlaceholder | `placeholder` for the second input. | `"--"` | `"ss"` | | ||
| | showLeadingZeros | Whether leading zeros should be rendered in datetime 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 | | ||
| | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | amPmAriaLabel | `aria-label` for the AM/PM select input. | n/a | `"Select AM/PM"` | | ||
| | 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-datetime-picker"` to the main React-DateTime-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> | | ||
| | clockClassName | Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> | | ||
| | closeWidgets | Whether to close the widgets on value selection. | `true` | `false` | | ||
| | data-testid | `data-testid` attribute for the main React-DateTime-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 datetime picker should be disabled. | `false` | `true` | | ||
| | disableCalendar | When set to `true`, will remove the calendar and the button toggling its visibility. | `false` | `true` | | ||
| | disableClock | When set to `true`, will remove the clock. | `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`, `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`. | n/a | `"y-MM-dd h:mm:ss a"` | | ||
| | hourAriaLabel | `aria-label` for the hour input. | n/a | `"Hour"` | | ||
| | hourPlaceholder | `placeholder` for the hour input. | `"--"` | `"hh"` | | ||
| | isCalendarOpen | Whether the calendar should be opened. | `false` | `true` | | ||
| | isClockOpen | Whether the clock should be opened. | `false` | `true` | | ||
| | locale | Locale that should be used by the datetime 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-DateTime-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 `"hour"`, `"minute"` or `"second"`. Don't need hour picking? Try [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker)! | `"minute"` | `"second"` | | ||
| | minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateTime-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"` | | ||
| | minuteAriaLabel | `aria-label` for the minute input. | n/a | `"Minute"` | | ||
| | minutePlaceholder | `placeholder` for the minute input. | `"--"` | `"mm"` | | ||
| | monthAriaLabel | `aria-label` for the month input. | n/a | `"Month"` | | ||
| | monthPlaceholder | `placeholder` for the month input. | `"--"` | `"mm"` | | ||
| | name | Input name. | `"datetime"` | `"myCustomName"` | | ||
| | nativeInputAriaLabel | `aria-label` for the native datetime 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 datetime. 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)` | | ||
| | onClockClose | Function called when the clock closes. | n/a | `() => alert('Clock closed')` | | ||
| | onClockOpen | Function called when the clock opens. | n/a | `() => alert('Clock opened')` | | ||
| | onFocus | Function called when the focuses an input. | n/a | `(event) => alert('Focused input: ', event.target.name)` | | ||
| | openWidgetsOnFocus | Whether to open the widgets on input focus. | `true` | `false` | | ||
| | portalContainer | Element to render the widgets in using portal. | n/a | `document.getElementById('my-div')` | | ||
| | 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"` | | ||
| | required | Whether datetime input should be required. | `false` | `true` | | ||
| | secondAriaLabel | `aria-label` for the second input. | n/a | `"Second"` | | ||
| | secondPlaceholder | `placeholder` for the second input. | `"--"` | `"ss"` | | ||
| | showLeadingZeros | Whether leading zeros should be rendered in datetime 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, 22, 15)`</li><li>String: `"2017-01-01T22:15:00"`</li><li>An array of dates: `[new Date(2017, 0, 1, 22, 15), new Date(2017, 0, 1, 23, 45)]`</li><li>An array of strings: `["2017-01-01T22:15:00", "2017-01-01T23:45:00"]`</li></ul> | | ||
| | yearAriaLabel | `aria-label` for the year input. | n/a | `"Year"` | | ||
| | yearPlaceholder | `aria-label` for the year input. | `"----"` | `"yyyy"` | | ||
@@ -137,0 +141,0 @@ ### Calendar |
New alerts
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 by27.53%
290101
- Dev dependency count
- decreased by-5.88%
16
- Number of package files
- increased by96.77%
61
- Lines of code
- increased by25.32%
5904
- Number of lines in readme file
- increased by2.48%
165
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addedreact-date-picker@10.6.0(transitive)
+ Addedreact-time-picker@6.6.0(transitive)
- Removedget-user-locale@1.5.1(transitive)
- Removedlodash.memoize@4.1.2(transitive)
- Removedreact-calendar@4.0.0(transitive)
- Removedreact-date-picker@9.3.0(transitive)
- Removedreact-time-picker@5.2.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-clock@^4.2.0
Updatedreact-date-picker@^10.0.0
Updatedreact-fit@^1.5.1
Updatedreact-time-picker@^6.0.0