├── .eslintignore ├── .eslintrc.json ├── .github └── workflows │ ├── main.yml │ └── size.yml ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── __mocks__ └── style-mock.ts ├── docs ├── .eslintrc.json ├── .gitignore ├── README.md ├── components │ ├── all-badges.jsx │ ├── all-badges.module.css │ ├── badge.jsx │ ├── demo-container.jsx │ ├── demo-container.module.css │ ├── edit-link.jsx │ ├── example-embed.jsx │ ├── example-embed.module.css │ ├── features.jsx │ ├── features.module.css │ ├── footer.jsx │ ├── footer.module.css │ ├── limited-datepicker-demo.jsx │ ├── limited-datepicker-demo.module.css │ ├── main-picker.jsx │ ├── main-picker.module.css │ ├── time-picker-display-format-demo.jsx │ ├── time-picker-display-format-demo.module.css │ ├── time-picker-minutes-interval-demo.jsx │ ├── time-picker-minutes-interval-demo.module.css │ ├── week-starts-from-demo.jsx │ └── week-starts-from-demo.module.css ├── jsconfig.json ├── next.config.js ├── package.json ├── pages │ ├── _app.jsx │ ├── _document.jsx │ ├── _meta.json │ ├── date-picker.mdx │ ├── examples │ │ ├── _meta.json │ │ └── basic-usage.mdx │ ├── getting-started.mdx │ ├── index.mdx │ ├── theming.mdx │ ├── time-picker.mdx │ └── utility-functions.mdx ├── public │ ├── favicon.ico │ ├── scripts │ │ └── ronaldo-goat.js │ └── vercel.svg ├── styles │ └── globals.css ├── theme.config.js └── yarn.lock ├── example ├── .npmignore ├── index.html ├── index.tsx ├── package.json ├── styles.css ├── tsconfig.json └── yarn.lock ├── jest.config.js ├── package.json ├── src ├── components │ └── select │ │ ├── index.tsx │ │ ├── option.tsx │ │ └── styles.css ├── date-picker │ ├── date-button.tsx │ ├── header.tsx │ ├── index.tsx │ ├── methods.ts │ ├── month-picker.tsx │ ├── styles.css │ ├── types.ts │ └── year-picker.tsx ├── icons │ ├── left-caret.tsx │ ├── right-caret.tsx │ ├── two-dots.tsx │ └── types.ts ├── index.tsx ├── styles.css ├── time-picker │ ├── index.tsx │ ├── methods.ts │ ├── styles.css │ └── types.ts └── util.ts ├── test ├── date-picker │ ├── date-picker.test.tsx │ └── methods.test.ts ├── time-picker │ ├── methods.test.tsx │ └── time-picker.test.tsx └── utility.test.ts ├── tsconfig.json ├── tsdx.config.js └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | docs/ -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": ["plugin:react/recommended", "airbnb"], 7 | "globals": { 8 | "Atomics": "readonly", 9 | "SharedArrayBuffer": "readonly" 10 | }, 11 | "parser": "@typescript-eslint/parser", 12 | "parserOptions": { 13 | "ecmaFeatures": { 14 | "jsx": true 15 | }, 16 | "ecmaVersion": 2021, 17 | "sourceType": "module" 18 | }, 19 | "plugins": ["eslint-plugin-react", "@typescript-eslint/eslint-plugin"] 20 | } 21 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: [push] 3 | jobs: 4 | build: 5 | name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }} 6 | 7 | runs-on: ${{ matrix.os }} 8 | strategy: 9 | matrix: 10 | node: ['12.x'] 11 | os: [ubuntu-latest, windows-latest] 12 | 13 | steps: 14 | - name: Checkout repo 15 | uses: actions/checkout@v2 16 | 17 | - name: Use Node ${{ matrix.node }} 18 | uses: actions/setup-node@v1 19 | with: 20 | node-version: ${{ matrix.node }} 21 | 22 | - name: Install deps and build (with cache) 23 | uses: bahmutov/npm-install@v1 24 | 25 | - name: Lint 26 | run: yarn lint 27 | 28 | - name: Test 29 | run: yarn test --ci --coverage --maxWorkers=2 30 | 31 | - name: Build 32 | run: yarn build 33 | -------------------------------------------------------------------------------- /.github/workflows/size.yml: -------------------------------------------------------------------------------- 1 | name: size 2 | on: [pull_request] 3 | jobs: 4 | size: 5 | runs-on: ubuntu-latest 6 | env: 7 | CI_JOB_NUMBER: 1 8 | steps: 9 | - uses: actions/checkout@v1 10 | - uses: andresz1/size-limit-action@v1 11 | with: 12 | github_token: ${{ secrets.GITHUB_TOKEN }} 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | .cache 5 | dist 6 | dev 7 | .parcel-cache 8 | coverage -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "semi": true, 4 | "singleQuote": true, 5 | "trailingComma": "es5", 6 | "arrowParens": "always", 7 | "endOfLine": "lf", 8 | "jsxSingleQuote": false, 9 | "tabWidth": 2, 10 | "useTabs": false 11 | } 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Siddharth Borderwala 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: -------------------------------------------------------------------------------- 1 |
2 |

