Repository: wojtekmaj/react-daterange-picker
Branch: main
Commit: 6f19427d70e9
Files: 48
Total size: 117.5 KB
Directory structure:
gitextract_9pvwexcp/
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ └── workflows/
│ ├── ci.yml
│ ├── close-stale-issues.yml
│ └── publish.yml
├── .gitignore
├── .husky/
│ └── pre-commit
├── .vscode/
│ ├── extensions.json
│ └── settings.json
├── .yarnrc.yml
├── LICENSE
├── biome.json
├── package.json
├── packages/
│ └── react-daterange-picker/
│ ├── LICENSE
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ ├── DateRangePicker.css
│ │ ├── DateRangePicker.spec.tsx
│ │ ├── DateRangePicker.tsx
│ │ ├── index.ts
│ │ └── shared/
│ │ └── types.ts
│ ├── tsconfig.build.json
│ ├── tsconfig.json
│ └── vitest.config.ts
├── sample/
│ ├── .gitignore
│ ├── Sample.css
│ ├── Sample.tsx
│ ├── index.html
│ ├── index.tsx
│ ├── package.json
│ ├── tsconfig.json
│ └── vite.config.ts
└── test/
├── .gitignore
├── LocaleOptions.tsx
├── MaxDetailOptions.tsx
├── MinDetailOptions.tsx
├── Test.css
├── Test.tsx
├── ValidityOptions.tsx
├── ValueOptions.tsx
├── ViewOptions.tsx
├── global.d.ts
├── index.html
├── index.tsx
├── package.json
├── shared/
│ └── types.ts
├── tsconfig.json
└── vite.config.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitattributes
================================================
# Auto detect text files and perform LF normalization
* text=auto
# Custom for Visual Studio
*.cs diff=csharp
# Standard to msysgit
*.doc diff=astextplain
*.DOC diff=astextplain
*.docx diff=astextplain
*.DOCX diff=astextplain
*.dot diff=astextplain
*.DOT diff=astextplain
*.pdf diff=astextplain
*.PDF diff=astextplain
*.rtf diff=astextplain
*.RTF diff=astextplain
================================================
FILE: .github/FUNDING.yml
================================================
github: wojtekmaj
open_collective: react-date-picker
================================================
FILE: .github/workflows/ci.yml
================================================
name: CI
on:
push:
branches: ['*']
pull_request:
branches: [main]
env:
HUSKY: 0
jobs:
lint:
name: Static code analysis
runs-on: ubuntu-24.04-arm
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Setup Biome
uses: biomejs/setup-biome@v2
- name: Run tests
run: biome lint
typescript:
name: Type checking
runs-on: ubuntu-24.04-arm
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Cache Yarn cache
uses: actions/cache@v5
env:
cache-name: yarn-cache
with:
path: ~/.yarn/berry/cache
key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-${{ env.cache-name }}
- name: Use Node.js
uses: actions/setup-node@v6
with:
node-version: '24'
- name: Install Corepack
run: npm install -g corepack
- name: Install dependencies
run: yarn --immutable
env:
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: true
- name: Build package
run: yarn build
- name: Run type checking
run: yarn tsc
format:
name: Formatting
runs-on: ubuntu-24.04-arm
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Setup Biome
uses: biomejs/setup-biome@v2
- name: Run formatting
run: biome format
unit:
name: Unit tests
runs-on: ubuntu-24.04-arm
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Cache Yarn cache
uses: actions/cache@v5
env:
cache-name: yarn-cache
with:
path: ~/.yarn/berry/cache
key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-${{ env.cache-name }}
- name: Cache ~/.cache/ms-playwright
id: playwright-cache
uses: actions/cache@v5
env:
cache-name: playwright-cache
with:
path: ~/.cache/ms-playwright
key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
- name: Use Node.js
uses: actions/setup-node@v6
with:
node-version: '24'
- name: Install Corepack
run: npm install -g corepack
- name: Install dependencies
run: yarn --immutable
- name: Install Playwright browsers
if: steps.playwright-cache.outputs.cache-hit != 'true'
run: yarn workspace @wojtekmaj/react-daterange-picker playwright install chromium-headless-shell
- name: Run tests
run: yarn unit
================================================
FILE: .github/workflows/close-stale-issues.yml
================================================
name: Close stale issues
on:
schedule:
- cron: '0 0 * * 1' # Every Monday
workflow_dispatch:
jobs:
close-issues:
name: Close stale issues
runs-on: ubuntu-24.04-arm
steps:
- name: Close stale issues
uses: actions/stale@v8
with:
days-before-issue-stale: 90
days-before-issue-close: 14
stale-issue-label: 'stale'
stale-issue-message: 'This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.'
close-issue-message: 'This issue was closed because it has been stalled for 14 days with no activity.'
exempt-issue-labels: 'fresh'
remove-issue-stale-when-updated: true
days-before-pr-stale: -1
days-before-pr-close: -1
================================================
FILE: .github/workflows/publish.yml
================================================
name: Publish
on:
release:
types: [published]
env:
HUSKY: 0
permissions:
id-token: write
jobs:
publish:
name: Publish
runs-on: ubuntu-24.04-arm
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Cache Yarn cache
uses: actions/cache@v5
env:
cache-name: yarn-cache
with:
path: ~/.yarn/berry/cache
key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/yarn.lock') }}
restore-keys: |
${{ runner.os }}-${{ env.cache-name }}
- name: Use Node.js
uses: actions/setup-node@v6
with:
node-version: '24'
registry-url: 'https://registry.npmjs.org'
- name: Install Corepack
run: npm install -g corepack
- name: Install dependencies
run: yarn --immutable
- name: Publish with latest tag
if: github.event.release.prerelease == false
run: yarn npm publish --tag latest
working-directory: packages/react-daterange-picker
- name: Publish with next tag
if: github.event.release.prerelease == true
run: yarn npm publish --tag next
working-directory: packages/react-daterange-picker
================================================
FILE: .gitignore
================================================
# OS
.DS_Store
# Cache
.cache
.playwright
.tmp
*.tsbuildinfo
.eslintcache
# Yarn
.pnp.*
**/.yarn/*
!**/.yarn/patches
!**/.yarn/plugins
!**/.yarn/releases
!**/.yarn/sdks
!**/.yarn/versions
# Project-generated directories and files
__screenshots__
coverage
dist
node_modules
playwright-report
test-results
package.tgz
# Logs
npm-debug.log
yarn-error.log
# .env files
**/.env
**/.env.*
!**/.env.example
================================================
FILE: .husky/pre-commit
================================================
yarn format --staged --no-errors-on-unmatched --write
================================================
FILE: .vscode/extensions.json
================================================
{
"recommendations": ["biomejs.biome"],
"unwantedRecommendations": ["dbaeumer.jshint", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}
================================================
FILE: .vscode/settings.json
================================================
{
"editor.defaultFormatter": "biomejs.biome",
"editor.formatOnSave": true,
"search.exclude": {
"**/.yarn": true
}
}
================================================
FILE: .yarnrc.yml
================================================
enableHardenedMode: false
enableScripts: false
logFilters:
- code: YN0076
level: discard
nodeLinker: node-modules
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2018–2026 Wojciech Maj
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: biome.json
================================================
{
"$schema": "https://biomejs.dev/schemas/2.4.10/schema.json",
"files": {
"includes": [
"**",
"!**/.yarn",
"!**/coverage",
"!**/dist",
"!**/.pnp.cjs",
"!**/.pnp.loader.mjs"
]
},
"assist": {
"actions": {
"source": {
"organizeImports": {
"level": "on",
"options": {
"groups": [
{ "type": false, "source": ":NODE:" },
{ "type": false, "source": ["vitest", "vitest/**", "@vitest/**", "vitest-*"] },
{ "type": false, "source": ["react", "react-dom", "react-dom/**", "react-native"] },
{ "type": false, "source": [":PACKAGE:"] },
":BLANK_LINE:",
{
"type": false,
"source": [
":PATH:",
"!**/hooks/*",
"!**/use*.js",
"!**/shared/*",
"!**/utils/*",
"!**/__mocks__/*",
"!**/test-utils.js"
]
},
":BLANK_LINE:",
{ "type": false, "source": ["**/hooks/*", "**/use*.js"] },
":BLANK_LINE:",
{ "type": false, "source": ["**/shared/*", "**/utils/*"] },
":BLANK_LINE:",
{ "type": false, "source": "**/__mocks__/*" },
":BLANK_LINE:",
{ "type": false, "source": "**/test-utils.js" },
":BLANK_LINE:",
":NODE:",
":PACKAGE:",
":PATH:"
]
}
}
}
}
},
"formatter": {
"lineWidth": 100,
"indentStyle": "space"
},
"linter": {
"rules": {
"complexity": {
"noUselessSwitchCase": "off"
},
"correctness": {
"noUnusedImports": "warn",
"noUnusedVariables": {
"level": "warn",
"options": {
"ignoreRestSiblings": true
}
}
},
"suspicious": {
"noConsole": "warn"
}
}
},
"css": {
"formatter": {
"quoteStyle": "single"
}
},
"javascript": {
"formatter": {
"quoteStyle": "single"
}
},
"overrides": [
{
"includes": ["**/vite.config.ts"],
"linter": {
"rules": {
"suspicious": {
"noConsole": "off"
}
}
}
}
]
}
================================================
FILE: package.json
================================================
{
"name": "@wojtekmaj/react-daterange-picker-monorepo",
"version": "1.0.0",
"description": "@wojtekmaj/react-daterange-picker monorepo",
"type": "module",
"workspaces": [
"packages/*",
"test"
],
"scripts": {
"build": "yarn workspace @wojtekmaj/react-daterange-picker build",
"dev": "yarn workspace @wojtekmaj/react-daterange-picker watch & yarn workspace test dev",
"format": "yarn workspaces foreach --all run format",
"lint": "yarn workspaces foreach --all run lint",
"postinstall": "husky",
"test": "yarn workspaces foreach --all run test",
"tsc": "yarn workspaces foreach --all run tsc",
"unit": "yarn workspaces foreach --all run unit"
},
"devDependencies": {
"husky": "^9.0.0"
},
"packageManager": "yarn@4.10.3"
}
================================================
FILE: packages/react-daterange-picker/LICENSE
================================================
MIT License
Copyright (c) 2018–2026 Wojciech Maj
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: packages/react-daterange-picker/README.md
================================================
[](https://www.npmjs.com/package/@wojtekmaj/react-daterange-picker)  [](https://github.com/wojtekmaj/react-daterange-picker/actions)
# React-DateRange-Picker
A date range picker for your React app.
- Pick days, months, years, or even decades
- Supports virtually any language
- No moment.js needed
## tl;dr
- Install by executing `npm install @wojtekmaj/react-daterange-picker` or `yarn add @wojtekmaj/react-daterange-picker`.
- Import by adding `import DateRangePicker from '@wojtekmaj/react-daterange-picker'`.
- Use by adding `<DateRangePicker />`. Use `onChange` prop for getting new values.
## Demo
A minimal demo page can be found in `sample` directory.
[Online demo](https://projects.wojtekmaj.pl/react-daterange-picker/) is also available!
## Consider native alternative
If you don't need to support legacy browsers and don't need the advanced features this package provides, consider using native date input instead. It's more accessible, adds no extra weight to your bundle, and works better on mobile devices.
```tsx
<input aria-label="Date from" max={valueTo} min={minDate} type="date" />
<input aria-label="Date to" max={maxDate} min={valueFrom} type="date" />
```
## Looking for a time picker or a datetime picker?
React-DateRange-Picker will play nicely with [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker), [React-Time-Picker](https://github.com/wojtekmaj/react-time-picker) and [React-DateTime-Picker](https://github.com/wojtekmaj/react-datetime-picker). Check them out!
## Getting started
### Compatibility
Your project needs to use React 16.3 or later. If you use an older version of React, please refer to the table below to find a suitable React-DateRange-Picker version.
| React version | Newest compatible React-DateRange-Picker version |
| ------------- | ------------------------------------------------ |
| ≥16.8 | latest |
| ≥16.3 | 4.x |
| ≥16.0 | 2.x |
[React-Calendar](https://github.com/wojtekmaj/react-calendar), on which React-DateRange-Picker relies heavily, uses modern web technologies. That's why it's so fast, lightweight and easy to style. This, however, comes at a cost of [supporting only modern browsers](https://caniuse.com/#feat=internationalization).
### Installation
Add React-DateRange-Picker to your project by executing `npm install @wojtekmaj/react-daterange-picker` or `yarn add @wojtekmaj/react-daterange-picker`.
### Usage
Here's an example of basic usage:
```tsx
import { useState } from 'react';
import DateRangePicker from '@wojtekmaj/react-daterange-picker';
type ValuePiece = Date | null;
type Value = ValuePiece | [ValuePiece, ValuePiece];
function MyApp() {
const [value, onChange] = useState<Value>([new Date(), new Date()]);
return (
<div>
<DateRangePicker onChange={onChange} value={value} />
</div>
);
}
```
### Custom styling
If you want to use default React-DateRange-Picker and React-Calendar styling to build upon it, you can import them by using:
```ts
import '@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css';
import 'react-calendar/dist/Calendar.css';
```
## User guide
### DateRangePicker
Displays an input field complete with custom inputs, native input, and a calendar.
#### Props
| 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"` |
| calendarProps | Props to pass to React-Calendar component. | n/a | See [React-Calendar documentation](https://github.com/wojtekmaj/react-calendar) |
| 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-daterange-picker"` to the main React-DateRange-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. **Note**: It's recommended to use `shouldCloseCalendar` function instead. | `true` | `false` |
| data-testid | `data-testid` attribute for the main React-DateRange-Picker `<div>` element. | n/a | `"daterange-picker"` |
| dayAriaLabel | `aria-label` for the day input. | n/a | `"Day"` |
| dayPlaceholder | `placeholder` for the day input. | `"--"` | `"dd"` |
| disableCalendar | When set to `true`, will remove the calendar and the button toggling its visibility. | `false` | `true` |
| disabled | Whether the date range picker should be disabled. | `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`. **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | n/a | `"y-MM-dd"` |
| id | `id` attribute for the main React-DateRange-Picker `<div>` element. | n/a | `"daterange-picker"` |
| isOpen | Whether the calendar should be opened. | `false` | `true` |
| locale | Locale that should be used by the date range picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | Server locale/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-DateRange-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-DateRange-Picker will ensure that no earlier date is selected. | n/a | Date: `new Date()` |
| monthAriaLabel | `aria-label` for the month input. | n/a | `"Month"` |
| monthPlaceholder | `placeholder` for the month input. | `"--"` | `"mm"` |
| name | Input name prefix. Date from/Date to fields will be named `"yourprefix_from"` and `"yourprefix_to"` respectively. | `"daterange"` | `"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 user focuses an input. | n/a | `(event) => alert('Focused input: ', event.target.name)` |
| onInvalidChange | Function called when the user picks an invalid date. | n/a | `() => alert('Invalid date')` |
| openCalendarOnFocus | Whether to open the calendar on input focus. **Note**: It's recommended to use `shouldOpenCalendar` function instead. | `true` | `false` |
| portalContainer | Element to render the calendar in using portal. | n/a | `document.getElementById('my-div')` |
| rangeDivider | Divider between date inputs. | `"–"` | `" to "` |
| required | Whether date input should be required. | `false` | `true` |
| shouldCloseCalendar | Function called before the calendar closes. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. If it returns `false`, the calendar will not close. | n/a | `({ reason }) => reason !== 'outsideAction'` |
| shouldOpenCalendar | Function called before the calendar opens. `reason` can be `"buttonClick"` or `"focus"`. If it returns `false`, the calendar will not open. | n/a | `({ reason }) => reason !== 'focus'` |
| showLeadingZeros | Whether leading zeros should be rendered in date inputs. | `false` | `true` |
| value | Input value. | 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"` |
### Calendar
DateRangePicker component passes all props to React-Calendar, with the exception of `className` (you can use `calendarClassName` for that instead). There are tons of customizations you can do! For more information, see [Calendar component props](https://github.com/wojtekmaj/react-calendar#props).
## License
The MIT License.
## Author
<table>
<tr>
<td >
<img src="https://avatars.githubusercontent.com/u/5426427?v=4&s=128" width="64" height="64" alt="Wojciech Maj">
</td>
<td>
<a href="https://github.com/wojtekmaj">Wojciech Maj</a>
</td>
</tr>
</table>
================================================
FILE: packages/react-daterange-picker/package.json
================================================
{
"name": "@wojtekmaj/react-daterange-picker",
"version": "7.0.0",
"description": "A date range picker for your React app.",
"type": "module",
"sideEffects": [
"*.css"
],
"main": "./dist/index.js",
"source": "./src/index.ts",
"types": "./dist/index.d.ts",
"exports": {
".": "./dist/index.js",
"./*": "./*"
},
"scripts": {
"build": "yarn build-js && yarn copy-styles",
"build-js": "tsc --project tsconfig.build.json",
"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true })\"",
"copy-styles": "cpy 'src/**/*.css' dist",
"format": "biome format",
"lint": "biome lint",
"prepack": "yarn clean && yarn build",
"test": "yarn lint && yarn tsc && yarn format && yarn unit",
"tsc": "tsc",
"unit": "vitest",
"watch": "yarn build-js --watch & node --eval \"fs.watch('src', () => child_process.exec('yarn copy-styles'))\""
},
"keywords": [
"calendar",
"date",
"date-picker",
"date-range",
"date-range-picker",
"month-picker",
"react"
],
"author": {
"name": "Wojciech Maj",
"email": "kontakt@wojtekmaj.pl"
},
"license": "MIT",
"dependencies": {
"clsx": "^2.0.0",
"make-event-props": "^2.0.0",
"react-calendar": "^6.0.0",
"react-date-picker": "^12.0.1",
"react-fit": "^3.0.0"
},
"devDependencies": {
"@biomejs/biome": "2.4.10",
"@types/node": "*",
"@types/react": "^19.2.0",
"@types/react-dom": "^19.2.0",
"@vitest/browser-playwright": "^4.1.0",
"cpy-cli": "^5.0.0",
"playwright": "^1.55.1",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"typescript": "^6.0.2",
"vitest": "^4.1.0",
"vitest-browser-react": "^2.2.0"
},
"peerDependencies": {
"@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
},
"publishConfig": {
"access": "public",
"provenance": true
},
"files": [
"dist/**/*",
"src/**/*",
"!**/*.spec.ts",
"!**/*.spec.tsx"
],
"repository": {
"type": "git",
"url": "git+https://github.com/wojtekmaj/react-daterange-picker.git",
"directory": "packages/react-daterange-picker"
},
"funding": "https://github.com/wojtekmaj/react-daterange-picker?sponsor=1"
}
================================================
FILE: packages/react-daterange-picker/src/DateRangePicker.css
================================================
.react-daterange-picker {
display: inline-flex;
position: relative;
}
.react-daterange-picker,
.react-daterange-picker *,
.react-daterange-picker *:before,
.react-daterange-picker *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.react-daterange-picker--disabled {
background-color: #f0f0f0;
color: #6d6d6d;
}
.react-daterange-picker__wrapper {
display: flex;
flex-grow: 1;
flex-shrink: 0;
align-items: center;
border: thin solid gray;
}
.react-daterange-picker__inputGroup {
min-width: calc((4px * 3) + 0.54em * 8 + 0.217em * 2);
height: 100%;
flex-grow: 1;
padding: 0 2px;
box-sizing: content-box;
}
.react-daterange-picker__inputGroup__divider {
padding: 1px 0;
white-space: pre;
}
.react-daterange-picker__inputGroup__divider,
.react-daterange-picker__inputGroup__leadingZero {
display: inline-block;
font: inherit;
}
.react-daterange-picker__inputGroup__input {
min-width: 0.54em;
height: 100%;
position: relative;
padding: 0 1px;
border: 0;
background: none;
color: currentColor;
font: inherit;
box-sizing: content-box;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.react-daterange-picker__inputGroup__input::-webkit-outer-spin-button,
.react-daterange-picker__inputGroup__input::-webkit-inner-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
.react-daterange-picker__inputGroup__input:invalid {
background: rgba(255, 0, 0, 0.1);
}
.react-daterange-picker__inputGroup__input--hasLeadingZero {
margin-left: -0.54em;
padding-left: calc(1px + 0.54em);
}
.react-daterange-picker__button {
border: 0;
background: transparent;
padding: 4px 6px;
}
.react-daterange-picker__button:enabled {
cursor: pointer;
}
.react-daterange-picker__button:enabled:hover .react-daterange-picker__button__icon,
.react-daterange-picker__button:enabled:focus .react-daterange-picker__button__icon {
stroke: #0078d7;
}
.react-daterange-picker__button:disabled .react-daterange-picker__button__icon {
stroke: #6d6d6d;
}
.react-daterange-picker__button svg {
display: inherit;
}
.react-daterange-picker__calendar {
width: 350px;
max-width: 100vw;
z-index: 1;
}
.react-daterange-picker__calendar--closed {
display: none;
}
.react-daterange-picker__calendar .react-calendar {
border-width: thin;
}
================================================
FILE: packages/react-daterange-picker/src/DateRangePicker.spec.tsx
================================================
import { describe, expect, it, vi } from 'vitest';
import { page, userEvent } from 'vitest/browser';
import { render } from 'vitest-browser-react';
import { act } from 'react';
import DateRangePicker from './DateRangePicker.js';
import type { Locator } from 'vitest/browser';
async function waitForElementToBeRemovedOrHidden(callback: () => HTMLElement | null) {
const element = callback();
if (element) {
await vi.waitFor(() =>
expect(element).toHaveAttribute('class', expect.stringContaining('--closed')),
);
}
}
describe('DateRangePicker', () => {
const defaultProps = {
dayAriaLabel: 'day',
monthAriaLabel: 'month',
yearAriaLabel: 'year',
};
it('passes default name to DateInput components', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} />);
const nativeInputs = container.querySelectorAll('input[type="date"]');
expect(nativeInputs[0]).toHaveAttribute('name', 'daterange_from');
expect(nativeInputs[1]).toHaveAttribute('name', 'daterange_to');
});
it('passes custom name to DateInput components', async () => {
const name = 'testName';
const { container } = await render(<DateRangePicker {...defaultProps} name={name} />);
const nativeInputs = container.querySelectorAll('input[type="date"]');
expect(nativeInputs[0]).toHaveAttribute('name', `${name}_from`);
expect(nativeInputs[1]).toHaveAttribute('name', `${name}_to`);
});
it('passes autoFocus flag to first DateInput component', async () => {
await render(<DateRangePicker {...defaultProps} autoFocus />);
const customInputs = page.getByRole('spinbutton');
expect(customInputs.nth(0)).toHaveFocus();
});
it('passes disabled flag to DateInput components', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} disabled />);
const nativeInputs = container.querySelectorAll('input[type="date"]');
expect(nativeInputs[0]).toBeDisabled();
expect(nativeInputs[1]).toBeDisabled();
});
it('passes format to DateInput components', async () => {
await render(<DateRangePicker {...defaultProps} format="yyyy" />);
const customInputs = page.getByRole('spinbutton');
expect(customInputs).toHaveLength(2);
expect(customInputs.nth(0)).toHaveAttribute('name', 'year');
expect(customInputs.nth(1)).toHaveAttribute('name', 'year');
});
it('passes aria-label props to DateInput components', async () => {
const ariaLabelProps = {
calendarAriaLabel: 'Toggle calendar',
clearAriaLabel: 'Clear value',
dayAriaLabel: 'Day',
monthAriaLabel: 'Month',
nativeInputAriaLabel: 'Date',
yearAriaLabel: 'Year',
};
const { container } = await render(<DateRangePicker {...ariaLabelProps} />);
const calendarButton = page.getByTestId('calendar-button');
const clearButton = page.getByTestId('clear-button');
const dateInputs = container.querySelectorAll(
'.react-daterange-picker__inputGroup',
) as unknown as [HTMLDivElement, HTMLDivElement];
const [dateFromInput, dateToInput] = dateInputs;
const nativeFromInput = dateFromInput.querySelector('input[type="date"]');
const dayFromInput = dateFromInput.querySelector('input[name="day"]');
const monthFromInput = dateFromInput.querySelector('input[name="month"]');
const yearFromInput = dateFromInput.querySelector('input[name="year"]');
const nativeToInput = dateToInput.querySelector('input[type="date"]');
const dayToInput = dateToInput.querySelector('input[name="day"]');
const monthToInput = dateToInput.querySelector('input[name="month"]');
const yearToInput = dateToInput.querySelector('input[name="year"]');
expect(calendarButton).toHaveAttribute('aria-label', ariaLabelProps.calendarAriaLabel);
expect(clearButton).toHaveAttribute('aria-label', ariaLabelProps.clearAriaLabel);
expect(nativeFromInput).toHaveAttribute('aria-label', ariaLabelProps.nativeInputAriaLabel);
expect(dayFromInput).toHaveAttribute('aria-label', ariaLabelProps.dayAriaLabel);
expect(monthFromInput).toHaveAttribute('aria-label', ariaLabelProps.monthAriaLabel);
expect(yearFromInput).toHaveAttribute('aria-label', ariaLabelProps.yearAriaLabel);
expect(nativeToInput).toHaveAttribute('aria-label', ariaLabelProps.nativeInputAriaLabel);
expect(dayToInput).toHaveAttribute('aria-label', ariaLabelProps.dayAriaLabel);
expect(monthToInput).toHaveAttribute('aria-label', ariaLabelProps.monthAriaLabel);
expect(yearToInput).toHaveAttribute('aria-label', ariaLabelProps.yearAriaLabel);
});
it('passes placeholder props to DateInput components', async () => {
const placeholderProps = {
dayPlaceholder: 'dd',
monthPlaceholder: 'mm',
yearPlaceholder: 'yyyy',
};
const { container } = await render(<DateRangePicker {...defaultProps} {...placeholderProps} />);
const dateInputs = container.querySelectorAll(
'.react-daterange-picker__inputGroup',
) as unknown as [HTMLDivElement, HTMLDivElement];
const [dateFromInput, dateToInput] = dateInputs;
const dayFromInput = dateFromInput.querySelector('input[name="day"]');
const monthFromInput = dateFromInput.querySelector('input[name="month"]');
const yearFromInput = dateFromInput.querySelector('input[name="year"]');
const dayToInput = dateToInput.querySelector('input[name="day"]');
const monthToInput = dateToInput.querySelector('input[name="month"]');
const yearToInput = dateToInput.querySelector('input[name="year"]');
expect(dayFromInput).toHaveAttribute('placeholder', placeholderProps.dayPlaceholder);
expect(monthFromInput).toHaveAttribute('placeholder', placeholderProps.monthPlaceholder);
expect(yearFromInput).toHaveAttribute('placeholder', placeholderProps.yearPlaceholder);
expect(dayToInput).toHaveAttribute('placeholder', placeholderProps.dayPlaceholder);
expect(monthToInput).toHaveAttribute('placeholder', placeholderProps.monthPlaceholder);
expect(yearToInput).toHaveAttribute('placeholder', placeholderProps.yearPlaceholder);
});
describe('passes value to DateInput components', () => {
it('passes single value to DateInput components', async () => {
const value = new Date(2019, 0, 1);
const { container } = await render(<DateRangePicker {...defaultProps} value={value} />);
const nativeInputs = container.querySelectorAll('input[type="date"]');
expect(nativeInputs[0]).toHaveValue('2019-01-01');
expect(nativeInputs[1]).toHaveValue('');
});
it('passes the first item of an array of values to DateInput components', async () => {
const value1 = new Date(2019, 0, 1);
const value2 = new Date(2019, 6, 1);
const { container } = await render(
<DateRangePicker {...defaultProps} value={[value1, value2]} />,
);
const nativeInputs = container.querySelectorAll('input[type="date"]');
expect(nativeInputs[0]).toHaveValue('2019-01-01');
expect(nativeInputs[1]).toHaveValue('2019-07-01');
});
});
it('applies className to its wrapper when given a string', async () => {
const className = 'testClassName';
const { container } = await render(<DateRangePicker {...defaultProps} className={className} />);
const wrapper = container.firstElementChild;
expect(wrapper).toHaveClass(className);
});
it('applies "--open" className to its wrapper when given isOpen flag', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} isOpen />);
const wrapper = container.firstElementChild;
expect(wrapper).toHaveClass('react-daterange-picker--open');
});
it('applies calendarClassName to the calendar when given a string', async () => {
const calendarClassName = 'testClassName';
const { container } = await render(
<DateRangePicker {...defaultProps} calendarProps={{ className: calendarClassName }} isOpen />,
);
const calendar = container.querySelector('.react-calendar');
expect(calendar).toHaveClass(calendarClassName);
});
it('renders DateInput components', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} />);
const nativeInputs = container.querySelectorAll('input[type="date"]');
expect(nativeInputs.length).toBe(2);
});
it('renders range divider with default divider', async () => {
await render(<DateRangePicker {...defaultProps} />);
const rangeDivider = page.getByTestId('range-divider');
expect(rangeDivider).toBeInTheDocument();
expect(rangeDivider).toHaveTextContent('–');
});
it('renders range divider with custom divider', async () => {
await render(<DateRangePicker {...defaultProps} rangeDivider="to" />);
const rangeDivider = page.getByTestId('range-divider');
expect(rangeDivider).toBeInTheDocument();
expect(rangeDivider).toHaveTextContent('to');
});
describe('renders clear button properly', () => {
it('renders clear button', async () => {
await render(<DateRangePicker {...defaultProps} />);
const clearButton = page.getByTestId('clear-button');
expect(clearButton).toBeInTheDocument();
});
it('renders clear icon by default when clearIcon is not given', async () => {
await render(<DateRangePicker {...defaultProps} />);
const clearButton = page.getByTestId('clear-button');
const clearIcon = clearButton.element().querySelector('svg');
expect(clearIcon).toBeInTheDocument();
});
it('renders clear icon when given clearIcon as a string', async () => {
await render(<DateRangePicker {...defaultProps} clearIcon="❌" />);
const clearButton = page.getByTestId('clear-button');
expect(clearButton).toHaveTextContent('❌');
});
it('renders clear icon when given clearIcon as a React element', async () => {
function ClearIcon() {
return <>❌</>;
}
await render(<DateRangePicker {...defaultProps} clearIcon={<ClearIcon />} />);
const clearButton = page.getByTestId('clear-button');
expect(clearButton).toHaveTextContent('❌');
});
it('renders clear icon when given clearIcon as a function', async () => {
function ClearIcon() {
return <>❌</>;
}
await render(<DateRangePicker {...defaultProps} clearIcon={ClearIcon} />);
const clearButton = page.getByTestId('clear-button');
expect(clearButton).toHaveTextContent('❌');
});
});
describe('renders calendar button properly', () => {
it('renders calendar button', async () => {
await render(<DateRangePicker {...defaultProps} />);
const calendarButton = page.getByTestId('calendar-button');
expect(calendarButton).toBeInTheDocument();
});
it('renders calendar icon by default when calendarIcon is not given', async () => {
await render(<DateRangePicker {...defaultProps} />);
const calendarButton = page.getByTestId('calendar-button');
const calendarIcon = calendarButton.element().querySelector('svg');
expect(calendarIcon).toBeInTheDocument();
});
it('renders calendar icon when given calendarIcon as a string', async () => {
await render(<DateRangePicker {...defaultProps} calendarIcon="📅" />);
const calendarButton = page.getByTestId('calendar-button');
expect(calendarButton).toHaveTextContent('📅');
});
it('renders calendar icon when given calendarIcon as a React element', async () => {
function CalendarIcon() {
return <>📅</>;
}
await render(<DateRangePicker {...defaultProps} calendarIcon={<CalendarIcon />} />);
const calendarButton = page.getByTestId('calendar-button');
expect(calendarButton).toHaveTextContent('📅');
});
it('renders calendar icon when given calendarIcon as a function', async () => {
function CalendarIcon() {
return <>📅</>;
}
await render(<DateRangePicker {...defaultProps} calendarIcon={CalendarIcon} />);
const calendarButton = page.getByTestId('calendar-button');
expect(calendarButton).toHaveTextContent('📅');
});
});
it('renders Calendar component when given isOpen flag', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} isOpen />);
const calendar = container.querySelector('.react-calendar');
expect(calendar).toBeInTheDocument();
});
it('does not render Calendar component when given disableCalendar & isOpen flags', async () => {
const { container } = await render(
<DateRangePicker {...defaultProps} disableCalendar isOpen />,
);
const calendar = container.querySelector('.react-calendar');
expect(calendar).not.toBeInTheDocument();
});
it('opens Calendar component when given isOpen flag by changing props', async () => {
const { container, rerender } = await render(<DateRangePicker {...defaultProps} />);
const calendar = container.querySelector('.react-calendar');
expect(calendar).not.toBeInTheDocument();
await rerender(<DateRangePicker {...defaultProps} isOpen />);
const calendar2 = container.querySelector('.react-calendar');
expect(calendar2).toBeInTheDocument();
});
it('opens Calendar component when clicking on a button', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} />);
const calendar = container.querySelector('.react-calendar');
expect(calendar).not.toBeInTheDocument();
const button = page.getByTestId('calendar-button');
await userEvent.click(button);
const calendar2 = container.querySelector('.react-calendar');
expect(calendar2).toBeInTheDocument();
});
function triggerFocusInEvent(locator: Locator) {
const element = locator.element();
element.dispatchEvent(
new FocusEvent('focusin', { bubbles: true, cancelable: false, composed: true }),
);
}
function triggerFocusEvent(locator: Locator) {
triggerFocusInEvent(locator);
const element = locator.element();
element.dispatchEvent(
new FocusEvent('focus', { bubbles: false, cancelable: false, composed: true }),
);
}
describe('handles opening Calendar component when focusing on an input inside properly', () => {
it('opens Calendar component when focusing on an input inside by default', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} />);
const calendar = container.querySelector('.react-calendar');
expect(calendar).not.toBeInTheDocument();
const input = page.getByRole('spinbutton', { name: 'day' }).first();
act(() => {
triggerFocusEvent(input);
});
const calendar2 = container.querySelector('.react-calendar');
expect(calendar2).toBeInTheDocument();
});
it('opens Calendar component when focusing on an input inside given openCalendarOnFocus = true', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} openCalendarOnFocus />);
const calendar = container.querySelector('.react-calendar');
const input = page.getByRole('spinbutton', { name: 'day' }).first();
expect(calendar).not.toBeInTheDocument();
act(() => {
triggerFocusEvent(input);
});
const calendar2 = container.querySelector('.react-calendar');
expect(calendar2).toBeInTheDocument();
});
it('does not open Calendar component when focusing on an input inside given openCalendarOnFocus = false', async () => {
const { container } = await render(
<DateRangePicker {...defaultProps} openCalendarOnFocus={false} />,
);
const calendar = container.querySelector('.react-calendar');
const input = page.getByRole('spinbutton', { name: 'day' }).first();
expect(calendar).not.toBeInTheDocument();
act(() => {
triggerFocusEvent(input);
});
const calendar2 = container.querySelector('.react-calendar');
expect(calendar2).toBeFalsy();
});
it('does not open Calendar when focusing on an input inside given shouldOpenCalendar function returning false', async () => {
const shouldOpenCalendar = () => false;
const { container } = await render(
<DateRangePicker {...defaultProps} shouldOpenCalendar={shouldOpenCalendar} />,
);
const calendar = container.querySelector('.react-calendar');
const input = page.getByRole('spinbutton', { name: 'day' }).first();
expect(calendar).not.toBeInTheDocument();
triggerFocusEvent(input);
const calendar2 = container.querySelector('.react-calendar');
expect(calendar2).toBeFalsy();
});
it('does not open Calendar component when focusing on a select element', async () => {
const { container } = await render(
<DateRangePicker {...defaultProps} format="dd.MMMM.yyyy" />,
);
const calendar = container.querySelector('.react-calendar');
const select = page.getByRole('combobox', { name: 'month' }).first();
expect(calendar).not.toBeInTheDocument();
triggerFocusEvent(select);
const calendar2 = container.querySelector('.react-calendar');
expect(calendar2).toBeFalsy();
});
});
it('closes Calendar component when clicked outside', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} isOpen />);
await userEvent.click(document.body);
await waitForElementToBeRemovedOrHidden(() =>
container.querySelector('.react-daterange-picker__calendar'),
);
});
it('closes Calendar component when focused outside', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} isOpen />);
triggerFocusInEvent(page.elementLocator(document.body));
await waitForElementToBeRemovedOrHidden(() =>
container.querySelector('.react-daterange-picker__calendar'),
);
});
function triggerTouchStart(element: HTMLElement) {
element.dispatchEvent(new TouchEvent('touchstart', { bubbles: true, cancelable: true }));
}
it('closes Calendar component when tapped outside', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} isOpen />);
triggerTouchStart(document.body);
await waitForElementToBeRemovedOrHidden(() =>
container.querySelector('.react-daterange-picker__calendar'),
);
});
function triggerFocusOutEvent(locator: Locator) {
const element = locator.element();
element.dispatchEvent(
new FocusEvent('focusout', { bubbles: true, cancelable: false, composed: true }),
);
}
function triggerBlurEvent(locator: Locator) {
triggerFocusOutEvent(locator);
const element = locator.element();
element.dispatchEvent(
new FocusEvent('blur', { bubbles: false, cancelable: false, composed: true }),
);
}
it('does not close Calendar component when focused inside', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} isOpen />);
const monthInput = page.getByRole('spinbutton', { name: 'month' }).first();
const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();
triggerBlurEvent(monthInput);
triggerFocusEvent(dayInput);
const calendar = container.querySelector('.react-calendar');
expect(calendar).toBeInTheDocument();
});
it('closes Calendar when changing value by default', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} isOpen />);
const [firstTile, secondTile] = container.querySelectorAll(
'.react-calendar__tile',
) as unknown as [HTMLButtonElement, HTMLButtonElement];
await act(async () => {
await userEvent.click(firstTile);
});
await act(async () => {
await userEvent.click(secondTile);
});
await waitForElementToBeRemovedOrHidden(() =>
container.querySelector('.react-daterange-picker__calendar'),
);
});
it('closes Calendar when changing value with prop closeCalendar = true', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} closeCalendar isOpen />);
const [firstTile, secondTile] = container.querySelectorAll(
'.react-calendar__tile',
) as unknown as [HTMLButtonElement, HTMLButtonElement];
await act(async () => {
await userEvent.click(firstTile);
});
await act(async () => {
await userEvent.click(secondTile);
});
await waitForElementToBeRemovedOrHidden(() =>
container.querySelector('.react-daterange-picker__calendar'),
);
});
it('does not close Calendar when changing value with prop closeCalendar = false', async () => {
const { container } = await render(
<DateRangePicker {...defaultProps} closeCalendar={false} isOpen />,
);
const [firstTile, secondTile] = container.querySelectorAll(
'.react-calendar__tile',
) as unknown as [HTMLButtonElement, HTMLButtonElement];
await act(async () => {
await userEvent.click(firstTile);
});
await act(async () => {
await userEvent.click(secondTile);
});
const calendar = container.querySelector('.react-calendar');
expect(calendar).toBeInTheDocument();
});
it('does not close Calendar when changing value with shouldCloseCalendar function returning false', async () => {
const shouldCloseCalendar = () => false;
const { container } = await render(
<DateRangePicker {...defaultProps} isOpen shouldCloseCalendar={shouldCloseCalendar} />,
);
const firstTile = container.querySelector('.react-calendar__tile') as HTMLButtonElement;
await act(async () => {
await userEvent.click(firstTile);
});
const calendar = container.querySelector('.react-calendar');
expect(calendar).toBeInTheDocument();
});
it('does not close Calendar when changing value using inputs', async () => {
const { container } = await render(<DateRangePicker {...defaultProps} isOpen />);
const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();
await act(async () => {
await userEvent.fill(dayInput, '1');
});
const calendar = container.querySelector('.react-calendar');
expect(calendar).toBeInTheDocument();
});
it('calls onChange callback when changing value', async () => {
const value = new Date(2023, 0, 31);
const onChange = vi.fn();
await render(<DateRangePicker {...defaultProps} onChange={onChange} value={value} />);
const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();
await act(async () => {
await userEvent.fill(dayInput, '1');
});
expect(onChange).toHaveBeenCalledWith([new Date(2023, 0, 1), null]);
});
it('calls onInvalidChange callback when changing value to an invalid one', async () => {
const value = new Date(2023, 0, 31);
const onInvalidChange = vi.fn();
await render(
<DateRangePicker {...defaultProps} onInvalidChange={onInvalidChange} value={value} />,
);
const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();
await act(async () => {
await userEvent.fill(dayInput, '32');
});
expect(onInvalidChange).toHaveBeenCalled();
});
it('clears the value when clicking on a button', async () => {
const onChange = vi.fn();
const { container } = await render(<DateRangePicker {...defaultProps} onChange={onChange} />);
const calendar = container.querySelector('.react-calendar');
const button = page.getByTestId('clear-button');
expect(calendar).not.toBeInTheDocument();
await userEvent.click(button);
expect(onChange).toHaveBeenCalledWith(null);
});
describe('onChangeFrom', () => {
it('calls onChange properly given no initial value', async () => {
const onChange = vi.fn();
await render(
<DateRangePicker {...defaultProps} onChange={onChange} openCalendarOnFocus={false} />,
);
const nextValueFrom = new Date(2018, 1, 15);
const monthInput = page.getByRole('spinbutton', { name: 'month' }).first();
const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();
const yearInput = page.getByRole('spinbutton', { name: 'year' }).first();
await act(async () => {
await userEvent.fill(monthInput, '2');
await userEvent.fill(dayInput, '15');
await userEvent.fill(yearInput, '2018');
});
await vi.waitFor(() => expect(onChange).toHaveBeenCalledWith([nextValueFrom, null]));
});
it('calls onChange properly given single initial value', async () => {
const onChange = vi.fn();
const value = new Date(2018, 0, 1);
await render(<DateRangePicker {...defaultProps} onChange={onChange} value={value} />);
const nextValueFrom = new Date(2018, 1, 15);
const monthInput = page.getByRole('spinbutton', { name: 'month' }).first();
const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();
const yearInput = page.getByRole('spinbutton', { name: 'year' }).first();
await act(async () => {
await userEvent.fill(monthInput, '2');
await userEvent.fill(dayInput, '15');
await userEvent.fill(yearInput, '2018');
});
expect(onChange).toHaveBeenCalled();
expect(onChange).toHaveBeenCalledWith([nextValueFrom, null]);
});
it('calls onChange properly given initial value as an array', async () => {
const onChange = vi.fn();
const valueFrom = new Date(2018, 0, 1);
const valueTo = new Date(2018, 6, 1);
const value = [valueFrom, valueTo] as [Date, Date];
await render(<DateRangePicker {...defaultProps} onChange={onChange} value={value} />);
const nextValueFrom = new Date(2018, 1, 15);
const monthInput = page.getByRole('spinbutton', { name: 'month' }).first();
const dayInput = page.getByRole('spinbutton', { name: 'day' }).first();
const yearInput = page.getByRole('spinbutton', { name: 'year' }).first();
await act(async () => {
await userEvent.fill(monthInput, '2');
await userEvent.fill(dayInput, '15');
await userEvent.fill(yearInput, '2018');
});
expect(onChange).toHaveBeenCalled();
expect(onChange).toHaveBeenCalledWith([nextValueFrom, valueTo]);
});
});
describe('onChangeTo', () => {
it('calls onChange properly given no initial value', async () => {
const onChange = vi.fn();
await render(
<DateRangePicker {...defaultProps} onChange={onChange} openCalendarOnFocus={false} />,
);
const nextValueTo = new Date(2018, 1, 15);
nextValueTo.setDate(nextValueTo.getDate() + 1);
nextValueTo.setTime(nextValueTo.getTime() - 1);
const monthInput = page.getByRole('spinbutton', { name: 'month' }).nth(1);
const dayInput = page.getByRole('spinbutton', { name: 'day' }).nth(1);
const yearInput = page.getByRole('spinbutton', { name: 'year' }).nth(1);
await act(async () => {
await userEvent.fill(dayInput, '15');
await userEvent.fill(monthInput, '2');
await userEvent.fill(yearInput, '2018');
});
await vi.waitFor(() => expect(onChange).toHaveBeenCalledWith([null, nextValueTo]));
});
it('calls onChange properly given single initial value', async () => {
const onChange = vi.fn();
const value = new Date(2018, 0, 1);
await render(
<DateRangePicker
{...defaultProps}
onChange={onChange}
openCalendarOnFocus={false}
value={value}
/>,
);
const nextValueTo = new Date(2018, 1, 15);
nextValueTo.setDate(nextValueTo.getDate() + 1);
nextValueTo.setTime(nextValueTo.getTime() - 1);
const monthInput = page.getByRole('spinbutton', { name: 'month' }).nth(1);
const dayInput = page.getByRole('spinbutton', { name: 'day' }).nth(1);
const yearInput = page.getByRole('spinbutton', { name: 'year' }).nth(1);
await act(async () => {
await userEvent.fill(dayInput, '15');
await userEvent.fill(monthInput, '2');
await userEvent.fill(yearInput, '2018');
});
await vi.waitFor(() => expect(onChange).toHaveBeenCalledWith([value, nextValueTo]));
});
it('calls onChange properly given initial value as an array', async () => {
const onChange = vi.fn();
const valueFrom = new Date(2018, 0, 1);
const valueTo = new Date(2018, 6, 1);
const value = [valueFrom, valueTo] as [Date, Date];
await render(<DateRangePicker {...defaultProps} onChange={onChange} value={value} />);
const nextValueTo = new Date(2018, 1, 15);
nextValueTo.setDate(nextValueTo.getDate() + 1);
nextValueTo.setTime(nextValueTo.getTime() - 1);
const monthInput = page.getByRole('spinbutton', { name: 'month' }).nth(1);
const dayInput = page.getByRole('spinbutton', { name: 'day' }).nth(1);
const yearInput = page.getByRole('spinbutton', { name: 'year' }).nth(1);
await act(async () => {
await userEvent.fill(dayInput, '15');
await userEvent.fill(monthInput, '2');
await userEvent.fill(yearInput, '2018');
});
expect(onChange).toHaveBeenCalled();
expect(onChange).toHaveBeenCalledWith([valueFrom, nextValueTo]);
});
});
it('calls onClick callback when clicked a page (sample of mouse events family)', async () => {
const onClick = vi.fn();
const { container } = await render(<DateRangePicker {...defaultProps} onClick={onClick} />);
const wrapper = container.firstElementChild as HTMLDivElement;
await userEvent.click(wrapper);
expect(onClick).toHaveBeenCalled();
});
it('calls onTouchStart callback when touched a page (sample of touch events family)', async () => {
const onTouchStart = vi.fn();
const { container } = await render(
<DateRangePicker {...defaultProps} onTouchStart={onTouchStart} />,
);
const wrapper = container.firstElementChild as HTMLDivElement;
triggerTouchStart(wrapper);
expect(onTouchStart).toHaveBeenCalled();
});
});
================================================
FILE: packages/react-daterange-picker/src/DateRangePicker.tsx
================================================
'use client';
import { createElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import clsx from 'clsx';
import makeEventProps from 'make-event-props';
import Calendar from 'react-calendar';
import DateInput from 'react-date-picker/dist/DateInput';
import Fit from 'react-fit';
import type {
ClassName,
CloseReason,
Detail,
LooseValue,
OpenReason,
Value,
} from './shared/types.js';
const baseClassName = 'react-daterange-picker';
const outsideActionEvents = ['mousedown', 'focusin', 'touchstart'] as const;
const iconProps = {
xmlns: 'http://www.w3.org/2000/svg',
width: 19,
height: 19,
viewBox: '0 0 19 19',
stroke: 'black',
strokeWidth: 2,
};
const CalendarIcon = (
<svg
{...iconProps}
aria-hidden="true"
className={`${baseClassName}__calendar-button__icon ${baseClassName}__button__icon`}
>
<rect fill="none" height="15" width="15" x="2" y="2" />
<line x1="6" x2="6" y1="0" y2="4" />
<line x1="13" x2="13" y1="0" y2="4" />
</svg>
);
const ClearIcon = (
<svg
{...iconProps}
aria-hidden="true"
className={`${baseClassName}__clear-button__icon ${baseClassName}__button__icon`}
>
<line x1="4" x2="15" y1="4" y2="15" />
<line x1="15" x2="4" y1="4" y2="15" />
</svg>
);
type ReactNodeLike = React.ReactNode | string | number | boolean | null | undefined;
type Icon = ReactNodeLike | ReactNodeLike[];
type IconOrRenderFunction = Icon | React.ComponentType | React.ReactElement;
type CalendarProps = Omit<
React.ComponentPropsWithoutRef<typeof Calendar>,
'onChange' | 'selectRange' | 'value'
>;
type EventProps = ReturnType<typeof makeEventProps>;
export type DateRangePickerProps = {
/**
* Automatically focuses the input on mount.
*
* @example true
*/
autoFocus?: boolean;
/**
* `aria-label` for the calendar button.
*
* @example 'Toggle calendar'
*/
calendarAriaLabel?: string;
/**
* Content of the calendar button. Setting the value explicitly to `null` will hide the icon.
*
* @example 'Calendar'
* @example <CalendarIcon />
* @example CalendarIcon
*/
calendarIcon?: IconOrRenderFunction | null;
/**
* Props to pass to React-Calendar component.
*/
calendarProps?: CalendarProps;
/**
* Class name(s) that will be added along with `"react-daterange-picker"` to the main React-DateRange-Picker `<div>` element.
*
* @example 'class1 class2'
* @example ['class1', 'class2 class3']
*/
className?: ClassName;
/**
* `aria-label` for the clear button.
*
* @example 'Clear value'
*/
clearAriaLabel?: string;
/**
* Content of the clear button. Setting the value explicitly to `null` will hide the icon.
*
* @example 'Clear'
* @example <ClearIcon />
* @example ClearIcon
*/
clearIcon?: IconOrRenderFunction | null;
/**
* Whether to close the calendar on value selection.
*
* **Note**: It's recommended to use `shouldCloseCalendar` function instead.
*
* @default true
* @example false
*/
closeCalendar?: boolean;
/**
* `data-testid` attribute for the main React-DateRange-Picker `<div>` element.
*
* @example 'daterange-picker'
*/
'data-testid'?: string;
/**
* `aria-label` for the day input.
*
* @example 'Day'
*/
dayAriaLabel?: string;
/**
* `placeholder` for the day input.
*
* @default '--'
* @example 'dd'
*/
dayPlaceholder?: string;
/**
* When set to `true`, will remove the calendar and the button toggling its visibility.
*
* @default false
* @example true
*/
disableCalendar?: boolean;
/**
* Whether the date range picker should be disabled.
*
* @default false
* @example true
*/
disabled?: boolean;
/**
* 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`.
*
* **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client.
*
* @example 'y-MM-dd'
*/
format?: string;
/**
* `id` attribute for the main React-DateRange-Picker `<div>` element.
*
* @example 'daterange-picker'
*/
id?: string;
/**
* Whether the calendar should be opened.
*
* @default false
* @example true
*/
isOpen?: boolean;
/**
* Locale that should be used by the date range picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).
*
* **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client.
*
* @example 'hu-HU'
*/
locale?: string;
/**
* Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateRange-Picker will ensure that no later date is selected.
*
* @example new Date()
*/
maxDate?: Date;
/**
* 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
*
* @default 'month'
* @example 'year'
*/
maxDetail?: Detail;
/**
* Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateRange-Picker will ensure that no earlier date is selected.
*
* @example new Date()
*/
minDate?: Date;
/**
* `aria-label` for the month input.
*
* @example 'Month'
*/
monthAriaLabel?: string;
/**
* `placeholder` for the month input.
*
* @default '--'
* @example 'mm'
*/
monthPlaceholder?: string;
/**
* Input name.
*
* @default 'daterange'
*/
name?: string;
/**
* `aria-label` for the native date input.
*
* @example 'Date'
*/
nativeInputAriaLabel?: string;
/**
* Function called when the calendar closes.
*
* @example () => alert('Calendar closed')
*/
onCalendarClose?: () => void;
/**
* Function called when the calendar opens.
*
* @example () => alert('Calendar opened')
*/
onCalendarOpen?: () => void;
/**
* 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".
*
* @example (value) => alert('New date is: ', value)
*/
onChange?: (value: Value) => void;
/**
* Function called when the user focuses an input.
*
* @example (event) => alert('Focused input: ', event.target.name)
*/
onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
/**
* Function called when the user picks an invalid date.
*
* @example () => alert('Invalid date')
*/
onInvalidChange?: () => void;
/**
* Whether to open the calendar on input focus. **Note**: It's recommended to use `shouldOpenCalendar` function instead.
*
* @default true
* @example false
*/
openCalendarOnFocus?: boolean;
/**
* Element to render the calendar in using portal.
*
* @example document.getElementById('my-div')
*/
portalContainer?: HTMLElement | null;
/**
* Divider between date inputs.
*
* @default '–'
* @example ' to '
*/
rangeDivider?: React.ReactNode;
/**
* Whether date input should be required.
*
* @default false
* @example true
*/
required?: boolean;
/**
* Function called before the calendar closes. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. If it returns `false`, the calendar will not close.
*
* @example ({ reason }) => reason !== 'outsideAction'
*/
shouldCloseCalendar?: (props: { reason: CloseReason }) => boolean;
/**
* Function called before the calendar opens. `reason` can be `"buttonClick"` or `"focus"`. If it returns `false`, the calendar will not open.
*
* @example ({ reason }) => reason !== 'focus'
*/
shouldOpenCalendar?: (props: { reason: OpenReason }) => boolean;
/**
* Whether leading zeros should be rendered in date inputs.
*
* @default false
* @example true
*/
showLeadingZeros?: boolean;
/**
* Input value.
*
* @example new Date(2017, 0, 1)
* @example [new Date(2017, 0, 1), new Date(2017, 7, 1)]
* @example ['2017-01-01', '2017-08-01']
*/
value?: LooseValue;
/**
* `aria-label` for the year input.
*
* @example 'Year'
*/
yearAriaLabel?: string;
/**
* `placeholder` for the year input.
*
* @default '----'
* @example 'yyyy'
*/
yearPlaceholder?: string;
} & Omit<EventProps, 'onChange' | 'onFocus'>;
export default function DateRangePicker(props: DateRangePickerProps): React.ReactElement {
const {
autoFocus,
calendarAriaLabel,
calendarIcon = CalendarIcon,
className,
clearAriaLabel,
clearIcon = ClearIcon,
closeCalendar: shouldCloseCalendarOnSelect = true,
'data-testid': dataTestid,
dayAriaLabel,
dayPlaceholder,
disableCalendar,
disabled,
format,
id,
isOpen: isOpenProps = null,
locale,
maxDate,
maxDetail = 'month',
minDate,
monthAriaLabel,
monthPlaceholder,
name = 'daterange',
nativeInputAriaLabel,
onCalendarClose,
onCalendarOpen,
onChange: onChangeProps,
onFocus: onFocusProps,
onInvalidChange,
openCalendarOnFocus = true,
rangeDivider = '–',
required,
shouldCloseCalendar,
shouldOpenCalendar,
showLeadingZeros,
value,
yearAriaLabel,
yearPlaceholder,
...otherProps
} = props;
const [isOpen, setIsOpen] = useState(isOpenProps);
const wrapper = useRef<HTMLDivElement>(null);
const calendarWrapper = useRef<HTMLDivElement>(null);
useEffect(() => {
setIsOpen(isOpenProps);
}, [isOpenProps]);
function openCalendar({ reason }: { reason: OpenReason }) {
if (shouldOpenCalendar) {
if (!shouldOpenCalendar({ reason })) {
return;
}
}
setIsOpen(true);
if (onCalendarOpen) {
onCalendarOpen();
}
}
const closeCalendar = useCallback(
({ reason }: { reason: CloseReason }) => {
if (shouldCloseCalendar) {
if (!shouldCloseCalendar({ reason })) {
return;
}
}
setIsOpen(false);
if (onCalendarClose) {
onCalendarClose();
}
},
[onCalendarClose, shouldCloseCalendar],
);
function toggleCalendar() {
if (isOpen) {
closeCalendar({ reason: 'buttonClick' });
} else {
openCalendar({ reason: 'buttonClick' });
}
}
function onChange(value: Value, shouldCloseCalendar: boolean = shouldCloseCalendarOnSelect) {
if (shouldCloseCalendar) {
closeCalendar({ reason: 'select' });
}
if (onChangeProps) {
onChangeProps(value);
}
}
function onChangeFrom(nextValue: Value, closeCalendar: boolean) {
const [nextValueFrom] = Array.isArray(nextValue) ? nextValue : [nextValue];
const [, valueTo] = Array.isArray(value) ? value : [value];
const valueToDate = valueTo ? new Date(valueTo) : null;
onChange([nextValueFrom, valueToDate], closeCalendar);
}
function onChangeTo(nextValue: Value, closeCalendar: boolean) {
const [, nextValueTo] = Array.isArray(nextValue) ? nextValue : [null, nextValue];
const [valueFrom] = Array.isArray(value) ? value : [value];
const valueFromDate = valueFrom ? new Date(valueFrom) : null;
onChange([valueFromDate, nextValueTo], closeCalendar);
}
function onFocus(event: React.FocusEvent<HTMLInputElement>) {
if (onFocusProps) {
onFocusProps(event);
}
if (
// Internet Explorer still fires onFocus on disabled elements
disabled ||
isOpen ||
!openCalendarOnFocus ||
event.target.dataset.select === 'true'
) {
return;
}
openCalendar({ reason: 'focus' });
}
const onKeyDown = useCallback(
(event: KeyboardEvent) => {
if (event.key === 'Escape') {
closeCalendar({ reason: 'escape' });
}
},
[closeCalendar],
);
function clear() {
onChange(null);
}
function stopPropagation(event: React.FocusEvent) {
event.stopPropagation();
}
const onOutsideAction = useCallback(
(event: Event) => {
const { current: wrapperEl } = wrapper;
const { current: calendarWrapperEl } = calendarWrapper;
// Try event.composedPath first to handle clicks inside a Shadow DOM.
const target = (
'composedPath' in event ? event.composedPath()[0] : (event as Event).target
) as HTMLElement;
if (
target &&
wrapperEl &&
!wrapperEl.contains(target) &&
!calendarWrapperEl?.contains(target)
) {
closeCalendar({ reason: 'outsideAction' });
}
},
[closeCalendar],
);
const handleOutsideActionListeners = useCallback(
(shouldListen = isOpen) => {
for (const event of outsideActionEvents) {
if (shouldListen) {
document.addEventListener(event, onOutsideAction);
} else {
document.removeEventListener(event, onOutsideAction);
}
}
if (shouldListen) {
document.addEventListener('keydown', onKeyDown);
} else {
document.removeEventListener('keydown', onKeyDown);
}
},
[isOpen, onOutsideAction, onKeyDown],
);
// biome-ignore lint/correctness/useExhaustiveDependencies: useEffect intentionally triggered on isOpen change
useEffect(() => {
handleOutsideActionListeners();
return () => {
handleOutsideActionListeners(false);
};
}, [handleOutsideActionListeners, isOpen]);
function renderInputs() {
const [valueFrom, valueTo] = Array.isArray(value) ? value : [value];
const ariaLabelProps = {
dayAriaLabel,
monthAriaLabel,
nativeInputAriaLabel,
yearAriaLabel,
};
const placeholderProps = {
dayPlaceholder,
monthPlaceholder,
yearPlaceholder,
};
const commonProps = {
...ariaLabelProps,
...placeholderProps,
className: `${baseClassName}__inputGroup`,
disabled,
format,
isCalendarOpen: isOpen,
locale,
maxDate,
maxDetail,
minDate,
onInvalidChange,
required,
showLeadingZeros,
};
return (
<div className={`${baseClassName}__wrapper`}>
<DateInput
{...commonProps}
autoFocus={autoFocus}
name={`${name}_from`}
onChange={onChangeFrom}
returnValue="start"
value={valueFrom}
/>
<span className={`${baseClassName}__range-divider`} data-testid="range-divider">
{rangeDivider}
</span>
<DateInput
{...commonProps}
name={`${name}_to`}
onChange={onChangeTo}
returnValue="end"
value={valueTo}
/>
{clearIcon !== null && (
<button
aria-label={clearAriaLabel}
className={`${baseClassName}__clear-button ${baseClassName}__button`}
data-testid="clear-button"
disabled={disabled}
onClick={clear}
onFocus={stopPropagation}
type="button"
>
{typeof clearIcon === 'function' ? createElement(clearIcon) : clearIcon}
</button>
)}
{calendarIcon !== null && !disableCalendar && (
<button
aria-expanded={isOpen || false}
aria-label={calendarAriaLabel}
className={`${baseClassName}__calendar-button ${baseClassName}__button`}
data-testid="calendar-button"
disabled={disabled}
onClick={toggleCalendar}
onFocus={stopPropagation}
type="button"
>
{typeof calendarIcon === 'function' ? createElement(calendarIcon) : calendarIcon}
</button>
)}
</div>
);
}
function renderCalendar() {
if (isOpen === null || disableCalendar) {
return null;
}
const { calendarProps, portalContainer, value } = props;
const className = `${baseClassName}__calendar`;
const classNames = clsx(className, `${className}--${isOpen ? 'open' : 'closed'}`);
const calendar = (
<Calendar
locale={locale}
maxDate={maxDate}
maxDetail={maxDetail}
minDate={minDate}
onChange={(value) => onChange(value)}
selectRange
value={value}
{...calendarProps}
/>
);
return portalContainer ? (
createPortal(
<div ref={calendarWrapper} className={classNames}>
{calendar}
</div>,
portalContainer,
)
) : (
<Fit>
<div
ref={(ref) => {
if (ref && !isOpen) {
ref.removeAttribute('style');
}
}}
className={classNames}
>
{calendar}
</div>
</Fit>
);
}
const eventProps = useMemo(
() => makeEventProps(otherProps),
// biome-ignore lint/correctness/useExhaustiveDependencies: FIXME
[otherProps],
);
return (
// biome-ignore lint/a11y/noStaticElementInteractions: False positive caused by non interactive wrapper listening for bubbling events
<div
className={clsx(
baseClassName,
`${baseClassName}--${isOpen ? 'open' : 'closed'}`,
`${baseClassName}--${disabled ? 'disabled' : 'enabled'}`,
className,
)}
data-testid={dataTestid}
id={id}
{...eventProps}
onFocus={onFocus}
ref={wrapper}
>
{renderInputs()}
{renderCalendar()}
</div>
);
}
================================================
FILE: packages/react-daterange-picker/src/index.ts
================================================
import DateRangePicker from './DateRangePicker.js';
export type { DateRangePickerProps } from './DateRangePicker.js';
export { DateRangePicker };
export default DateRangePicker;
================================================
FILE: packages/react-daterange-picker/src/shared/types.ts
================================================
export type Range<T> = [T, T];
export type ClassName = string | null | undefined | (string | null | undefined)[];
export type CloseReason = 'buttonClick' | 'escape' | 'outsideAction' | 'select';
export type Detail = 'century' | 'decade' | 'year' | 'month';
type LooseValuePiece = string | Date | null;
export type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
export type OpenReason = 'buttonClick' | 'focus';
export type RangeType = 'century' | 'decade' | 'year' | 'month' | 'day';
type ValuePiece = Date | null;
export type Value = ValuePiece | Range<ValuePiece>;
================================================
FILE: packages/react-daterange-picker/tsconfig.build.json
================================================
{
"extends": "./tsconfig.json",
"compilerOptions": {
"noEmit": false,
"outDir": "dist",
"rootDir": "src"
},
"include": ["src"],
"exclude": ["src/**/*.spec.ts", "src/**/*.spec.tsx"]
}
================================================
FILE: packages/react-daterange-picker/tsconfig.json
================================================
{
"compilerOptions": {
"declaration": true,
"esModuleInterop": true,
"isolatedDeclarations": true,
"isolatedModules": true,
"jsx": "react-jsx",
"module": "nodenext",
"moduleDetection": "force",
"noEmit": true,
"noUncheckedIndexedAccess": true,
"outDir": "dist",
"skipLibCheck": true,
"target": "es2018",
"verbatimModuleSyntax": true
},
"exclude": ["dist"]
}
================================================
FILE: packages/react-daterange-picker/vitest.config.ts
================================================
import { playwright } from '@vitest/browser-playwright';
import { defineConfig } from 'vitest/config';
import type { ViteUserConfig } from 'vitest/config';
const config: ViteUserConfig = defineConfig({
test: {
browser: {
enabled: true,
headless: true,
instances: [{ browser: 'chromium' }],
provider: playwright(),
},
watch: false,
},
});
export default config;
================================================
FILE: sample/.gitignore
================================================
dist
node_modules
================================================
FILE: sample/Sample.css
================================================
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, sans-serif;
}
.Sample input,
.Sample button {
font: inherit;
}
.Sample header {
background-color: #323639;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
padding: 20px;
color: white;
}
.Sample header h1 {
font-size: inherit;
margin: 0;
}
.Sample__container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
margin: 10px 0;
padding: 10px;
}
.Sample__container > * > * {
margin: 10px;
}
.Sample__container__content {
display: flex;
max-width: 100%;
flex-basis: 420px;
flex-direction: column;
flex-grow: 100;
align-items: stretch;
}
================================================
FILE: sample/Sample.tsx
================================================
import { useState } from 'react';
import DateRangePicker from '@wojtekmaj/react-daterange-picker';
import './Sample.css';
type ValuePiece = Date | null;
type Value = ValuePiece | [ValuePiece, ValuePiece];
const now = new Date();
const yesterdayBegin = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
const todayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
export default function Sample() {
const [value, onChange] = useState<Value>([yesterdayBegin, todayEnd]);
return (
<div className="Sample">
<header>
<h1>react-daterange-picker sample page</h1>
</header>
<div className="Sample__container">
<main className="Sample__container__content">
<DateRangePicker
calendarAriaLabel="Toggle calendar"
clearAriaLabel="Clear value"
dayAriaLabel="Day"
monthAriaLabel="Month"
nativeInputAriaLabel="Date"
onChange={onChange}
value={value}
yearAriaLabel="Year"
/>
</main>
</div>
</div>
);
}
================================================
FILE: sample/index.html
================================================
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>react-daterange-picker sample page</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.tsx"></script>
</body>
</html>
================================================
FILE: sample/index.tsx
================================================
import { createRoot } from 'react-dom/client';
import Sample from './Sample.js';
const root = document.getElementById('root');
if (!root) {
throw new Error('Could not find root element');
}
createRoot(root).render(<Sample />);
================================================
FILE: sample/package.json
================================================
{
"name": "react-daterange-picker-sample-page",
"version": "3.0.0",
"description": "A sample page for React-DateRange-Picker.",
"private": true,
"type": "module",
"scripts": {
"build": "vite build",
"dev": "vite",
"preview": "vite preview"
},
"author": {
"name": "Wojciech Maj",
"email": "kontakt@wojtekmaj.pl"
},
"license": "MIT",
"dependencies": {
"@wojtekmaj/react-daterange-picker": "latest",
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^6.0.1",
"typescript": "^6.0.2",
"vite": "^8.0.5"
},
"packageManager": "yarn@4.10.3"
}
================================================
FILE: sample/tsconfig.json
================================================
{
"compilerOptions": {
"isolatedModules": true,
"jsx": "react-jsx",
"module": "preserve",
"moduleDetection": "force",
"noEmit": true,
"noUncheckedIndexedAccess": true,
"skipLibCheck": true,
"target": "esnext",
"verbatimModuleSyntax": true
}
}
================================================
FILE: sample/vite.config.ts
================================================
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
base: './',
plugins: [react()],
});
================================================
FILE: test/.gitignore
================================================
dist
node_modules
================================================
FILE: test/LocaleOptions.tsx
================================================
import { useId, useRef } from 'react';
type LocaleOptionsProps = {
locale: string | undefined;
setLocale: (locale: string | undefined) => void;
};
export default function LocaleOptions({ locale, setLocale }: LocaleOptionsProps) {
const localeDefaultId = useId();
const localeEnUSId = useId();
const localeFrFRId = useId();
const localeArEGId = useId();
const customLocaleId = useId();
const customLocale = useRef<HTMLInputElement>(null);
function onChange(event: React.ChangeEvent<HTMLInputElement>) {
const { value: nextLocale } = event.target;
if (nextLocale === 'undefined') {
setLocale(undefined);
} else {
setLocale(nextLocale);
}
}
function onCustomChange(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
const input = customLocale.current;
const { value: nextLocale } = input as HTMLInputElement;
setLocale(nextLocale);
}
function resetLocale() {
setLocale(undefined);
}
return (
<fieldset>
<legend>Locale</legend>
<div>
<input
checked={locale === undefined}
id={localeDefaultId}
name="locale"
onChange={onChange}
type="radio"
value="undefined"
/>
<label htmlFor={localeDefaultId}>Auto</label>
</div>
<div>
<input
checked={locale === 'en-US'}
id={localeEnUSId}
name="locale"
onChange={onChange}
type="radio"
value="en-US"
/>
<label htmlFor={localeEnUSId}>en-US</label>
</div>
<div>
<input
checked={locale === 'fr-FR'}
id={localeFrFRId}
name="locale"
onChange={onChange}
type="radio"
value="fr-FR"
/>
<label htmlFor={localeFrFRId}>fr-FR</label>
</div>
<div>
<input
checked={locale === 'ar-EG'}
id={localeArEGId}
name="locale"
onChange={onChange}
type="radio"
value="ar-EG"
/>
<label htmlFor={localeArEGId}>ar-EG</label>
</div>
<form onSubmit={onCustomChange}>
<label htmlFor={customLocaleId}>Custom locale:</label>
<input
key={locale}
defaultValue={locale}
id={customLocaleId}
name="customLocale"
pattern="^[a-z]{2}(-[A-Z0-9]{2,3})?$"
ref={customLocale}
type="text"
/>
<button style={{ display: 'none' }} type="submit">
Set locale
</button>
<button disabled={locale === undefined} onClick={resetLocale} type="button">
Reset locale
</button>
</form>
</fieldset>
);
}
================================================
FILE: test/MaxDetailOptions.tsx
================================================
import type { Detail } from './shared/types.js';
const allViews = ['century', 'decade', 'year', 'month'] as const;
function upperCaseFirstLetter(str: string) {
return str.slice(0, 1).toUpperCase() + str.slice(1);
}
type MaxDetailOptionsProps = {
maxDetail: Detail;
minDetail: Detail;
setMaxDetail: (maxDetail: Detail) => void;
};
export default function MaxDetailOptions({
maxDetail,
minDetail,
setMaxDetail,
}: MaxDetailOptionsProps) {
function onChange(event: React.ChangeEvent<HTMLInputElement>) {
const { value } = event.target;
setMaxDetail(value as Detail);
}
const minDetailIndex = allViews.indexOf(minDetail);
return (
<fieldset>
<legend>Maximum detail</legend>
{allViews.map((view, index) => (
<div key={view}>
<input
checked={maxDetail === view}
disabled={minDetailIndex > index}
id={`max-${view}`}
name="maxDetail"
onChange={onChange}
type="radio"
value={view}
/>
<label htmlFor={`max-${view}`}>{upperCaseFirstLetter(view)}</label>
</div>
))}
</fieldset>
);
}
================================================
FILE: test/MinDetailOptions.tsx
================================================
import type { Detail } from './shared/types.js';
const allViews = ['century', 'decade', 'year', 'month'] as const;
function upperCaseFirstLetter(str: string) {
return str.slice(0, 1).toUpperCase() + str.slice(1);
}
type MinDetailOptionsProps = {
maxDetail: Detail;
minDetail: Detail;
setMinDetail: (maxDetail: Detail) => void;
};
export default function MinDetailOptions({
maxDetail,
minDetail,
setMinDetail,
}: MinDetailOptionsProps) {
function onChange(event: React.ChangeEvent<HTMLInputElement>) {
const { value } = event.target;
setMinDetail(value as Detail);
}
const maxDetailIndex = allViews.indexOf(maxDetail);
return (
<fieldset>
<legend>Minimum detail</legend>
{allViews.map((view, index) => (
<div key={view}>
<input
checked={minDetail === view}
disabled={maxDetailIndex < index}
id={`min-${view}`}
name="minDetail"
onChange={onChange}
type="radio"
value={view}
/>
<label htmlFor={`min-${view}`}>{upperCaseFirstLetter(view)}</label>
</div>
))}
</fieldset>
);
}
================================================
FILE: test/Test.css
================================================
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, sans-serif;
}
.Test header {
background-color: #323639;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
padding: 20px;
color: white;
}
.Test header h1 {
font-size: inherit;
margin: 0;
}
.Test__container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
margin: 10px 0;
padding: 10px;
}
.Test__container > * > * {
margin: 10px;
}
.Test__container__options {
display: flex;
flex-basis: 400px;
flex-grow: 1;
flex-wrap: wrap;
margin: 0;
}
.Test__container__options input,
.Test__container__options button {
font: inherit;
}
.Test__container__options fieldset {
border: 1px solid black;
flex-grow: 1;
position: relative;
top: -10px;
}
.Test__container__options fieldset legend {
font-weight: 600;
}
.Test__container__options fieldset legend + * {
margin-top: 0 !important;
}
.Test__container__options fieldset label {
font-weight: 600;
display: block;
}
.Test__container__options fieldset label:not(:first-of-type) {
margin-top: 1em;
}
.Test__container__options fieldset input[type='checkbox'] + label,
.Test__container__options fieldset input[type='radio'] + label {
font-weight: normal;
display: inline-block;
margin: 0;
}
.Test__container__options fieldset form:not(:first-child),
.Test__container__options fieldset div:not(:first-child) {
margin-top: 1em;
}
.Test__container__options fieldset form:not(:last-child),
.Test__container__options fieldset div:not(:last-child) {
margin-bottom: 1em;
}
.Test__container__content {
display: flex;
max-width: 100%;
flex-basis: 420px;
flex-direction: column;
flex-grow: 100;
align-items: stretch;
}
================================================
FILE: test/Test.tsx
================================================
import { useRef, useState } from 'react';
import DateRangePicker from '@wojtekmaj/react-daterange-picker';
import '@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css';
import 'react-calendar/dist/Calendar.css';
import ValidityOptions from './ValidityOptions.js';
import MaxDetailOptions from './MaxDetailOptions.js';
import MinDetailOptions from './MinDetailOptions.js';
import LocaleOptions from './LocaleOptions.js';
import ValueOptions from './ValueOptions.js';
import ViewOptions from './ViewOptions.js';
import './Test.css';
import type { Detail, LooseValue } from './shared/types.js';
const now = new Date();
const ariaLabelProps = {
calendarAriaLabel: 'Toggle calendar',
clearAriaLabel: 'Clear value',
dayAriaLabel: 'Day',
monthAriaLabel: 'Month',
nativeInputAriaLabel: 'Date',
yearAriaLabel: 'Year',
};
const placeholderProps = {
dayPlaceholder: 'dd',
monthPlaceholder: 'mm',
yearPlaceholder: 'yyyy',
};
const nineteenNinetyFive = new Date(1995, now.getUTCMonth() + 1, 15, 12);
const fifteenthOfNextMonth = new Date(now.getUTCFullYear(), now.getUTCMonth() + 1, 15, 12);
export default function Test() {
const portalContainer = useRef<HTMLDivElement>(null);
const [disabled, setDisabled] = useState(false);
const [locale, setLocale] = useState<string>();
const [maxDate, setMaxDate] = useState<Date | undefined>(fifteenthOfNextMonth);
const [maxDetail, setMaxDetail] = useState<Detail>('month');
const [minDate, setMinDate] = useState<Date | undefined>(nineteenNinetyFive);
const [minDetail, setMinDetail] = useState<Detail>('century');
const [renderInPortal, setRenderInPortal] = useState(false);
const [required, setRequired] = useState(true);
const [showLeadingZeros, setShowLeadingZeros] = useState(true);
const [showNeighboringMonth, setShowNeighboringMonth] = useState(false);
const [showWeekNumbers, setShowWeekNumbers] = useState(false);
const [value, setValue] = useState<LooseValue>(now);
return (
<div className="Test">
<header>
<h1>react-daterange-picker test page</h1>
</header>
<div className="Test__container">
<aside className="Test__container__options">
<MinDetailOptions
maxDetail={maxDetail}
minDetail={minDetail}
setMinDetail={setMinDetail}
/>
<MaxDetailOptions
maxDetail={maxDetail}
minDetail={minDetail}
setMaxDetail={setMaxDetail}
/>
<ValidityOptions
maxDate={maxDate}
minDate={minDate}
required={required}
setMaxDate={setMaxDate}
setMinDate={setMinDate}
setRequired={setRequired}
/>
<LocaleOptions locale={locale} setLocale={setLocale} />
<ValueOptions setValue={setValue} value={value} />
<ViewOptions
disabled={disabled}
renderInPortal={renderInPortal}
setDisabled={setDisabled}
setRenderInPortal={setRenderInPortal}
setShowLeadingZeros={setShowLeadingZeros}
setShowNeighboringMonth={setShowNeighboringMonth}
setShowWeekNumbers={setShowWeekNumbers}
showLeadingZeros={showLeadingZeros}
showNeighboringMonth={showNeighboringMonth}
showWeekNumbers={showWeekNumbers}
/>
</aside>
<main className="Test__container__content">
<form
onSubmit={(event) => {
event.preventDefault();
console.warn('Calendar triggered submitting the form.');
console.log(event);
}}
>
<DateRangePicker
{...ariaLabelProps}
{...placeholderProps}
calendarProps={{
className: 'myCustomCalendarClassName',
minDetail,
showNeighboringMonth,
showWeekNumbers,
}}
className="myCustomDateRangePickerClassName"
data-testid="myCustomDateRangePicker"
disabled={disabled}
locale={locale}
maxDate={maxDate}
maxDetail={maxDetail}
minDate={minDate}
name="myCustomName"
onCalendarClose={() => console.log('Calendar closed')}
onCalendarOpen={() => console.log('Calendar opened')}
onChange={setValue}
portalContainer={renderInPortal ? portalContainer.current : undefined}
required={required}
showLeadingZeros={showLeadingZeros}
value={value}
/>
<div ref={portalContainer} />
<br />
<br />
<button type="submit">Submit</button>
</form>
</main>
</div>
</div>
);
}
================================================
FILE: test/ValidityOptions.tsx
================================================
import { useId } from 'react';
import { getISOLocalDate } from '@wojtekmaj/date-utils';
type ValidityOptionsProps = {
maxDate?: Date;
minDate?: Date;
required?: boolean;
setMaxDate: (maxDate: Date | undefined) => void;
setMinDate: (minDate: Date | undefined) => void;
setRequired: (required: boolean) => void;
};
export default function ValidityOptions({
maxDate,
minDate,
required,
setMaxDate,
setMinDate,
setRequired,
}: ValidityOptionsProps) {
const minDateId = useId();
const maxDateId = useId();
const requiredId = useId();
function onMinChange(event: React.ChangeEvent<HTMLInputElement>) {
const { value } = event.target;
setMinDate(value ? new Date(value) : undefined);
}
function onMaxChange(event: React.ChangeEvent<HTMLInputElement>) {
const { value } = event.target;
setMaxDate(value ? new Date(value) : undefined);
}
return (
<fieldset>
<legend>Minimum and maximum date</legend>
<div>
<label htmlFor={minDateId}>Minimum date</label>
<input
id={minDateId}
onChange={onMinChange}
type="date"
value={minDate ? getISOLocalDate(minDate) : ''}
/>
<button onClick={() => setMinDate(undefined)} type="button">
Clear
</button>
</div>
<div>
<label htmlFor={maxDateId}>Maximum date</label>
<input
id={maxDateId}
onChange={onMaxChange}
type="date"
value={maxDate ? getISOLocalDate(maxDate) : ''}
/>
<button onClick={() => setMaxDate(undefined)} type="button">
Clear
</button>
</div>
<div>
<input
checked={required}
id={requiredId}
onChange={(event) => setRequired(event.target.checked)}
type="checkbox"
/>
<label htmlFor={requiredId}>Required</label>
</div>
</fieldset>
);
}
================================================
FILE: test/ValueOptions.tsx
================================================
import { useId } from 'react';
import { getDayStart, getDayEnd, getISOLocalDate } from '@wojtekmaj/date-utils';
import type { LooseValue } from './shared/types.js';
type ValueOptionsProps = {
setValue: (value: LooseValue) => void;
value?: LooseValue;
};
export default function ValueOptions({ setValue, value }: ValueOptionsProps) {
const startDateId = useId();
const endDateId = useId();
const [startDate, endDate] = Array.isArray(value) ? value : [value, null];
function setStartValue(nextStartDate: string | Date | null) {
if (!nextStartDate) {
setValue(endDate);
return;
}
if (Array.isArray(value)) {
setValue([nextStartDate, endDate]);
} else {
setValue(nextStartDate);
}
}
function setEndValue(nextEndDate: string | Date | null) {
if (!nextEndDate) {
setValue(startDate || null);
return;
}
setValue([startDate || null, nextEndDate]);
}
function onStartChange(event: React.ChangeEvent<HTMLInputElement>) {
const { value: nextValue } = event.target;
setStartValue(nextValue ? getDayStart(new Date(nextValue)) : null);
}
function onEndChange(event: React.ChangeEvent<HTMLInputElement>) {
const { value: nextValue } = event.target;
setEndValue(nextValue ? getDayEnd(new Date(nextValue)) : null);
}
return (
<fieldset>
<legend>Value options</legend>
<div>
<label htmlFor={startDateId}>Start date</label>
<input
id={startDateId}
onChange={onStartChange}
type="date"
value={
startDate && startDate instanceof Date
? getISOLocalDate(startDate)
: startDate || undefined
}
/>
<button onClick={() => setStartValue(null)} type="button">
Clear to null
</button>
<button onClick={() => setStartValue('')} type="button">
Clear to empty string
</button>
</div>
<div>
<label htmlFor={endDateId}>End date</label>
<input
id={endDateId}
onChange={onEndChange}
type="date"
value={
endDate && endDate instanceof Date ? getISOLocalDate(endDate) : endDate || undefined
}
/>
<button onClick={() => setEndValue(null)} type="button">
Clear to null
</button>
<button onClick={() => setEndValue('')} type="button">
Clear to empty string
</button>
</div>
</fieldset>
);
}
================================================
FILE: test/ViewOptions.tsx
================================================
import { useId } from 'react';
type ViewOptionsProps = {
disabled: boolean;
renderInPortal: boolean;
setDisabled: (disabled: boolean) => void;
setRenderInPortal: (renderInPortal: boolean) => void;
setShowLeadingZeros: (showLeadingZeros: boolean) => void;
setShowNeighboringMonth: (showNeighboringMonth: boolean) => void;
setShowWeekNumbers: (showWeekNumbers: boolean) => void;
showLeadingZeros: boolean;
showNeighboringMonth: boolean;
showWeekNumbers: boolean;
};
export default function ViewOptions({
disabled,
renderInPortal,
setDisabled,
setRenderInPortal,
setShowLeadingZeros,
setShowNeighboringMonth,
setShowWeekNumbers,
showLeadingZeros,
showNeighboringMonth,
showWeekNumbers,
}: ViewOptionsProps) {
const disabledId = useId();
const showLeadingZerosId = useId();
const showWeekNumbersId = useId();
const showNeighboringMonthId = useId();
const renderInPortalId = useId();
function onDisabledChange(event: React.ChangeEvent<HTMLInputElement>) {
const { checked } = event.target;
setDisabled(checked);
}
function onShowLeadingZerosChange(event: React.ChangeEvent<HTMLInputElement>) {
const { checked } = event.target;
setShowLeadingZeros(checked);
}
function onShowWeekNumbersChange(event: React.ChangeEvent<HTMLInputElement>) {
const { checked } = event.target;
setShowWeekNumbers(checked);
}
function onShowNeighboringMonthChange(event: React.ChangeEvent<HTMLInputElement>) {
const { checked } = event.target;
setShowNeighboringMonth(checked);
}
function onRenderInPortalChange(event: React.ChangeEvent<HTMLInputElement>) {
const { checked } = event.target;
setRenderInPortal(checked);
}
return (
<fieldset>
<legend>View options</legend>
<div>
<input checked={disabled} id={disabledId} onChange={onDisabledChange} type="checkbox" />
<label htmlFor={disabledId}>Disabled</label>
</div>
<div>
<input
checked={showLeadingZeros}
id={showLeadingZerosId}
onChange={onShowLeadingZerosChange}
type="checkbox"
/>
<label htmlFor={showLeadingZerosId}>Show leading zeros</label>
</div>
<div>
<input
checked={showWeekNumbers}
id={showWeekNumbersId}
onChange={onShowWeekNumbersChange}
type="checkbox"
/>
<label htmlFor={showWeekNumbersId}>Show week numbers</label>
</div>
<div>
<input
checked={showNeighboringMonth}
id={showNeighboringMonthId}
onChange={onShowNeighboringMonthChange}
type="checkbox"
/>
<label htmlFor={showNeighboringMonthId}>Show neighboring month's days</label>
</div>
<div>
<input
checked={renderInPortal}
id={renderInPortalId}
onChange={onRenderInPortalChange}
type="checkbox"
/>
<label htmlFor={renderInPortalId}>Render in portal</label>
</div>
</fieldset>
);
}
================================================
FILE: test/global.d.ts
================================================
declare module '*.css';
================================================
FILE: test/index.html
================================================
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>react-daterange-picker test page</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.tsx"></script>
</body>
</html>
================================================
FILE: test/index.tsx
================================================
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import Test from './Test.js';
const root = document.getElementById('root');
if (!root) {
throw new Error('Could not find root element');
}
createRoot(root).render(
<StrictMode>
<Test />
</StrictMode>,
);
================================================
FILE: test/package.json
================================================
{
"name": "test",
"version": "2.0.0",
"description": "A test page for React-DateRange-Picker.",
"private": true,
"type": "module",
"scripts": {
"build": "vite build",
"dev": "vite",
"format": "biome format",
"lint": "biome lint",
"preview": "vite preview",
"test": "yarn lint && yarn tsc && yarn format",
"tsc": "tsc"
},
"author": {
"name": "Wojciech Maj",
"email": "kontakt@wojtekmaj.pl"
},
"license": "MIT",
"dependencies": {
"@wojtekmaj/date-utils": "^2.0.2",
"@wojtekmaj/react-daterange-picker": "workspace:packages/react-daterange-picker",
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
"@biomejs/biome": "2.4.10",
"@types/react": "^19.2.0",
"@vitejs/plugin-react": "^6.0.1",
"typescript": "^6.0.2",
"vite": "^8.0.5"
}
}
================================================
FILE: test/shared/types.ts
================================================
type Range<T> = [T, T];
export type Detail = 'century' | 'decade' | 'year' | 'month';
type LooseValuePiece = string | Date | null;
export type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
================================================
FILE: test/tsconfig.json
================================================
{
"compilerOptions": {
"isolatedModules": true,
"jsx": "react-jsx",
"module": "preserve",
"moduleDetection": "force",
"noEmit": true,
"noUncheckedIndexedAccess": true,
"skipLibCheck": true,
"target": "esnext",
"verbatimModuleSyntax": true
}
}
================================================
FILE: test/vite.config.ts
================================================
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
base: './',
plugins: [react()],
});
gitextract_9pvwexcp/
├── .gitattributes
├── .github/
│ ├── FUNDING.yml
│ └── workflows/
│ ├── ci.yml
│ ├── close-stale-issues.yml
│ └── publish.yml
├── .gitignore
├── .husky/
│ └── pre-commit
├── .vscode/
│ ├── extensions.json
│ └── settings.json
├── .yarnrc.yml
├── LICENSE
├── biome.json
├── package.json
├── packages/
│ └── react-daterange-picker/
│ ├── LICENSE
│ ├── README.md
│ ├── package.json
│ ├── src/
│ │ ├── DateRangePicker.css
│ │ ├── DateRangePicker.spec.tsx
│ │ ├── DateRangePicker.tsx
│ │ ├── index.ts
│ │ └── shared/
│ │ └── types.ts
│ ├── tsconfig.build.json
│ ├── tsconfig.json
│ └── vitest.config.ts
├── sample/
│ ├── .gitignore
│ ├── Sample.css
│ ├── Sample.tsx
│ ├── index.html
│ ├── index.tsx
│ ├── package.json
│ ├── tsconfig.json
│ └── vite.config.ts
└── test/
├── .gitignore
├── LocaleOptions.tsx
├── MaxDetailOptions.tsx
├── MinDetailOptions.tsx
├── Test.css
├── Test.tsx
├── ValidityOptions.tsx
├── ValueOptions.tsx
├── ViewOptions.tsx
├── global.d.ts
├── index.html
├── index.tsx
├── package.json
├── shared/
│ └── types.ts
├── tsconfig.json
└── vite.config.ts
SYMBOL INDEX (49 symbols across 12 files)
FILE: packages/react-daterange-picker/src/DateRangePicker.spec.tsx
function waitForElementToBeRemovedOrHidden (line 10) | async function waitForElementToBeRemovedOrHidden(callback: () => HTMLEle...
function ClearIcon (line 261) | function ClearIcon() {
function ClearIcon (line 273) | function ClearIcon() {
function CalendarIcon (line 313) | function CalendarIcon() {
function CalendarIcon (line 325) | function CalendarIcon() {
function triggerFocusInEvent (line 385) | function triggerFocusInEvent(locator: Locator) {
function triggerFocusEvent (line 393) | function triggerFocusEvent(locator: Locator) {
function triggerTouchStart (line 515) | function triggerTouchStart(element: HTMLElement) {
function triggerFocusOutEvent (line 529) | function triggerFocusOutEvent(locator: Locator) {
function triggerBlurEvent (line 537) | function triggerBlurEvent(locator: Locator) {
FILE: packages/react-daterange-picker/src/DateRangePicker.tsx
type ReactNodeLike (line 55) | type ReactNodeLike = React.ReactNode | string | number | boolean | null ...
type Icon (line 57) | type Icon = ReactNodeLike | ReactNodeLike[];
type IconOrRenderFunction (line 59) | type IconOrRenderFunction = Icon | React.ComponentType | React.ReactElem...
type CalendarProps (line 61) | type CalendarProps = Omit<
type EventProps (line 66) | type EventProps = ReturnType<typeof makeEventProps>;
type DateRangePickerProps (line 68) | type DateRangePickerProps = {
function DateRangePicker (line 328) | function DateRangePicker(props: DateRangePickerProps): React.ReactElement {
FILE: packages/react-daterange-picker/src/shared/types.ts
type Range (line 1) | type Range<T> = [T, T];
type ClassName (line 3) | type ClassName = string | null | undefined | (string | null | undefined)[];
type CloseReason (line 5) | type CloseReason = 'buttonClick' | 'escape' | 'outsideAction' | 'select';
type Detail (line 7) | type Detail = 'century' | 'decade' | 'year' | 'month';
type LooseValuePiece (line 9) | type LooseValuePiece = string | Date | null;
type LooseValue (line 11) | type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
type OpenReason (line 13) | type OpenReason = 'buttonClick' | 'focus';
type RangeType (line 15) | type RangeType = 'century' | 'decade' | 'year' | 'month' | 'day';
type ValuePiece (line 17) | type ValuePiece = Date | null;
type Value (line 19) | type Value = ValuePiece | Range<ValuePiece>;
FILE: sample/Sample.tsx
type ValuePiece (line 6) | type ValuePiece = Date | null;
type Value (line 8) | type Value = ValuePiece | [ValuePiece, ValuePiece];
function Sample (line 14) | function Sample() {
FILE: test/LocaleOptions.tsx
type LocaleOptionsProps (line 3) | type LocaleOptionsProps = {
function LocaleOptions (line 8) | function LocaleOptions({ locale, setLocale }: LocaleOptionsProps) {
FILE: test/MaxDetailOptions.tsx
function upperCaseFirstLetter (line 5) | function upperCaseFirstLetter(str: string) {
type MaxDetailOptionsProps (line 9) | type MaxDetailOptionsProps = {
function MaxDetailOptions (line 15) | function MaxDetailOptions({
FILE: test/MinDetailOptions.tsx
function upperCaseFirstLetter (line 5) | function upperCaseFirstLetter(str: string) {
type MinDetailOptionsProps (line 9) | type MinDetailOptionsProps = {
function MinDetailOptions (line 15) | function MinDetailOptions({
FILE: test/Test.tsx
function Test (line 37) | function Test() {
FILE: test/ValidityOptions.tsx
type ValidityOptionsProps (line 4) | type ValidityOptionsProps = {
function ValidityOptions (line 13) | function ValidityOptions({
FILE: test/ValueOptions.tsx
type ValueOptionsProps (line 6) | type ValueOptionsProps = {
function ValueOptions (line 11) | function ValueOptions({ setValue, value }: ValueOptionsProps) {
FILE: test/ViewOptions.tsx
type ViewOptionsProps (line 3) | type ViewOptionsProps = {
function ViewOptions (line 16) | function ViewOptions({
FILE: test/shared/types.ts
type Range (line 1) | type Range<T> = [T, T];
type Detail (line 3) | type Detail = 'century' | 'decade' | 'year' | 'month';
type LooseValuePiece (line 5) | type LooseValuePiece = string | Date | null;
type LooseValue (line 7) | type LooseValue = LooseValuePiece | Range<LooseValuePiece>;
Condensed preview — 48 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (128K chars).
[
{
"path": ".gitattributes",
"chars": 378,
"preview": "# Auto detect text files and perform LF normalization\n* text=auto\n\n# Custom for Visual Studio\n*.cs diff=csharp\n\n# St"
},
{
"path": ".github/FUNDING.yml",
"chars": 53,
"preview": "github: wojtekmaj\nopen_collective: react-date-picker\n"
},
{
"path": ".github/workflows/ci.yml",
"chars": 2725,
"preview": "name: CI\n\non:\n push:\n branches: ['*']\n pull_request:\n branches: [main]\n\nenv:\n HUSKY: 0\n\njobs:\n lint:\n name:"
},
{
"path": ".github/workflows/close-stale-issues.yml",
"chars": 832,
"preview": "name: Close stale issues\n\non:\n schedule:\n - cron: '0 0 * * 1' # Every Monday\n workflow_dispatch:\n\njobs:\n close-iss"
},
{
"path": ".github/workflows/publish.yml",
"chars": 1237,
"preview": "name: Publish\n\non:\n release:\n types: [published]\n\nenv:\n HUSKY: 0\n\npermissions:\n id-token: write\n\njobs:\n publish:\n"
},
{
"path": ".gitignore",
"chars": 405,
"preview": "# OS\n.DS_Store\n\n# Cache\n.cache\n.playwright\n.tmp\n*.tsbuildinfo\n.eslintcache\n\n# Yarn\n.pnp.*\n**/.yarn/*\n!**/.yarn/patches\n!"
},
{
"path": ".husky/pre-commit",
"chars": 54,
"preview": "yarn format --staged --no-errors-on-unmatched --write\n"
},
{
"path": ".vscode/extensions.json",
"chars": 145,
"preview": "{\n \"recommendations\": [\"biomejs.biome\"],\n \"unwantedRecommendations\": [\"dbaeumer.jshint\", \"dbaeumer.vscode-eslint\", \"es"
},
{
"path": ".vscode/settings.json",
"chars": 128,
"preview": "{\n \"editor.defaultFormatter\": \"biomejs.biome\",\n \"editor.formatOnSave\": true,\n \"search.exclude\": {\n \"**/.yarn\": tru"
},
{
"path": ".yarnrc.yml",
"chars": 123,
"preview": "enableHardenedMode: false\n\nenableScripts: false\n\nlogFilters:\n - code: YN0076\n level: discard\n\nnodeLinker: node-modul"
},
{
"path": "LICENSE",
"chars": 1074,
"preview": "MIT License\n\nCopyright (c) 2018–2026 Wojciech Maj\n\nPermission is hereby granted, free of charge, to any person obtaining"
},
{
"path": "biome.json",
"chars": 2401,
"preview": "{\n \"$schema\": \"https://biomejs.dev/schemas/2.4.10/schema.json\",\n \"files\": {\n \"includes\": [\n \"**\",\n \"!**/."
},
{
"path": "package.json",
"chars": 786,
"preview": "{\n \"name\": \"@wojtekmaj/react-daterange-picker-monorepo\",\n \"version\": \"1.0.0\",\n \"description\": \"@wojtekmaj/react-dater"
},
{
"path": "packages/react-daterange-picker/LICENSE",
"chars": 1074,
"preview": "MIT License\n\nCopyright (c) 2018–2026 Wojciech Maj\n\nPermission is hereby granted, free of charge, to any person obtaining"
},
{
"path": "packages/react-daterange-picker/README.md",
"chars": 29343,
"preview": "[](https://www.npmjs.com/package/@wojtekmaj/re"
},
{
"path": "packages/react-daterange-picker/package.json",
"chars": 2431,
"preview": "{\n \"name\": \"@wojtekmaj/react-daterange-picker\",\n \"version\": \"7.0.0\",\n \"description\": \"A date range picker for your Re"
},
{
"path": "packages/react-daterange-picker/src/DateRangePicker.css",
"chars": 2427,
"preview": ".react-daterange-picker {\n display: inline-flex;\n position: relative;\n}\n\n.react-daterange-picker,\n.react-daterange-pic"
},
{
"path": "packages/react-daterange-picker/src/DateRangePicker.spec.tsx",
"chars": 30238,
"preview": "import { describe, expect, it, vi } from 'vitest';\nimport { page, userEvent } from 'vitest/browser';\nimport { render } f"
},
{
"path": "packages/react-daterange-picker/src/DateRangePicker.tsx",
"chars": 17851,
"preview": "'use client';\n\nimport { createElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { create"
},
{
"path": "packages/react-daterange-picker/src/index.ts",
"chars": 181,
"preview": "import DateRangePicker from './DateRangePicker.js';\n\nexport type { DateRangePickerProps } from './DateRangePicker.js';\n\n"
},
{
"path": "packages/react-daterange-picker/src/shared/types.ts",
"chars": 584,
"preview": "export type Range<T> = [T, T];\n\nexport type ClassName = string | null | undefined | (string | null | undefined)[];\n\nexpo"
},
{
"path": "packages/react-daterange-picker/tsconfig.build.json",
"chars": 205,
"preview": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"noEmit\": false,\n \"outDir\": \"dist\",\n \"rootDir\": \"src\""
},
{
"path": "packages/react-daterange-picker/tsconfig.json",
"chars": 416,
"preview": "{\n \"compilerOptions\": {\n \"declaration\": true,\n \"esModuleInterop\": true,\n \"isolatedDeclarations\": true,\n \"is"
},
{
"path": "packages/react-daterange-picker/vitest.config.ts",
"chars": 404,
"preview": "import { playwright } from '@vitest/browser-playwright';\nimport { defineConfig } from 'vitest/config';\n\nimport type { Vi"
},
{
"path": "sample/.gitignore",
"chars": 18,
"preview": "dist\nnode_modules\n"
},
{
"path": "sample/Sample.css",
"chars": 686,
"preview": "html,\nbody {\n height: 100%;\n}\n\nbody {\n margin: 0;\n font-family: 'Segoe UI', Tahoma, sans-serif;\n}\n\n.Sample input,\n.Sa"
},
{
"path": "sample/Sample.tsx",
"chars": 1116,
"preview": "import { useState } from 'react';\nimport DateRangePicker from '@wojtekmaj/react-daterange-picker';\n\nimport './Sample.css"
},
{
"path": "sample/index.html",
"chars": 322,
"preview": "<!DOCTYPE html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=devic"
},
{
"path": "sample/index.tsx",
"chars": 233,
"preview": "import { createRoot } from 'react-dom/client';\n\nimport Sample from './Sample.js';\n\nconst root = document.getElementById("
},
{
"path": "sample/package.json",
"chars": 650,
"preview": "{\n \"name\": \"react-daterange-picker-sample-page\",\n \"version\": \"3.0.0\",\n \"description\": \"A sample page for React-DateRa"
},
{
"path": "sample/tsconfig.json",
"chars": 283,
"preview": "{\n \"compilerOptions\": {\n \"isolatedModules\": true,\n \"jsx\": \"react-jsx\",\n \"module\": \"preserve\",\n \"moduleDetec"
},
{
"path": "sample/vite.config.ts",
"chars": 150,
"preview": "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n base: '."
},
{
"path": "test/.gitignore",
"chars": 18,
"preview": "dist\nnode_modules\n"
},
{
"path": "test/LocaleOptions.tsx",
"chars": 2766,
"preview": "import { useId, useRef } from 'react';\n\ntype LocaleOptionsProps = {\n locale: string | undefined;\n setLocale: (locale: "
},
{
"path": "test/MaxDetailOptions.tsx",
"chars": 1167,
"preview": "import type { Detail } from './shared/types.js';\n\nconst allViews = ['century', 'decade', 'year', 'month'] as const;\n\nfun"
},
{
"path": "test/MinDetailOptions.tsx",
"chars": 1167,
"preview": "import type { Detail } from './shared/types.js';\n\nconst allViews = ['century', 'decade', 'year', 'month'] as const;\n\nfun"
},
{
"path": "test/Test.css",
"chars": 1708,
"preview": "body {\n margin: 0;\n font-family: 'Segoe UI', Tahoma, sans-serif;\n}\n\n.Test header {\n background-color: #323639;\n box-"
},
{
"path": "test/Test.tsx",
"chars": 4843,
"preview": "import { useRef, useState } from 'react';\nimport DateRangePicker from '@wojtekmaj/react-daterange-picker';\nimport '@wojt"
},
{
"path": "test/ValidityOptions.tsx",
"chars": 1967,
"preview": "import { useId } from 'react';\nimport { getISOLocalDate } from '@wojtekmaj/date-utils';\n\ntype ValidityOptionsProps = {\n "
},
{
"path": "test/ValueOptions.tsx",
"chars": 2549,
"preview": "import { useId } from 'react';\nimport { getDayStart, getDayEnd, getISOLocalDate } from '@wojtekmaj/date-utils';\n\nimport "
},
{
"path": "test/ViewOptions.tsx",
"chars": 3055,
"preview": "import { useId } from 'react';\n\ntype ViewOptionsProps = {\n disabled: boolean;\n renderInPortal: boolean;\n setDisabled:"
},
{
"path": "test/global.d.ts",
"chars": 24,
"preview": "declare module '*.css';\n"
},
{
"path": "test/index.html",
"chars": 320,
"preview": "<!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=devic"
},
{
"path": "test/index.tsx",
"chars": 301,
"preview": "import { StrictMode } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nimport Test from './Test.js';\n\nconst"
},
{
"path": "test/package.json",
"chars": 846,
"preview": "{\n \"name\": \"test\",\n \"version\": \"2.0.0\",\n \"description\": \"A test page for React-DateRange-Picker.\",\n \"private\": true,"
},
{
"path": "test/shared/types.ts",
"chars": 201,
"preview": "type Range<T> = [T, T];\n\nexport type Detail = 'century' | 'decade' | 'year' | 'month';\n\ntype LooseValuePiece = string | "
},
{
"path": "test/tsconfig.json",
"chars": 283,
"preview": "{\n \"compilerOptions\": {\n \"isolatedModules\": true,\n \"jsx\": \"react-jsx\",\n \"module\": \"preserve\",\n \"moduleDetec"
},
{
"path": "test/vite.config.ts",
"chars": 150,
"preview": "import { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n base: '."
}
]
About this extraction
This page contains the full source code of the wojtekmaj/react-daterange-picker GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 48 files (117.5 KB), approximately 27.2k tokens, and a symbol index with 49 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.