Upload folder using huggingface_hub
Browse filesThis view is limited to 50 files because it contains too many changes. See raw diff
- .editorconfig +10 -0
- .gitattributes +9 -0
- .github/CODEOWNERS +1 -0
- .github/CODE_OF_CONDUCT.md +47 -0
- .github/FUNDING.yml +3 -0
- .github/ISSUE_TEMPLATE/bug_report.md +35 -0
- .github/ISSUE_TEMPLATE/config.yml +8 -0
- .github/PULL_REQUEST_TEMPLATE.md +26 -0
- .github/workflows/package.yml +116 -0
- .github/workflows/performance.yml +93 -0
- .github/workflows/website.yml +66 -0
- .gitignore +7 -0
- .npmrc +1 -0
- .nvmrc +1 -0
- .prettierignore +7 -0
- .prettierrc +11 -0
- .vscode/settings.json +18 -0
- .vscode/tasks.json +48 -0
- CHANGELOG.md +0 -0
- CONTRIBUTING.md +70 -0
- LICENSE +21 -0
- README.md +94 -0
- SECURITY.md +14 -0
- biome.json +53 -0
- buddhist.d.ts +1 -0
- buddhist.js +2 -0
- ethiopic.d.ts +1 -0
- ethiopic.js +4 -0
- examples-app/.gitignore +24 -0
- examples-app/README.md +3 -0
- examples-app/index.html +13 -0
- examples-app/package.json +23 -0
- examples-app/public/vite.svg +1 -0
- examples-app/src/App.css +50 -0
- examples-app/src/App.tsx +57 -0
- examples-app/src/assets/react.svg +1 -0
- examples-app/src/index.css +71 -0
- examples-app/src/main.tsx +12 -0
- examples-app/src/vite-env.d.ts +1 -0
- examples-app/tsconfig.app.json +27 -0
- examples-app/tsconfig.json +11 -0
- examples-app/tsconfig.node.json +13 -0
- examples-app/vite.config.ts +7 -0
- examples/AccessibleDatePicker.tsx +26 -0
- examples/Animate.tsx +17 -0
- examples/AnimateCSSVars.tsx +19 -0
- examples/AnimateRange.tsx +17 -0
- examples/AnimateRtl.tsx +20 -0
- examples/AsiaSaigonTimezone.test.tsx +14 -0
- examples/AsiaSaigonTimezone.tsx +17 -0
.editorconfig
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
root = true
|
| 2 |
+
|
| 3 |
+
[*]
|
| 4 |
+
end_of_line = lf
|
| 5 |
+
insert_final_newline = true
|
| 6 |
+
|
| 7 |
+
[*.{js,jsx,ts,tsx,json,yml}]
|
| 8 |
+
charset = utf-8
|
| 9 |
+
indent_style = space
|
| 10 |
+
indent_size = 2
|
.gitattributes
CHANGED
|
@@ -33,3 +33,12 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
|
|
| 33 |
*.zip filter=lfs diff=lfs merge=lfs -text
|
| 34 |
*.zst filter=lfs diff=lfs merge=lfs -text
|
| 35 |
*tfevents* filter=lfs diff=lfs merge=lfs -text
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 33 |
*.zip filter=lfs diff=lfs merge=lfs -text
|
| 34 |
*.zst filter=lfs diff=lfs merge=lfs -text
|
| 35 |
*tfevents* filter=lfs diff=lfs merge=lfs -text
|
| 36 |
+
website/docs/img/anatomy-dark.png filter=lfs diff=lfs merge=lfs -text
|
| 37 |
+
website/docs/img/anatomy-light.png filter=lfs diff=lfs merge=lfs -text
|
| 38 |
+
website/static/img/anatomy-dark.png filter=lfs diff=lfs merge=lfs -text
|
| 39 |
+
website/static/img/anatomy-light.png filter=lfs diff=lfs merge=lfs -text
|
| 40 |
+
website/static/img/favicon.ico filter=lfs diff=lfs merge=lfs -text
|
| 41 |
+
website/static/img/favicon.png filter=lfs diff=lfs merge=lfs -text
|
| 42 |
+
website/static/img/logo-dark.png filter=lfs diff=lfs merge=lfs -text
|
| 43 |
+
website/static/img/logo.png filter=lfs diff=lfs merge=lfs -text
|
| 44 |
+
website/static/img/social-card.png filter=lfs diff=lfs merge=lfs -text
|
.github/CODEOWNERS
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
* @gpbl
|
.github/CODE_OF_CONDUCT.md
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# Contributor Covenant Code of Conduct
|
| 2 |
+
|
| 3 |
+
## Our Pledge
|
| 4 |
+
|
| 5 |
+
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
|
| 6 |
+
|
| 7 |
+
## Our Standards
|
| 8 |
+
|
| 9 |
+
Examples of behavior that contributes to creating a positive environment include:
|
| 10 |
+
|
| 11 |
+
- Using welcoming and inclusive language
|
| 12 |
+
- Being respectful of differing viewpoints and experiences
|
| 13 |
+
- Gracefully accepting constructive criticism
|
| 14 |
+
- Focusing on what is best for the community
|
| 15 |
+
- Showing empathy towards other community members
|
| 16 |
+
|
| 17 |
+
Examples of unacceptable behavior by participants include:
|
| 18 |
+
|
| 19 |
+
- The use of sexualized language or imagery and unwelcome sexual attention or advances
|
| 20 |
+
- Trolling, insulting/derogatory comments, and personal or political attacks
|
| 21 |
+
- Public or private harassment
|
| 22 |
+
- Publishing others' private information, such as a physical or electronic address, without explicit permission
|
| 23 |
+
- Other conduct which could reasonably be considered inappropriate in a professional setting
|
| 24 |
+
|
| 25 |
+
## Our Responsibilities
|
| 26 |
+
|
| 27 |
+
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
|
| 28 |
+
|
| 29 |
+
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
|
| 30 |
+
|
| 31 |
+
## Scope
|
| 32 |
+
|
| 33 |
+
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
|
| 34 |
+
|
| 35 |
+
## Enforcement
|
| 36 |
+
|
| 37 |
+
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at io@gpbl.dev. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
|
| 38 |
+
|
| 39 |
+
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
|
| 40 |
+
|
| 41 |
+
## Attribution
|
| 42 |
+
|
| 43 |
+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
| 44 |
+
|
| 45 |
+
[homepage]: https://www.contributor-covenant.org
|
| 46 |
+
|
| 47 |
+
For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq
|
.github/FUNDING.yml
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# These are supported funding model platforms
|
| 2 |
+
|
| 3 |
+
github: [gpbl]
|
.github/ISSUE_TEMPLATE/bug_report.md
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
---
|
| 2 |
+
name: 🐛 Bug Report
|
| 3 |
+
about: Create a reproducible bug report
|
| 4 |
+
---
|
| 5 |
+
|
| 6 |
+
Thanks for reporting a bug for DayPicker. Please provide here a brief description of the issue you’ve encountered.
|
| 7 |
+
|
| 8 |
+
## To reproduce
|
| 9 |
+
|
| 10 |
+
Please reproduce the bug by forking [this codesandbox](https://codesandbox.io/p/sandbox/m2j7fr). Add your code there and share the URL. Otherwise copy-paste it below.
|
| 11 |
+
|
| 12 |
+
If you’re unable to easily reproduce this bug, consider opening a [support thread](https://github.com/gpbl/react-day-picker/discussions) to discuss it further.
|
| 13 |
+
|
| 14 |
+
```tsx
|
| 15 |
+
import { DayPicker } from "react-day-picker";
|
| 16 |
+
import "react-day-picker/style.css";
|
| 17 |
+
|
| 18 |
+
export default function App() {
|
| 19 |
+
return <DayPicker mode="single" />;
|
| 20 |
+
}
|
| 21 |
+
```
|
| 22 |
+
|
| 23 |
+
CodeSandbox: https://codesandbox.io/p/sandbox/SANDBOX_ID
|
| 24 |
+
|
| 25 |
+
## Actual Behavior
|
| 26 |
+
|
| 27 |
+
Describe what is actually happening.
|
| 28 |
+
|
| 29 |
+
## Expected Behavior
|
| 30 |
+
|
| 31 |
+
Describe what you expect to happen.
|
| 32 |
+
|
| 33 |
+
## Screenshots
|
| 34 |
+
|
| 35 |
+
If relevant, include screenshots or GIFs to illustrate the bug.
|
.github/ISSUE_TEMPLATE/config.yml
ADDED
|
@@ -0,0 +1,8 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
blank_issues_enabled: false
|
| 2 |
+
contact_links:
|
| 3 |
+
- name: 🙋 Get Help and Technical Support
|
| 4 |
+
url: https://github.com/gpbl/react-day-picker/discussions
|
| 5 |
+
about: Ask and answer questions in the GitHub discussions page
|
| 6 |
+
- name: 💡 Ideas and Feature requests
|
| 7 |
+
url: https://github.com/gpbl/react-day-picker/discussions/categories/ideas
|
| 8 |
+
about: Discuss and propose new features or improvements
|
.github/PULL_REQUEST_TEMPLATE.md
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# Pull Request Template
|
| 2 |
+
|
| 3 |
+
Thanks for your PR! Make sure you have read the [CONTRIBUTING](./CONTRIBUTING.md) guide.
|
| 4 |
+
|
| 5 |
+
## What's Changed
|
| 6 |
+
|
| 7 |
+
_Briefly describe the changes in this pull request._
|
| 8 |
+
|
| 9 |
+
## Type of Change
|
| 10 |
+
|
| 11 |
+
- [ ] Bug fix
|
| 12 |
+
- [ ] New feature
|
| 13 |
+
- [ ] Breaking change
|
| 14 |
+
- [ ] Documentation update
|
| 15 |
+
|
| 16 |
+
## Tips for a good PR
|
| 17 |
+
|
| 18 |
+
- If you are changing code, please add tests to cover the changes.
|
| 19 |
+
- Some screenshots or screen recording could help to understand the changes.
|
| 20 |
+
- If it is a bug, please provide the code to reproduce it.
|
| 21 |
+
|
| 22 |
+
Thanks
|
| 23 |
+
|
| 24 |
+
## Additional Notes
|
| 25 |
+
|
| 26 |
+
Add any extra comments or questions here.
|
.github/workflows/package.yml
ADDED
|
@@ -0,0 +1,116 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
name: react-day-picker
|
| 2 |
+
|
| 3 |
+
on:
|
| 4 |
+
release:
|
| 5 |
+
types: [published]
|
| 6 |
+
pull_request:
|
| 7 |
+
branches:
|
| 8 |
+
- "**"
|
| 9 |
+
push:
|
| 10 |
+
branches:
|
| 11 |
+
- "**"
|
| 12 |
+
workflow_dispatch:
|
| 13 |
+
inputs:
|
| 14 |
+
publish:
|
| 15 |
+
description: Publish on npm
|
| 16 |
+
required: false
|
| 17 |
+
default: false
|
| 18 |
+
type: boolean
|
| 19 |
+
|
| 20 |
+
permissions:
|
| 21 |
+
id-token: write # Required for OIDC
|
| 22 |
+
contents: read
|
| 23 |
+
|
| 24 |
+
jobs:
|
| 25 |
+
typecheck:
|
| 26 |
+
runs-on: ubuntu-latest
|
| 27 |
+
steps:
|
| 28 |
+
- uses: actions/checkout@v4
|
| 29 |
+
- uses: pnpm/action-setup@v4
|
| 30 |
+
- uses: actions/setup-node@v4
|
| 31 |
+
with:
|
| 32 |
+
node-version: 24
|
| 33 |
+
cache: pnpm
|
| 34 |
+
registry-url: "https://registry.npmjs.org"
|
| 35 |
+
- run: pnpm install --frozen-lockfile
|
| 36 |
+
- run: pnpm typecheck
|
| 37 |
+
|
| 38 |
+
lint:
|
| 39 |
+
runs-on: ubuntu-latest
|
| 40 |
+
steps:
|
| 41 |
+
- uses: actions/checkout@v4
|
| 42 |
+
- uses: pnpm/action-setup@v4
|
| 43 |
+
- uses: actions/setup-node@v4
|
| 44 |
+
with:
|
| 45 |
+
node-version: 24
|
| 46 |
+
cache: pnpm
|
| 47 |
+
- run: pnpm install --frozen-lockfile
|
| 48 |
+
- run: pnpm lint ci . --reporter=github
|
| 49 |
+
|
| 50 |
+
test:
|
| 51 |
+
needs: [lint, typecheck]
|
| 52 |
+
runs-on: ubuntu-latest
|
| 53 |
+
steps:
|
| 54 |
+
- uses: actions/checkout@v4
|
| 55 |
+
- uses: pnpm/action-setup@v4
|
| 56 |
+
- uses: actions/setup-node@v4
|
| 57 |
+
with:
|
| 58 |
+
node-version: 24
|
| 59 |
+
cache: pnpm
|
| 60 |
+
- run: pnpm install --frozen-lockfile
|
| 61 |
+
- run: pnpm test
|
| 62 |
+
- run: pnpm test:tz
|
| 63 |
+
|
| 64 |
+
build:
|
| 65 |
+
runs-on: ubuntu-latest
|
| 66 |
+
steps:
|
| 67 |
+
- uses: actions/checkout@v4
|
| 68 |
+
- uses: pnpm/action-setup@v4
|
| 69 |
+
- uses: actions/setup-node@v4
|
| 70 |
+
with:
|
| 71 |
+
node-version: 24
|
| 72 |
+
cache: pnpm
|
| 73 |
+
- run: pnpm install --frozen-lockfile
|
| 74 |
+
- run: pnpm build
|
| 75 |
+
- uses: actions/upload-artifact@v4
|
| 76 |
+
with:
|
| 77 |
+
name: rdp-dist
|
| 78 |
+
path: dist
|
| 79 |
+
|
| 80 |
+
test-build:
|
| 81 |
+
runs-on: ubuntu-latest
|
| 82 |
+
needs: [build]
|
| 83 |
+
steps:
|
| 84 |
+
- uses: actions/checkout@v4
|
| 85 |
+
- uses: pnpm/action-setup@v4
|
| 86 |
+
- uses: actions/setup-node@v4
|
| 87 |
+
with:
|
| 88 |
+
node-version: 24
|
| 89 |
+
cache: pnpm
|
| 90 |
+
- uses: actions/download-artifact@v4
|
| 91 |
+
with:
|
| 92 |
+
name: rdp-dist
|
| 93 |
+
- run: pnpm install --frozen-lockfile
|
| 94 |
+
- run: pnpm run build
|
| 95 |
+
- run: pnpm test:build
|
| 96 |
+
|
| 97 |
+
publish-on-npm:
|
| 98 |
+
runs-on: ubuntu-latest
|
| 99 |
+
needs: [build, test]
|
| 100 |
+
if: ${{ github.event_name == 'release' || github.event.inputs.publish }}
|
| 101 |
+
permissions:
|
| 102 |
+
contents: write
|
| 103 |
+
id-token: write
|
| 104 |
+
steps:
|
| 105 |
+
- uses: actions/checkout@v4
|
| 106 |
+
- uses: pnpm/action-setup@v4
|
| 107 |
+
- uses: actions/setup-node@v4
|
| 108 |
+
with:
|
| 109 |
+
node-version: 24
|
| 110 |
+
registry-url: https://registry.npmjs.org/
|
| 111 |
+
always-auth: false
|
| 112 |
+
- uses: actions/download-artifact@v4
|
| 113 |
+
with:
|
| 114 |
+
name: rdp-dist
|
| 115 |
+
path: dist
|
| 116 |
+
- run: npm publish --provenance --tag latest
|
.github/workflows/performance.yml
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
name: performance
|
| 2 |
+
|
| 3 |
+
on:
|
| 4 |
+
pull_request:
|
| 5 |
+
types: [labeled, synchronize, opened]
|
| 6 |
+
branches:
|
| 7 |
+
- main
|
| 8 |
+
push:
|
| 9 |
+
branches:
|
| 10 |
+
- main
|
| 11 |
+
|
| 12 |
+
permissions:
|
| 13 |
+
contents: read
|
| 14 |
+
pull-requests: write
|
| 15 |
+
|
| 16 |
+
jobs:
|
| 17 |
+
build:
|
| 18 |
+
if: contains(github.event.pull_request.labels.*.name, 'performance')
|
| 19 |
+
runs-on: ubuntu-latest
|
| 20 |
+
steps:
|
| 21 |
+
- name: Checkout repository
|
| 22 |
+
uses: actions/checkout@v4
|
| 23 |
+
|
| 24 |
+
- name: Set up pnpm
|
| 25 |
+
uses: pnpm/action-setup@v4
|
| 26 |
+
|
| 27 |
+
- name: Set up Node.js
|
| 28 |
+
uses: actions/setup-node@v4
|
| 29 |
+
|
| 30 |
+
- name: Create pnpm store directory
|
| 31 |
+
run: mkdir -p ~/.pnpm-store
|
| 32 |
+
|
| 33 |
+
- name: Install dependencies
|
| 34 |
+
run: pnpm install --frozen-lockfile
|
| 35 |
+
|
| 36 |
+
- name: Build project
|
| 37 |
+
run: pnpm build
|
| 38 |
+
|
| 39 |
+
- name: Upload build artifacts
|
| 40 |
+
uses: actions/upload-artifact@v4
|
| 41 |
+
with:
|
| 42 |
+
name: rdp-dist
|
| 43 |
+
path: dist
|
| 44 |
+
|
| 45 |
+
capture-report:
|
| 46 |
+
if: contains(github.event.pull_request.labels.*.name, 'performance')
|
| 47 |
+
needs: [build]
|
| 48 |
+
runs-on: ubuntu-latest
|
| 49 |
+
steps:
|
| 50 |
+
- name: Checkout repository
|
| 51 |
+
uses: actions/checkout@v4
|
| 52 |
+
|
| 53 |
+
- name: Set up Chrome
|
| 54 |
+
uses: browser-actions/setup-chrome@v1
|
| 55 |
+
id: setup-chrome
|
| 56 |
+
|
| 57 |
+
- name: Set up pnpm
|
| 58 |
+
uses: pnpm/action-setup@v4
|
| 59 |
+
|
| 60 |
+
- name: Set up Node.js
|
| 61 |
+
uses: actions/setup-node@v4
|
| 62 |
+
|
| 63 |
+
- name: Download build artifacts
|
| 64 |
+
uses: actions/download-artifact@v4
|
| 65 |
+
with:
|
| 66 |
+
name: rdp-dist
|
| 67 |
+
path: dist
|
| 68 |
+
|
| 69 |
+
- name: Create pnpm store directory
|
| 70 |
+
run: mkdir -p ~/.pnpm-store
|
| 71 |
+
|
| 72 |
+
- name: Install dependencies
|
| 73 |
+
run: pnpm install --frozen-lockfile
|
| 74 |
+
|
| 75 |
+
- name: Start server
|
| 76 |
+
run: pnpm --filter performance-tests start-server &
|
| 77 |
+
env:
|
| 78 |
+
CHROME_PATH: ${{ steps.setup-chrome.outputs.chrome-path }}
|
| 79 |
+
|
| 80 |
+
- name: Wait for server to start
|
| 81 |
+
run: pnpx wait-on http://localhost:4173 --timeout 10000
|
| 82 |
+
|
| 83 |
+
- name: Capture performance test
|
| 84 |
+
run: pnpm --filter performance-tests run capture
|
| 85 |
+
env:
|
| 86 |
+
CHROME_PATH: ${{ steps.setup-chrome.outputs.chrome-path }}
|
| 87 |
+
CI: true
|
| 88 |
+
|
| 89 |
+
- name: Upload report
|
| 90 |
+
uses: actions/upload-artifact@v4
|
| 91 |
+
with:
|
| 92 |
+
name: report
|
| 93 |
+
path: ./performance-tests/reports/report.html
|
.github/workflows/website.yml
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
name: website
|
| 2 |
+
|
| 3 |
+
on:
|
| 4 |
+
release:
|
| 5 |
+
types: [published]
|
| 6 |
+
pull_request:
|
| 7 |
+
branches:
|
| 8 |
+
- main
|
| 9 |
+
push:
|
| 10 |
+
branches:
|
| 11 |
+
- main
|
| 12 |
+
|
| 13 |
+
jobs:
|
| 14 |
+
build-react-day-picker:
|
| 15 |
+
runs-on: ubuntu-latest
|
| 16 |
+
steps:
|
| 17 |
+
- uses: actions/checkout@v4
|
| 18 |
+
- uses: pnpm/action-setup@v4
|
| 19 |
+
- uses: actions/setup-node@v4
|
| 20 |
+
with:
|
| 21 |
+
node-version: 20.16
|
| 22 |
+
cache: pnpm
|
| 23 |
+
- run: pnpm install --frozen-lockfile
|
| 24 |
+
- run: pnpm build
|
| 25 |
+
- uses: actions/upload-artifact@v4
|
| 26 |
+
with:
|
| 27 |
+
name: rdp-dist
|
| 28 |
+
path: dist
|
| 29 |
+
|
| 30 |
+
typecheck-website:
|
| 31 |
+
needs: [build-react-day-picker]
|
| 32 |
+
runs-on: ubuntu-latest
|
| 33 |
+
steps:
|
| 34 |
+
- uses: actions/checkout@v4
|
| 35 |
+
- uses: pnpm/action-setup@v4
|
| 36 |
+
- uses: actions/setup-node@v4
|
| 37 |
+
with:
|
| 38 |
+
node-version: 20.16
|
| 39 |
+
cache: pnpm
|
| 40 |
+
- uses: actions/download-artifact@v4
|
| 41 |
+
with:
|
| 42 |
+
name: rdp-dist
|
| 43 |
+
path: dist
|
| 44 |
+
- run: pnpm install --frozen-lockfile
|
| 45 |
+
- run: pnpm -F website typecheck
|
| 46 |
+
|
| 47 |
+
build-website:
|
| 48 |
+
needs: [build-react-day-picker]
|
| 49 |
+
runs-on: ubuntu-latest
|
| 50 |
+
steps:
|
| 51 |
+
- uses: actions/checkout@v4
|
| 52 |
+
- uses: pnpm/action-setup@v4
|
| 53 |
+
- uses: actions/setup-node@v4
|
| 54 |
+
with:
|
| 55 |
+
node-version: 20.16
|
| 56 |
+
cache: pnpm
|
| 57 |
+
- uses: actions/download-artifact@v4
|
| 58 |
+
with:
|
| 59 |
+
name: rdp-dist
|
| 60 |
+
path: dist
|
| 61 |
+
- run: pnpm install --frozen-lockfile
|
| 62 |
+
- run: pnpm -F website build
|
| 63 |
+
- uses: actions/upload-artifact@v4
|
| 64 |
+
with:
|
| 65 |
+
name: website-build
|
| 66 |
+
path: website/build
|
.gitignore
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
.DS_Store
|
| 2 |
+
|
| 3 |
+
node_modules
|
| 4 |
+
dist
|
| 5 |
+
/performance-tests/reports/report.html
|
| 6 |
+
/performance-tests/reports/markdown-report.md
|
| 7 |
+
/coverage
|
.npmrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
ignore-workspace-root-check=true
|
.nvmrc
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
18
|
.prettierignore
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
**/api/**
|
| 2 |
+
**/dist/**
|
| 3 |
+
**/build/**
|
| 4 |
+
**/versioned_docs/**
|
| 5 |
+
website/.docusaurus/**
|
| 6 |
+
website/examples-v8/**
|
| 7 |
+
performance-tests
|
.prettierrc
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"plugins": ["prettier-plugin-jsdoc"],
|
| 3 |
+
"overrides": [
|
| 4 |
+
{
|
| 5 |
+
"files": ["*.md", "*.mdx"]
|
| 6 |
+
},
|
| 7 |
+
{
|
| 8 |
+
"files": ["*.ts", "*.tsx"]
|
| 9 |
+
}
|
| 10 |
+
]
|
| 11 |
+
}
|
.vscode/settings.json
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"editor.formatOnSave": true,
|
| 3 |
+
"editor.codeActionsOnSave": {
|
| 4 |
+
"source.fixAll.biome": "explicit"
|
| 5 |
+
},
|
| 6 |
+
"[typescript]": {
|
| 7 |
+
"editor.defaultFormatter": "biomejs.biome"
|
| 8 |
+
},
|
| 9 |
+
"[typescriptreact]": {
|
| 10 |
+
"editor.defaultFormatter": "biomejs.biome"
|
| 11 |
+
},
|
| 12 |
+
"[javascript]": {
|
| 13 |
+
"editor.defaultFormatter": "biomejs.biome"
|
| 14 |
+
},
|
| 15 |
+
"[javascriptreact]": {
|
| 16 |
+
"editor.defaultFormatter": "biomejs.biome"
|
| 17 |
+
}
|
| 18 |
+
}
|
.vscode/tasks.json
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"version": "2.0.0",
|
| 3 |
+
"tasks": [
|
| 4 |
+
{
|
| 5 |
+
"type": "typescript",
|
| 6 |
+
"tsconfig": "tsconfig-esm.json",
|
| 7 |
+
"option": "watch",
|
| 8 |
+
"problemMatcher": [
|
| 9 |
+
"$tsc-watch"
|
| 10 |
+
],
|
| 11 |
+
"group": "build",
|
| 12 |
+
"label": "👀 tsc: watch - tsconfig-esm.json",
|
| 13 |
+
"detail": "Watch the project in ESM format",
|
| 14 |
+
"runOptions": {
|
| 15 |
+
"runOn": "folderOpen"
|
| 16 |
+
}
|
| 17 |
+
},
|
| 18 |
+
{
|
| 19 |
+
"type": "npm",
|
| 20 |
+
"script": "build",
|
| 21 |
+
"group": "build",
|
| 22 |
+
"problemMatcher": [],
|
| 23 |
+
"label": "🔨 npm: build",
|
| 24 |
+
"detail": "Build the project in ESM and CJS format"
|
| 25 |
+
},
|
| 26 |
+
{
|
| 27 |
+
"type": "typescript",
|
| 28 |
+
"tsconfig": "tsconfig-esm.json",
|
| 29 |
+
"option": "watch",
|
| 30 |
+
"problemMatcher": [
|
| 31 |
+
"$tsc-watch"
|
| 32 |
+
],
|
| 33 |
+
"group": "build",
|
| 34 |
+
"label": "⏯️ tsc: watch",
|
| 35 |
+
"detail": "Watch the project in ESM format",
|
| 36 |
+
"runOptions": {
|
| 37 |
+
"runOn": "folderOpen"
|
| 38 |
+
}
|
| 39 |
+
},
|
| 40 |
+
{
|
| 41 |
+
"label": "🧹 format and lint",
|
| 42 |
+
"detail": "Run formatting and linting",
|
| 43 |
+
"type": "shell",
|
| 44 |
+
"command": "pnpm format && pnpm lint --fix",
|
| 45 |
+
"problemMatcher": []
|
| 46 |
+
}
|
| 47 |
+
]
|
| 48 |
+
}
|
CHANGELOG.md
ADDED
|
The diff for this file is too large to render.
See raw diff
|
|
|
CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# Contributing to DayPicker
|
| 2 |
+
|
| 3 |
+
You are welcome to join the [DayPicker contributors](https://github.com/gpbl/react-day-picker/graphs/contributors) and help us build the best date picker for React.
|
| 4 |
+
|
| 5 |
+
## Ways to Contribute
|
| 6 |
+
|
| 7 |
+
There are many ways to contribute to the development of DayPicker:
|
| 8 |
+
|
| 9 |
+
- Improve our build tools and GitHub actions
|
| 10 |
+
- Open PRs with new features, bug fixes, and improved rendering performance
|
| 11 |
+
- Align the source code with the latest TypeScript/React practices
|
| 12 |
+
- Help with unit and integration tests
|
| 13 |
+
- Proofread [our website](https://daypicker.dev/) and the code documentation in the source files
|
| 14 |
+
- Make the website more stylish
|
| 15 |
+
- Help maintain [the repository](https://github.com/gpbl/react-day-picker) on GitHub and triage issues and PRs
|
| 16 |
+
- Answer [support questions](https://github.com/gpbl/react-day-picker/discussions/categories/support)
|
| 17 |
+
- [Sponsor the project](https://github.com/sponsors/gpbl)
|
| 18 |
+
|
| 19 |
+
[Send a message](https://github.com/gpbl/react-day-picker/discussions) on our discussions page to introduce yourself!
|
| 20 |
+
|
| 21 |
+
## Working With the Source Code
|
| 22 |
+
|
| 23 |
+
DayPicker is built using the following tools and libraries:
|
| 24 |
+
|
| 25 |
+
- [pnpm](https://pnpm.io/) - for package management
|
| 26 |
+
- [TypeScript](https://www.typescriptlang.org/) with [React](https://reactjs.org/)
|
| 27 |
+
- [Docusaurus](https://docusaurus.io/) - for the documentation website
|
| 28 |
+
- [Vite](https://vitejs.dev/) - for the examples app
|
| 29 |
+
- [Jest](https://jestjs.io/) - for unit tests
|
| 30 |
+
|
| 31 |
+
To contribute to DayPicker, start by cloning the repository:
|
| 32 |
+
|
| 33 |
+
```sh
|
| 34 |
+
git clone https://github.com/gpbl/react-day-picker.git
|
| 35 |
+
cd react-day-picker
|
| 36 |
+
pnpm install
|
| 37 |
+
```
|
| 38 |
+
|
| 39 |
+
### DayPicker Workspace
|
| 40 |
+
|
| 41 |
+
If your are using [Visual Studio code](https://code.visualstudio.com) open the [react-day-picker.code-workspace](https://github.com/gpbl/react-day-picker/blob/main/react-day-picker.code-workspace) to set up the development environment. This workspace includes:
|
| 42 |
+
|
| 43 |
+
- Suggested extensions for the project
|
| 44 |
+
- TypeScript compiler running in watch mode for the ESM export
|
| 45 |
+
- Docusaurus website running at http://localhost:2001, with documentation and API docs
|
| 46 |
+
- Vite.js examples app served at http://localhost:5173
|
| 47 |
+
- Use this app to run isolated test cases and examples, exported by `/examples/index.ts`
|
| 48 |
+
|
| 49 |
+
### Test Driven Development
|
| 50 |
+
|
| 51 |
+
DayPicker development is test-driven. Change code and run the tests using `pnpm run test-watch` or `pnpm run test`. The Jest plugin in the VS Code workspace is recommended for running tests.
|
| 52 |
+
|
| 53 |
+
### Useful Scripts
|
| 54 |
+
|
| 55 |
+
- To run the build in watch mode:
|
| 56 |
+
```sh
|
| 57 |
+
pnpm tsc --project tsconfig-esm.json --watch
|
| 58 |
+
```
|
| 59 |
+
- To run the tests in watch mode:
|
| 60 |
+
```
|
| 61 |
+
pnpm run test-watch
|
| 62 |
+
```
|
| 63 |
+
- To run the examples app at http://localhost:5173
|
| 64 |
+
```
|
| 65 |
+
pnpm --filter examples-app run dev
|
| 66 |
+
```
|
| 67 |
+
- To run the documentation at http://localhost:2001:
|
| 68 |
+
```
|
| 69 |
+
pnpm --filter website run start
|
| 70 |
+
```
|
LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
The MIT License (MIT)
|
| 2 |
+
|
| 3 |
+
Copyright (c) 2014-2025 Giampaolo Bellavite <io@gpbl.dev> and contributors
|
| 4 |
+
|
| 5 |
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
| 6 |
+
of this software and associated documentation files (the "Software"), to deal
|
| 7 |
+
in the Software without restriction, including without limitation the rights
|
| 8 |
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
| 9 |
+
copies of the Software, and to permit persons to whom the Software is
|
| 10 |
+
furnished to do so, subject to the following conditions:
|
| 11 |
+
|
| 12 |
+
The above copyright notice and this permission notice shall be included in all
|
| 13 |
+
copies or substantial portions of the Software.
|
| 14 |
+
|
| 15 |
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
| 16 |
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
| 17 |
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
| 18 |
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
| 19 |
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
| 20 |
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
| 21 |
+
SOFTWARE.
|
README.md
ADDED
|
@@ -0,0 +1,94 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# React DayPicker
|
| 2 |
+
|
| 3 |
+
DayPicker is a [React](https://react.dev) component for creating date pickers, calendars, and date inputs for web applications.
|
| 4 |
+
|
| 5 |
+
## Documentation
|
| 6 |
+
|
| 7 |
+
See **[daypicker.dev](https://daypicker.dev)** for guides, examples and API reference, or read [the docs in the repository](website/docs/start.mdx).
|
| 8 |
+
|
| 9 |
+
<picture>
|
| 10 |
+
<source media="(prefers-color-scheme: dark)" srcset="./website/static/img/screenshot-dark.png" />
|
| 11 |
+
<source media="(prefers-color-scheme: light)" srcset="./website/static/img/screenshot-light.png" />
|
| 12 |
+
<img width="460" src="./website/static/img/screenshot.png" alt="Screenshot of DayPicker displaying the September 2025 calendar, with the date range from the 17th to the 20th selected." />
|
| 13 |
+
</picture>
|
| 14 |
+
|
| 15 |
+
## Features
|
| 16 |
+
|
| 17 |
+
- 🛠 Extensive set of props for [customizing](https://daypicker.dev/docs/customization) the calendar.
|
| 18 |
+
- 🎨 Minimal design that can be [easily styled](https://daypicker.dev/docs/styling) with CSS or any CSS framework.
|
| 19 |
+
- 📅 Supports [selections](https://daypicker.dev/docs/selection-modes) of single days, multiple days, ranges of days, or [custom selections](https://daypicker.dev/guides/custom-selections).
|
| 20 |
+
- 🌍 Can be [localized](https://daypicker.dev/docs/localization) into any language and [time zones](https://daypicker.dev/docs/time-zone).
|
| 21 |
+
- 🌐 Support for [ISO 8601](http://daypicker.dev/localization/iso-and-broadcast#iso-8601-calendar), [Persian](http://daypicker.dev/localization/persian), [Buddhist (Thai)](http://daypicker.dev/localization/buddhist), [Ethiopic](http://daypicker.dev/localization/ethiopic), [Hebrew](http://daypicker.dev/localization/hebrew) and [broadcast](http://daypicker.dev/localization/iso-and-broadcast#broadcast-calendar) calendar.
|
| 22 |
+
- 🦮 Complies with WCAG 2.1 AA requirements for [accessibility](https://daypicker.dev/guides/accessibility).
|
| 23 |
+
- ⚙️ [Customizable components](https://daypicker.dev/guides/custom-components) to extend the rendered elements.
|
| 24 |
+
- 🔤 Easy integration [with input fields](https://daypicker.dev/guides/input-fields).
|
| 25 |
+
|
| 26 |
+
DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies on [date-fns](https://date-fns.org) for date manipulation and formatting.
|
| 27 |
+
|
| 28 |
+
## Installation
|
| 29 |
+
|
| 30 |
+
```bash
|
| 31 |
+
npm install react-day-picker
|
| 32 |
+
```
|
| 33 |
+
|
| 34 |
+
<a href="https://www.npmjs.com/package/react-day-picker"><img src="https://img.shields.io/npm/v/react-day-picker" alt="npm version"/></a> <img src="https://img.shields.io/npm/dm/react-day-picker.svg" alt="npm downloads"/> <img src="https://img.shields.io/bundlephobia/minzip/react-day-picker" alt="Min gzipped size"/>
|
| 35 |
+
|
| 36 |
+
## Example
|
| 37 |
+
|
| 38 |
+
```tsx
|
| 39 |
+
import { DayPicker } from "react-day-picker";
|
| 40 |
+
import "react-day-picker/style.css";
|
| 41 |
+
|
| 42 |
+
function MyDatePicker() {
|
| 43 |
+
const [selected, setSelected] = useState<Date>();
|
| 44 |
+
|
| 45 |
+
return (
|
| 46 |
+
<DayPicker
|
| 47 |
+
mode="single"
|
| 48 |
+
selected={selected}
|
| 49 |
+
onSelect={setSelected}
|
| 50 |
+
footer={
|
| 51 |
+
selected ? `Selected: ${selected.toLocaleDateString()}` : "Pick a day."
|
| 52 |
+
}
|
| 53 |
+
/>
|
| 54 |
+
);
|
| 55 |
+
}
|
| 56 |
+
```
|
| 57 |
+
|
| 58 |
+
## Compatibility
|
| 59 |
+
|
| 60 |
+
DayPicker is compatible with React 16.8 and later.
|
| 61 |
+
|
| 62 |
+
## License
|
| 63 |
+
|
| 64 |
+
DayPicker is released under the [MIT License](https://daypicker.dev/license).
|
| 65 |
+
|
| 66 |
+
## Community
|
| 67 |
+
|
| 68 |
+
Ask for help and share your experience with DayPicker:
|
| 69 |
+
|
| 70 |
+
- 💬 [Discussion forums](https://github.com/gpbl/react-day-picker/discussions) - Get support and provide feedback.
|
| 71 |
+
- 🪳 [Report an issue](https://github.com/gpbl/react-day-picker/issues/new/choose) - Report bugs or request features.
|
| 72 |
+
|
| 73 |
+
## Sponsors
|
| 74 |
+
|
| 75 |
+
Thank you to everyone supporting DayPicker - your sponsorship keeps this project maintained and evolving.
|
| 76 |
+
|
| 77 |
+
<p>
|
| 78 |
+
<a href="https://github.com/CHECK24" title="CHECK24"><img src="https://github.com/CHECK24.png?size=64" alt="CHECK24" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 79 |
+
<a href="https://github.com/wilsonadenuga" title="wilsonadenuga"><img src="https://github.com/wilsonadenuga.png?size=64" alt="wilsonadenuga" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 80 |
+
<a href="https://github.com/severinlandolt" title="severinlandolt"><img src="https://github.com/severinlandolt.png?size=64" alt="severinlandolt" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 81 |
+
<a href="https://github.com/syntaxfm" title="syntaxfm"><img src="https://github.com/syntaxfm.png?size=64" alt="syntaxfm" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 82 |
+
<a href="https://github.com/thnxdev" title="thnxdev"><img src="https://github.com/thnxdev.png?size=64" alt="thnxdev" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 83 |
+
<a href="https://github.com/katyabilokur" title="katyabilokur"><img src="https://github.com/katyabilokur.png?size=64" alt="katyabilokur" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 84 |
+
<a href="https://github.com/bedandbreakfasteu" title="bedandbreakfasteu"><img src="https://github.com/bedandbreakfasteu.png?size=64" alt="bedandbreakfasteu" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 85 |
+
<a href="https://github.com/Thinkmill" title="Thinkmill"><img src="https://github.com/Thinkmill.png?size=64" alt="Thinkmill" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 86 |
+
<a href="https://github.com/AlexKDawson" title="AlexKDawson"><img src="https://github.com/AlexKDawson.png?size=64" alt="AlexKDawson" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 87 |
+
<a href="https://github.com/dimitur2204" title="dimitur2204"><img src="https://github.com/dimitur2204.png?size=64" alt="dimitur2204" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 88 |
+
<a href="https://github.com/indeedeng" title="indeedeng"><img src="https://github.com/indeedeng.png?size=64" alt="indeedeng" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 89 |
+
<a href="https://github.com/flexbox" title="flexbox"><img src="https://github.com/flexbox.png?size=64" alt="flexbox" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 90 |
+
<a href="https://github.com/github" title="github"><img src="https://github.com/github.png?size=64" alt="github" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 91 |
+
<a href="https://github.com/tjfred35" title="tjfred35"><img src="https://github.com/tjfred35.png?size=64" alt="tjfred35" width="48" height="48" style="border-radius:50%; margin: 4px;" /></a>
|
| 92 |
+
</p>
|
| 93 |
+
|
| 94 |
+
- 🎗️ Become a sponsor: https://github.com/sponsors/gpbl
|
SECURITY.md
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# Security Policy
|
| 2 |
+
|
| 3 |
+
## Supported Versions
|
| 4 |
+
|
| 5 |
+
We support security updates for the following versions:
|
| 6 |
+
|
| 7 |
+
| Version | Supported |
|
| 8 |
+
| ------- | ------------------ |
|
| 9 |
+
| 8.9 | :white_check_mark: |
|
| 10 |
+
| < 8.9 | :x: |
|
| 11 |
+
|
| 12 |
+
## Reporting a Vulnerability
|
| 13 |
+
|
| 14 |
+
To report a vulnerability please write a message to `io@gpbl.dev`.
|
biome.json
ADDED
|
@@ -0,0 +1,53 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
|
| 3 |
+
"vcs": {
|
| 4 |
+
"enabled": false,
|
| 5 |
+
"clientKind": "git",
|
| 6 |
+
"useIgnoreFile": false
|
| 7 |
+
},
|
| 8 |
+
"files": {
|
| 9 |
+
"ignoreUnknown": false,
|
| 10 |
+
"includes": [
|
| 11 |
+
"**/*.ts",
|
| 12 |
+
"**/*.tsx",
|
| 13 |
+
"!**/dist",
|
| 14 |
+
"!**/build",
|
| 15 |
+
"!**/versioned_docs",
|
| 16 |
+
"!website/.docusaurus",
|
| 17 |
+
"!website/examples-v8"
|
| 18 |
+
]
|
| 19 |
+
},
|
| 20 |
+
"formatter": {
|
| 21 |
+
"enabled": true,
|
| 22 |
+
"indentStyle": "space"
|
| 23 |
+
},
|
| 24 |
+
"linter": {
|
| 25 |
+
"enabled": true,
|
| 26 |
+
"rules": {
|
| 27 |
+
"recommended": true,
|
| 28 |
+
"correctness": {
|
| 29 |
+
"useUniqueElementIds": "off",
|
| 30 |
+
"noUnusedVariables": {
|
| 31 |
+
"level": "error",
|
| 32 |
+
"options": {
|
| 33 |
+
"ignoreRestSiblings": true
|
| 34 |
+
}
|
| 35 |
+
}
|
| 36 |
+
}
|
| 37 |
+
}
|
| 38 |
+
},
|
| 39 |
+
"javascript": {
|
| 40 |
+
"jsxRuntime": "reactClassic",
|
| 41 |
+
"formatter": {
|
| 42 |
+
"quoteStyle": "double"
|
| 43 |
+
}
|
| 44 |
+
},
|
| 45 |
+
"assist": {
|
| 46 |
+
"enabled": true,
|
| 47 |
+
"actions": {
|
| 48 |
+
"source": {
|
| 49 |
+
"organizeImports": "on"
|
| 50 |
+
}
|
| 51 |
+
}
|
| 52 |
+
}
|
| 53 |
+
}
|
buddhist.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
export * from "./dist/cjs/buddhist/index.d.ts";
|
buddhist.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
|
|
|
|
|
|
|
| 1 |
+
const buddhist = require("./dist/cjs/buddhist/index.js");
|
| 2 |
+
module.exports = buddhist;
|
ethiopic.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
export * from "./dist/cjs/ethiopic/index.d.ts";
|
ethiopic.js
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
/* eslint-disable @typescript-eslint/no-require-imports */
|
| 2 |
+
/* eslint-disable no-undef */
|
| 3 |
+
const ethiopic = require("./dist/cjs/ethiopic/index.js");
|
| 4 |
+
module.exports = ethiopic;
|
examples-app/.gitignore
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# Logs
|
| 2 |
+
logs
|
| 3 |
+
*.log
|
| 4 |
+
npm-debug.log*
|
| 5 |
+
yarn-debug.log*
|
| 6 |
+
yarn-error.log*
|
| 7 |
+
pnpm-debug.log*
|
| 8 |
+
lerna-debug.log*
|
| 9 |
+
|
| 10 |
+
node_modules
|
| 11 |
+
dist
|
| 12 |
+
dist-ssr
|
| 13 |
+
*.local
|
| 14 |
+
|
| 15 |
+
# Editor directories and files
|
| 16 |
+
.vscode/*
|
| 17 |
+
!.vscode/extensions.json
|
| 18 |
+
.idea
|
| 19 |
+
.DS_Store
|
| 20 |
+
*.suo
|
| 21 |
+
*.ntvs*
|
| 22 |
+
*.njsproj
|
| 23 |
+
*.sln
|
| 24 |
+
*.sw?
|
examples-app/README.md
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# Examples app
|
| 2 |
+
|
| 3 |
+
This small app run the examples in DayPicker and can be used to test the library.
|
examples-app/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!doctype html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8" />
|
| 5 |
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
| 6 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 7 |
+
<title>DayPicker Examples</title>
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
<div id="root"></div>
|
| 11 |
+
<script type="module" src="/src/main.tsx"></script>
|
| 12 |
+
</body>
|
| 13 |
+
</html>
|
examples-app/package.json
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"name": "examples-app",
|
| 3 |
+
"private": true,
|
| 4 |
+
"version": "0.0.0",
|
| 5 |
+
"type": "module",
|
| 6 |
+
"scripts": {
|
| 7 |
+
"dev": "vite",
|
| 8 |
+
"build": "tsc -b && vite build",
|
| 9 |
+
"preview": "vite preview"
|
| 10 |
+
},
|
| 11 |
+
"dependencies": {
|
| 12 |
+
"react": "^19.2.1",
|
| 13 |
+
"react-day-picker": "workspace:*",
|
| 14 |
+
"react-dom": "^19.2.1"
|
| 15 |
+
},
|
| 16 |
+
"devDependencies": {
|
| 17 |
+
"@types/react": "^19.2.7",
|
| 18 |
+
"@types/react-dom": "^19.2.3",
|
| 19 |
+
"@vitejs/plugin-react": "^5.1.1",
|
| 20 |
+
"typescript": "^5.9.3",
|
| 21 |
+
"vite": "^7.2.6"
|
| 22 |
+
}
|
| 23 |
+
}
|
examples-app/public/vite.svg
ADDED
|
|
examples-app/src/App.css
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
#root {
|
| 2 |
+
max-width: 1280px;
|
| 3 |
+
margin: 0 auto;
|
| 4 |
+
padding: 2rem;
|
| 5 |
+
/* text-align: center; */
|
| 6 |
+
}
|
| 7 |
+
|
| 8 |
+
.logo {
|
| 9 |
+
height: 6em;
|
| 10 |
+
padding: 1.5em;
|
| 11 |
+
will-change: filter;
|
| 12 |
+
transition: filter 300ms;
|
| 13 |
+
}
|
| 14 |
+
.logo:hover {
|
| 15 |
+
filter: drop-shadow(0 0 2em #646cffaa);
|
| 16 |
+
}
|
| 17 |
+
.logo.react:hover {
|
| 18 |
+
filter: drop-shadow(0 0 2em #61dafbaa);
|
| 19 |
+
}
|
| 20 |
+
|
| 21 |
+
@keyframes logo-spin {
|
| 22 |
+
from {
|
| 23 |
+
transform: rotate(0deg);
|
| 24 |
+
}
|
| 25 |
+
to {
|
| 26 |
+
transform: rotate(360deg);
|
| 27 |
+
}
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
@media (prefers-reduced-motion: no-preference) {
|
| 31 |
+
a:nth-of-type(2) .logo {
|
| 32 |
+
animation: logo-spin infinite 20s linear;
|
| 33 |
+
}
|
| 34 |
+
}
|
| 35 |
+
|
| 36 |
+
@media (prefers-color-scheme: dark) {
|
| 37 |
+
.rdp-root {
|
| 38 |
+
--rdp-accent-background-color: #073845;
|
| 39 |
+
/* --rdp-range_end-color: black; */
|
| 40 |
+
/* --rdp-range_start-color: black; */
|
| 41 |
+
}
|
| 42 |
+
}
|
| 43 |
+
|
| 44 |
+
.card {
|
| 45 |
+
padding: 2em;
|
| 46 |
+
}
|
| 47 |
+
|
| 48 |
+
.read-the-docs {
|
| 49 |
+
color: #888;
|
| 50 |
+
}
|
examples-app/src/App.tsx
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import React, { useEffect, useState } from "react";
|
| 2 |
+
|
| 3 |
+
import * as Examples from "react-day-picker/examples";
|
| 4 |
+
import "react-day-picker/style.css";
|
| 5 |
+
|
| 6 |
+
import "./App.css";
|
| 7 |
+
|
| 8 |
+
const updateQueryString = (key: string, value: string) => {
|
| 9 |
+
const url = new URL(window.location.href);
|
| 10 |
+
const params = new URLSearchParams(url.search);
|
| 11 |
+
params.set(key, value);
|
| 12 |
+
window.history.pushState({}, "", `${url.pathname}?${params.toString()}`);
|
| 13 |
+
};
|
| 14 |
+
|
| 15 |
+
function App() {
|
| 16 |
+
const [example, setExample] = useState("Start");
|
| 17 |
+
|
| 18 |
+
useEffect(() => {
|
| 19 |
+
const params = new URLSearchParams(window.location.search);
|
| 20 |
+
const value = params.get("example");
|
| 21 |
+
if (value) {
|
| 22 |
+
setExample(value);
|
| 23 |
+
}
|
| 24 |
+
}, []);
|
| 25 |
+
|
| 26 |
+
// biome-ignore lint: suspicious/noDynamicNamespaceImportAccess: not a concern
|
| 27 |
+
const Component: React.ComponentType = Examples[
|
| 28 |
+
example as keyof typeof Examples
|
| 29 |
+
] as React.ComponentType;
|
| 30 |
+
return (
|
| 31 |
+
<>
|
| 32 |
+
{/* create a select that allows to choose between the examples */}
|
| 33 |
+
<label>
|
| 34 |
+
Example:{" "}
|
| 35 |
+
<select
|
| 36 |
+
name="example_name"
|
| 37 |
+
onChange={(e) => {
|
| 38 |
+
updateQueryString("example", e.target.value);
|
| 39 |
+
setExample(e.target.value);
|
| 40 |
+
}}
|
| 41 |
+
value={example}
|
| 42 |
+
>
|
| 43 |
+
{Object.keys(Examples).map((name) => (
|
| 44 |
+
<option key={name} value={name}>
|
| 45 |
+
{name}
|
| 46 |
+
</option>
|
| 47 |
+
))}
|
| 48 |
+
</select>
|
| 49 |
+
</label>
|
| 50 |
+
<div>
|
| 51 |
+
<Component />
|
| 52 |
+
</div>
|
| 53 |
+
</>
|
| 54 |
+
);
|
| 55 |
+
}
|
| 56 |
+
|
| 57 |
+
export default App;
|
examples-app/src/assets/react.svg
ADDED
|
|
examples-app/src/index.css
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
:root {
|
| 2 |
+
--ifm-background-color: #242424;
|
| 3 |
+
--ifm-menu-color-background-hover: rgba(255, 255, 255, 0.05);
|
| 4 |
+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
| 5 |
+
line-height: 1.5;
|
| 6 |
+
font-weight: 400;
|
| 7 |
+
|
| 8 |
+
color-scheme: light dark;
|
| 9 |
+
color: rgba(255, 255, 255, 0.87);
|
| 10 |
+
background-color: var(--ifm-background-color);
|
| 11 |
+
|
| 12 |
+
font-synthesis: none;
|
| 13 |
+
text-rendering: optimizeLegibility;
|
| 14 |
+
-webkit-font-smoothing: antialiased;
|
| 15 |
+
-moz-osx-font-smoothing: grayscale;
|
| 16 |
+
}
|
| 17 |
+
|
| 18 |
+
a {
|
| 19 |
+
font-weight: 500;
|
| 20 |
+
color: #646cff;
|
| 21 |
+
text-decoration: inherit;
|
| 22 |
+
}
|
| 23 |
+
a:hover {
|
| 24 |
+
color: #535bf2;
|
| 25 |
+
}
|
| 26 |
+
|
| 27 |
+
body {
|
| 28 |
+
margin: 0;
|
| 29 |
+
/* display: flex;
|
| 30 |
+
place-items: center; */
|
| 31 |
+
min-width: 320px;
|
| 32 |
+
min-height: 100vh;
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
+
h1 {
|
| 36 |
+
font-size: 3.2em;
|
| 37 |
+
line-height: 1.1;
|
| 38 |
+
}
|
| 39 |
+
/*
|
| 40 |
+
button {
|
| 41 |
+
border-radius: 8px;
|
| 42 |
+
border: 1px solid transparent;
|
| 43 |
+
padding: 0.6em 1.2em;
|
| 44 |
+
font-size: 1em;
|
| 45 |
+
font-weight: 500;
|
| 46 |
+
font-family: inherit;
|
| 47 |
+
background-color: #1a1a1a;
|
| 48 |
+
cursor: pointer;
|
| 49 |
+
transition: border-color 0.25s;
|
| 50 |
+
}
|
| 51 |
+
button:hover {
|
| 52 |
+
border-color: #646cff;
|
| 53 |
+
}
|
| 54 |
+
button:focus,
|
| 55 |
+
button:focus-visible {
|
| 56 |
+
outline: 4px auto -webkit-focus-ring-color;
|
| 57 |
+
} */
|
| 58 |
+
|
| 59 |
+
@media (prefers-color-scheme: light) {
|
| 60 |
+
:root {
|
| 61 |
+
--ifm-background-color: #ffffff;
|
| 62 |
+
--ifm-menu-color-background-hover: rgba(0, 0, 0, 0.05);
|
| 63 |
+
color: #213547;
|
| 64 |
+
}
|
| 65 |
+
a:hover {
|
| 66 |
+
color: #747bff;
|
| 67 |
+
}
|
| 68 |
+
button {
|
| 69 |
+
background-color: #f9f9f9;
|
| 70 |
+
}
|
| 71 |
+
}
|
examples-app/src/main.tsx
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import React from "react";
|
| 2 |
+
|
| 3 |
+
import ReactDOM from "react-dom/client";
|
| 4 |
+
|
| 5 |
+
import App from "./App.tsx";
|
| 6 |
+
import "./index.css";
|
| 7 |
+
|
| 8 |
+
ReactDOM.createRoot(document.getElementById("root") ?? document.body).render(
|
| 9 |
+
<React.StrictMode>
|
| 10 |
+
<App />
|
| 11 |
+
</React.StrictMode>,
|
| 12 |
+
);
|
examples-app/src/vite-env.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
/// <reference types="vite/client" />
|
examples-app/tsconfig.app.json
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"compilerOptions": {
|
| 3 |
+
"composite": true,
|
| 4 |
+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
| 5 |
+
"target": "ES2020",
|
| 6 |
+
"useDefineForClassFields": true,
|
| 7 |
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
| 8 |
+
"module": "ESNext",
|
| 9 |
+
"skipLibCheck": true,
|
| 10 |
+
|
| 11 |
+
/* Bundler mode */
|
| 12 |
+
"moduleResolution": "bundler",
|
| 13 |
+
"allowImportingTsExtensions": true,
|
| 14 |
+
"resolveJsonModule": true,
|
| 15 |
+
"isolatedModules": true,
|
| 16 |
+
"moduleDetection": "force",
|
| 17 |
+
"noEmit": true,
|
| 18 |
+
"jsx": "react-jsx",
|
| 19 |
+
|
| 20 |
+
/* Linting */
|
| 21 |
+
"strict": true,
|
| 22 |
+
"noUnusedLocals": false,
|
| 23 |
+
"noUnusedParameters": false,
|
| 24 |
+
"noFallthroughCasesInSwitch": true
|
| 25 |
+
},
|
| 26 |
+
"include": ["src"]
|
| 27 |
+
}
|
examples-app/tsconfig.json
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"files": [],
|
| 3 |
+
"references": [
|
| 4 |
+
{
|
| 5 |
+
"path": "./tsconfig.app.json"
|
| 6 |
+
},
|
| 7 |
+
{
|
| 8 |
+
"path": "./tsconfig.node.json"
|
| 9 |
+
}
|
| 10 |
+
]
|
| 11 |
+
}
|
examples-app/tsconfig.node.json
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
{
|
| 2 |
+
"compilerOptions": {
|
| 3 |
+
"composite": true,
|
| 4 |
+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
| 5 |
+
"skipLibCheck": true,
|
| 6 |
+
"module": "ESNext",
|
| 7 |
+
"moduleResolution": "bundler",
|
| 8 |
+
"allowSyntheticDefaultImports": true,
|
| 9 |
+
"strict": true,
|
| 10 |
+
"noEmit": true
|
| 11 |
+
},
|
| 12 |
+
"include": ["vite.config.ts"]
|
| 13 |
+
}
|
examples-app/vite.config.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import react from "@vitejs/plugin-react";
|
| 2 |
+
import { defineConfig } from "vite";
|
| 3 |
+
|
| 4 |
+
// https://vitejs.dev/config/
|
| 5 |
+
export default defineConfig({
|
| 6 |
+
plugins: [react()],
|
| 7 |
+
});
|
examples/AccessibleDatePicker.tsx
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { format } from "date-fns";
|
| 2 |
+
import React, { useState } from "react";
|
| 3 |
+
import { DayPicker } from "react-day-picker";
|
| 4 |
+
|
| 5 |
+
export function AccessibleDatePicker() {
|
| 6 |
+
const [meetingDate, setMeetingDate] = useState<Date | undefined>(undefined);
|
| 7 |
+
return (
|
| 8 |
+
<DayPicker
|
| 9 |
+
mode="single"
|
| 10 |
+
onSelect={setMeetingDate}
|
| 11 |
+
selected={meetingDate}
|
| 12 |
+
labels={{
|
| 13 |
+
labelDayButton: (date, modifiers) => {
|
| 14 |
+
return modifiers.selected
|
| 15 |
+
? `Selected Meeting Date: ${format(date, "PPP")}`
|
| 16 |
+
: "";
|
| 17 |
+
},
|
| 18 |
+
}}
|
| 19 |
+
footer={
|
| 20 |
+
meetingDate
|
| 21 |
+
? `Meeting date is set to ${format(meetingDate, "PPPP")}`
|
| 22 |
+
: "Please pick a date for the meeting."
|
| 23 |
+
}
|
| 24 |
+
/>
|
| 25 |
+
);
|
| 26 |
+
}
|
examples/Animate.tsx
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import React, { useState } from "react";
|
| 2 |
+
|
| 3 |
+
import { DayPicker } from "react-day-picker";
|
| 4 |
+
|
| 5 |
+
export function Animate() {
|
| 6 |
+
const [selected, setSelected] = useState<Date>();
|
| 7 |
+
|
| 8 |
+
return (
|
| 9 |
+
<DayPicker
|
| 10 |
+
mode="single"
|
| 11 |
+
animate
|
| 12 |
+
selected={selected}
|
| 13 |
+
onSelect={setSelected}
|
| 14 |
+
fixedWeeks
|
| 15 |
+
/>
|
| 16 |
+
);
|
| 17 |
+
}
|
examples/AnimateCSSVars.tsx
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import React from "react";
|
| 2 |
+
|
| 3 |
+
import { DayPicker } from "react-day-picker";
|
| 4 |
+
|
| 5 |
+
export function AnimateCSSVars() {
|
| 6 |
+
return (
|
| 7 |
+
<>
|
| 8 |
+
<style>
|
| 9 |
+
{`
|
| 10 |
+
.custom-animate {
|
| 11 |
+
--rdp-animation_duration: .1s;
|
| 12 |
+
--rdp-animation_timing: ease-in;
|
| 13 |
+
}
|
| 14 |
+
`}
|
| 15 |
+
</style>
|
| 16 |
+
<DayPicker className="custom-animate" animate />
|
| 17 |
+
</>
|
| 18 |
+
);
|
| 19 |
+
}
|
examples/AnimateRange.tsx
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import React, { useState } from "react";
|
| 2 |
+
|
| 3 |
+
import { type DateRange, DayPicker } from "react-day-picker";
|
| 4 |
+
|
| 5 |
+
export function AnimateRange() {
|
| 6 |
+
const [selected, setSelected] = useState<DateRange>();
|
| 7 |
+
|
| 8 |
+
return (
|
| 9 |
+
<DayPicker
|
| 10 |
+
mode="range"
|
| 11 |
+
animate
|
| 12 |
+
selected={selected}
|
| 13 |
+
onSelect={setSelected}
|
| 14 |
+
numberOfMonths={6}
|
| 15 |
+
/>
|
| 16 |
+
);
|
| 17 |
+
}
|
examples/AnimateRtl.tsx
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import { ar } from "date-fns/locale";
|
| 2 |
+
import React, { useState } from "react";
|
| 3 |
+
import { DayPicker } from "react-day-picker";
|
| 4 |
+
import classNames from "react-day-picker/style.module.css";
|
| 5 |
+
|
| 6 |
+
export function AnimateRtl() {
|
| 7 |
+
const [selected, setSelected] = useState<Date>();
|
| 8 |
+
|
| 9 |
+
return (
|
| 10 |
+
<DayPicker
|
| 11 |
+
mode="single"
|
| 12 |
+
locale={ar}
|
| 13 |
+
animate
|
| 14 |
+
dir="rtl"
|
| 15 |
+
selected={selected}
|
| 16 |
+
onSelect={setSelected}
|
| 17 |
+
classNames={classNames}
|
| 18 |
+
/>
|
| 19 |
+
);
|
| 20 |
+
}
|
examples/AsiaSaigonTimezone.test.tsx
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import React from "react";
|
| 2 |
+
|
| 3 |
+
import { render, screen } from "@/test/render";
|
| 4 |
+
import { AsiaSaigonTimezone } from "./AsiaSaigonTimezone";
|
| 5 |
+
|
| 6 |
+
beforeEach(() => {
|
| 7 |
+
render(<AsiaSaigonTimezone />);
|
| 8 |
+
});
|
| 9 |
+
|
| 10 |
+
test("the first row should display 7 days", () => {
|
| 11 |
+
expect(
|
| 12 |
+
screen.getAllByRole("row")[0].querySelectorAll("[role='gridcell']"),
|
| 13 |
+
).toHaveLength(7);
|
| 14 |
+
});
|
examples/AsiaSaigonTimezone.tsx
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
import React from "react";
|
| 2 |
+
|
| 3 |
+
import { DayPicker, TZDate } from "react-day-picker";
|
| 4 |
+
|
| 5 |
+
export function AsiaSaigonTimezone() {
|
| 6 |
+
const timeZone = "Asia/Saigon";
|
| 7 |
+
|
| 8 |
+
return (
|
| 9 |
+
<DayPicker
|
| 10 |
+
defaultMonth={new TZDate(1900, 11, 1, timeZone)}
|
| 11 |
+
timeZone={timeZone}
|
| 12 |
+
showOutsideDays
|
| 13 |
+
fixedWeeks
|
| 14 |
+
noonSafe
|
| 15 |
+
/>
|
| 16 |
+
);
|
| 17 |
+
}
|