sassy-datepicker

3 | 4 | [![npm version](https://badge.fury.io/js/sassy-datepicker.svg)](https://badge.fury.io/js/sassy-datepicker) 5 | [![CI Status](https://github.com/sassy-labs/datepicker/actions/workflows/main.yml/badge.svg)](https://github.com/sassy-labs/datepicker/actions/workflows/main.yml) 6 | [![Maintenance Status](https://badgen.net/badge/maintenance/active/green)](https://github.com/sassy-labs/datepicker#maintenance-status) 7 | [![Bundle Size: Minified + Gzipped](https://img.shields.io/bundlephobia/minzip/sassy-datepicker@0.10.1?color=blue&label=minzip)](https://bundlephobia.com/package/sassy-datepicker) 8 | [![GitHub Issues: Chat With Us](https://badgen.net/badge/issues/chat%20with%20us/blue)](https://github.com/sassy-labs/datepicker/issues) 9 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-blue.svg)](https://github.com/sassy-labs/datepicker/pulls) 10 | 11 | Beautiful, minimal, customizable and accessible date-picker and time-picker for react. 12 | 13 | Sassy DatePicker Snapshot 14 | 15 |
16 | 17 | Why use sassy-datepicker? 18 | 19 | - Beautiful picker 20 | - Smooth and slick transitions 21 | - Simple and Easy to Use 22 | - Fully Customizable 23 | - First Class Accessibility 24 | - Small bundle size 25 | - Extremely Performant 26 | 27 | ## Contents 28 | 29 | - [Contents](#contents) 30 | - [Installation and Usage](#installation-and-usage) 31 | - [Package Installation](#package-installation) 32 | - [Basic Usage](#basic-usage) 33 | - [Documentation](#documentation) 34 | 35 | ## Installation and Usage 36 | 37 | ### Package Installation 38 | 39 | ```sh 40 | yarn add sassy-datepicker 41 | # or 42 | npm install sassy-datepicker 43 | ``` 44 | 45 | ### Basic Usage 46 | 47 | The default export from the library is the `DatePicker` component. 48 | 49 | ```jsx 50 | import { useState } from 'react'; 51 | import DatePicker, { TimePicker } from 'sassy-datepicker'; 52 | import 'sassy-datepicker/dist/styles.css'; 53 | 54 | function DateInput() { 55 | const [date, setDate] = useState(new Date()); 56 | 57 | const onChange = newDate => { 58 | console.log(`New date selected - ${newDate.toString()}`); 59 | setDate(newDate); 60 | }; 61 | 62 | return ; 63 | } 64 | 65 | function TimeInput() { 66 | const [time, setTime] = useState({ hours: 15, minutes: 30 }); 67 | 68 | const onChange = newTime => { 69 | console.log(`New time selected - ${newTime}`); 70 | setTime(newTime); 71 | }; 72 | 73 | return ; 74 | } 75 | ``` 76 | 77 | ## Documentation 78 | 79 | To view detailed documentation, go to [https://sassy-datepicker.netlify.app](https://sassy-datepicker.netlify.app) 80 | 81 |
82 | Powered By Netlify Netlify 83 |
84 | -------------------------------------------------------------------------------- /__mocks__/style-mock.ts: -------------------------------------------------------------------------------- 1 | export default ''; 2 | -------------------------------------------------------------------------------- /docs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals", 3 | "rules": { 4 | "react/jsx-props-no-spreading": "off", 5 | "react/function-component-definition": "off", 6 | "jsx-a11y/label-has-associated-control": "off", 7 | "comma-dangle": "off", 8 | "react/jsx-one-expression-per-line": "off", 9 | "implicit-arrow-linebreak": "off", 10 | "arrow-body-style": "off", 11 | "object-curly-newline": "off" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 16 | 17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 18 | 19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 20 | 21 | ## Learn More 22 | 23 | To learn more about Next.js, take a look at the following resources: 24 | 25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 27 | 28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 29 | 30 | ## Deploy on Vercel 31 | 32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 33 | 34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 35 | -------------------------------------------------------------------------------- /docs/components/all-badges.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Badge from './badge'; 3 | import styles from './all-badges.module.css'; 4 | 5 | const AllBadges = () => ( 6 |
7 | 12 | 17 | 22 | 27 | 32 | 37 |
38 | ); 39 | 40 | export default AllBadges; 41 | -------------------------------------------------------------------------------- /docs/components/all-badges.module.css: -------------------------------------------------------------------------------- 1 | .badges { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | margin-top: 1rem; 6 | } 7 | 8 | @media screen and (max-width: 42em) { 9 | .badges { 10 | display: none; 11 | } 12 | } 13 | 14 | .badges > a:not(:last-of-type) { 15 | margin-right: 0.25rem; 16 | } 17 | 18 | .badges > a { 19 | display: inline-block; 20 | } 21 | -------------------------------------------------------------------------------- /docs/components/badge.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Badge = ({ href, src, alt }) => ( 4 | 5 | {alt} 6 | 7 | ); 8 | 9 | export default Badge; 10 | -------------------------------------------------------------------------------- /docs/components/demo-container.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styles from './demo-container.module.css'; 3 | 4 | const DemoContainer = ({ children }) => ( 5 |
{children}
6 | ); 7 | 8 | export default DemoContainer; 9 | -------------------------------------------------------------------------------- /docs/components/demo-container.module.css: -------------------------------------------------------------------------------- 1 | .demo-container { 2 | width: 100%; 3 | border: none; 4 | border-radius: 1rem; 5 | padding: 2rem; 6 | background-color: var(--code-bg-color); 7 | margin-top: 2rem; 8 | } 9 | -------------------------------------------------------------------------------- /docs/components/edit-link.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const EditLink = ({ className, filePath, children }) => { 4 | const editUrl = `https://github.com/sassy-labs/datepicker/tree/main/docs/${filePath}`; 5 | 6 | return ( 7 | 8 | {children} 9 | 10 | ); 11 | }; 12 | 13 | export default EditLink; 14 | -------------------------------------------------------------------------------- /docs/components/example-embed.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import { ArrowsOutSimple } from 'phosphor-react'; 3 | import styles from './example-embed.module.css'; 4 | 5 | const ExampleEmbed = ({ src, title }) => { 6 | const ref = useRef(null); 7 | 8 | const handleFullScreenRequest = () => { 9 | if (!ref.current) return; 10 | ref.current.requestFullscreen(); 11 | }; 12 | 13 | return ( 14 |
15 | 25 | 33 |