Skip to content

Commit ebced8a

Browse files
onesineonesine
authored
Merge branch 'master' into patch-1
2 parents 5bc0a31 + bf063fe commit ebced8a

22 files changed

+656
-339
lines changed

‎.eslintignore

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
# Folders
22
dist/
33
assets/
4-
pages/
54
styles/
65

76
# Files

‎.husky/pre-commit

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
npx lint-staged

‎.husky/pre-push

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/usr/bin/env sh
2+
. "$(dirname -- "$0")/_/husky.sh"
3+
4+
#npm run test

‎.npmignore

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ pages
99
styles
1010
.next
1111
.rollup.cache
12+
.husky
1213
## Files
1314
babel.config.json
1415
tsconfig.json

‎README.md

+51-42
Original file line numberDiff line numberDiff line change
@@ -15,48 +15,53 @@
1515
</div>
1616

1717
## Contents
18-
* [Features](#features)
19-
* [Documentation](#documentation)
20-
* [Installation](#installation)
21-
* [Simple Usage](#simple-usage)
22-
* [Theming Options](#theming-options)
23-
* [Playground](#playground)
24-
* [Contributing](#contributing)
25-
26-
## Features
27-
- ✅ Theming options
28-
- ✅ Dark mode
29-
- ✅ Single Date
30-
- ✅ Single date use Range
31-
- ✅ Shortcuts
32-
- ✅ TypeScript support
33-
- ✅ Localization(i18n)
34-
- ✅ Date formatting
35-
- ✅ Disable specific dates
36-
- ✅ Minimum Date and Maximum Date
37-
- ⬜ Custom shortcuts
18+
19+
- [Features](#features)
20+
- [Documentation](#documentation)
21+
- [Installation](#installation)
22+
- [Simple Usage](#simple-usage)
23+
- [Theming Options](#theming-options)
24+
- [Playground](#playground)
25+
- [Contributing](#contributing)
26+
27+
## Features
28+
29+
- ✅ Theming options
30+
- ✅ Dark mode
31+
- ✅ Single Date
32+
- ✅ Single date use Range
33+
- ✅ Shortcuts
34+
- ✅ TypeScript support
35+
- ✅ Localization(i18n)
36+
- ✅ Date formatting
37+
- ✅ Disable specific dates
38+
- ✅ Minimum Date and Maximum Date
39+
- ✅ Custom shortcuts
3840

3941
## Documentation
4042

4143
Go to [full documentation](https://react-tailwindcss-datepicker.vercel.app/)
4244

4345
## Installation
4446

45-
⚠️ React Tailwindcss Datepicker uses Tailwind CSS 3 (with the [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin) & [Dayjs](https://day.js.org/en/) under the hood to work.
47+
⚠️ React Tailwindcss Datepicker uses Tailwind CSS 3 (with the
48+
[@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms) plugin) &
49+
[Dayjs](https://day.js.org/en/) under the hood to work.
4650

4751
### Install via npm
4852

4953
```
50-
npm install react-tailwindcss-datepicker
54+
npm install react-tailwindcss-datepicker
5155
```
5256

5357
### Install via yarn
5458

5559
```
56-
yarn add react-tailwindcss-datepicker
60+
yarn add react-tailwindcss-datepicker
5761
```
5862

5963
Make sure you have installed the peer dependencies as well with the below versions.
64+
6065
```
6166
"dayjs": "^1.11.6",
6267
"react": "^17.0.2 || ^18.2.0"
@@ -65,40 +70,41 @@ Make sure you have installed the peer dependencies as well with the below versio
6570
## Simple Usage
6671

6772
#### Tailwindcss Configuration
73+
6874
Add the datepicker to your tailwind configuration using this code
6975

7076
```javascript
7177
// in your tailwind.config.js
7278
module.exports = {
7379
// ...
74-
content: ["./src/**/*.{js,jsx,ts,tsx}", "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"],
80+
content: [
81+
"./src/**/*.{js,jsx,ts,tsx}",
82+
"./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"
83+
]
7584
// ...
76-
}
85+
};
7786
```
7887

7988
Then use react-tailwindcss-select in your app:
8089

8190
```jsx
82-
import React, {useState} from "react";
91+
import React, { useState } from "react";
8392
import Datepicker from "react-tailwindcss-datepicker";
8493

8594
const App = () => {
8695
const [value, setValue] = useState({
8796
startDate: new Date(),
8897
endDate: new Date().setMonth(11)
8998
});
90-
91-
const handleValueChange = (newValue) => {
99+
100+
const handleValueChange = newValue => {
92101
console.log("newValue:", newValue);
93102
setValue(newValue);
94-
}
95-
103+
};
104+
96105
return (
97106
<div>
98-
<Datepicker
99-
value={value}
100-
onChange={handleValueChange}
101-
/>
107+
<Datepicker value={value} onChange={handleValueChange} />
102108
</div>
103109
);
104110
};
@@ -126,8 +132,8 @@ You can find the demo at [here](https://react-tailwindcss-datepicker.vercel.app/
126132

127133
> **Info**
128134
>
129-
> 👉 To discover the other possibilities offered by this library, you can consult the [full documentation](https://react-tailwindcss-datepicker.vercel.app/).
130-
135+
> 👉 To discover the other possibilities offered by this library, you can consult the
136+
> [full documentation](https://react-tailwindcss-datepicker.vercel.app/).
131137
132138
## PlayGround
133139

@@ -146,19 +152,22 @@ Open a browser and navigate to `http://localhost:8888`
146152

147153
## Contributing
148154

149-
See [CONTRIBUTING.md](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/CONTRIBUTING.md)
155+
See
156+
[CONTRIBUTING.md](https://github.com/onesine/react-tailwindcss-datepicker/blob/master/CONTRIBUTING.md)
150157

151158
## Official Documentation repo
159+
152160
[https://github.com/onesine/react-tailwindcss-datepicker-doc](https://github.com/onesine/react-tailwindcss-datepicker-doc)
153161

154162
## Thanks to
155-
- [Litepie Datepicker](https://litepie.com/)
156-
- [Vue Tailwind Datepicker](https://vue-tailwind-datepicker.com/)
157-
- [React](https://reactjs.org/)
158-
- [Tailwind CSS](https://tailwindcss.com/)
159-
- [dayjs](https://day.js.org/)
163+
164+
- [Vue Tailwind Datepicker](https://vue-tailwind-datepicker.com/)
165+
- [React](https://reactjs.org/)
166+
- [Tailwind CSS](https://tailwindcss.com/)
167+
- [dayjs](https://day.js.org/)
160168

161169
I thank you in advance for your contribution to this project.
162170

163171
## License
172+
164173
[MIT](LICENSE) Licensed. Copyright (c) Lewhe Onesine 2022.

‎package.json

+19-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-tailwindcss-datepicker",
3-
"version": "1.5.1",
3+
"version": "1.6.6",
44
"description": "A modern React Datepicker using Tailwind CSS 3",
55
"main": "dist/index.cjs.js",
66
"module": "dist/index.esm.js",
@@ -10,14 +10,16 @@
1010
"scripts": {
1111
"watch": "rollup -c -w",
1212
"clean": "rm -rf dist",
13-
"lint": "eslint .",
14-
"lint:fix": "eslint --fix .",
13+
"lint": "eslint --ignore-path .gitignore .",
14+
"lint:fix": "eslint --ignore-path .gitignore --fix .",
1515
"pret": "prettier -c .",
16-
"pret:fix": "prettier -w .",
17-
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
18-
"build": "npm run pret && npm run lint && npm run clean && rollup -c",
16+
"pret:fix": "prettier --ignore-path .gitignore --config ./.prettierrc --write './**/*.{js,jsx,ts,tsx,css,md,json}'",
17+
"code-style": "npm run pret && npm run lint",
18+
"code-style:fix": "npm run pret:fix && npm run pret:fix",
19+
"build": "npm run code-style && npm run clean && rollup -c",
1920
"pub": "npm run build && npm publish",
20-
"dev": "next dev -p 8888"
21+
"dev": "next dev -p 8888",
22+
"prepare": "husky install"
2123
},
2224
"repository": {
2325
"type": "git",
@@ -57,6 +59,8 @@
5759
"eslint-plugin-prettier": "^4.2.1",
5860
"eslint-plugin-react": "^7.31.11",
5961
"eslint-plugin-react-hooks": "^4.6.0",
62+
"husky": "^8.0.0",
63+
"lint-staged": "^13.2.3",
6064
"next": "^13.1.1",
6165
"postcss": "^8.4.19",
6266
"prettier": "^2.8.0",
@@ -66,5 +70,13 @@
6670
"tailwindcss": "^3.2.4",
6771
"tslib": "^2.4.0",
6872
"typescript": "^4.8.4"
73+
},
74+
"lint-staged": {
75+
"*.{ts,tsx}": [
76+
"npm run lint"
77+
],
78+
"*.{ts,tsx,css,scss,md}": [
79+
"npm run pret:fix"
80+
]
6981
}
7082
}

‎pages/index.js

+48-10
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import Datepicker from "../src";
2-
import { useState } from "react";
3-
import { COLORS } from "../src/constants";
41
import dayjs from "dayjs";
52
import Head from "next/head";
3+
import { useState } from "react";
4+
5+
import Datepicker from "../src";
6+
import { COLORS, DATE_LOOKING_OPTIONS } from "../src/constants";
67

78
export default function Playground() {
89
const [value, setValue] = useState({
@@ -13,7 +14,6 @@ export default function Playground() {
1314
const [useRange, setUseRange] = useState(true);
1415
const [showFooter, setShowFooter] = useState(false);
1516
const [showShortcuts, setShowShortcuts] = useState(false);
16-
const [configs, setConfigs] = useState(null);
1717
const [asSingle, setAsSingle] = useState(false);
1818
const [placeholder, setPlaceholder] = useState("");
1919
const [separator, setSeparator] = useState("~");
@@ -26,6 +26,7 @@ export default function Playground() {
2626
const [readOnly, setReadOnly] = useState(false);
2727
const [minDate, setMinDate] = useState("");
2828
const [maxDate, setMaxDate] = useState("");
29+
const [dateLooking, setDateLooking] = useState(true);
2930
const [disabledDates, setDisabledDates] = useState([]);
3031
const [newDisabledDates, setNewDisabledDates] = useState({ startDate: "", endDate: "" });
3132
const [startFrom, setStartFrom] = useState("2023-03-01");
@@ -62,7 +63,28 @@ export default function Playground() {
6263
yesterday: "YText",
6364
past: period => `P-${period} Text`,
6465
currentMonth: "CMText",
65-
pastMonth: "PMText"
66+
pastMonth: "PMText",
67+
last3Days: {
68+
text: "Last 3 days",
69+
period: {
70+
start: new Date(new Date().setDate(new Date().getDate() - 3)),
71+
end: new Date()
72+
}
73+
},
74+
thisDay: {
75+
text: "This Day",
76+
period: {
77+
start: new Date(),
78+
end: new Date()
79+
}
80+
},
81+
next8Days: {
82+
text: "Next 8 days",
83+
period: {
84+
start: new Date(),
85+
end: new Date(new Date().setDate(new Date().getDate() + 8))
86+
}
87+
}
6688
},
6789
footer: {
6890
cancel: "CText",
@@ -78,21 +100,19 @@ export default function Playground() {
78100
i18n={i18n}
79101
disabled={disabled}
80102
inputClassName={inputClassName}
81-
/**
82-
* `twMerge` Test
83-
*/
84-
// inputClassName={twMerge(inputClassName, 'dark:bg-white')}
85103
containerClassName={containerClassName}
86104
toggleClassName={toggleClassName}
87105
displayFormat={displayFormat}
88106
readOnly={readOnly}
89107
minDate={minDate}
90108
maxDate={maxDate}
109+
dateLooking={dateLooking}
91110
disabledDates={disabledDates}
92111
startWeekOn={startWeekOn}
93112
toggleIcon={isEmpty => {
94113
return isEmpty ? "Select Date" : "Clear";
95114
}}
115+
popoverDirection={"down"}
96116
// classNames={{
97117
// input: ({ disabled, readOnly, className }) => {
98118
// if (disabled) {
@@ -109,7 +129,6 @@ export default function Playground() {
109129
// }}
110130
/>
111131
</div>
112-
113132
<div className="py-4 max-w-3xl mx-auto flex flex-row flex-wrap">
114133
<div className="w-full sm:w-1/3 pr-2 flex flex-row flex-wrap sm:flex-col">
115134
<div className="mb-2 w-1/2 sm:w-full">
@@ -282,6 +301,25 @@ export default function Playground() {
282301
}}
283302
/>
284303
</div>
304+
<div className="mb-2">
305+
<label className="block" htmlFor="dateLooking">
306+
Date Looking
307+
</label>
308+
<select
309+
className="rounded block w-full border-gray-200 border px-4 py-2"
310+
id="dateLooking"
311+
value={dateLooking}
312+
onChange={e => {
313+
setDateLooking(e.target.value);
314+
}}
315+
>
316+
{DATE_LOOKING_OPTIONS.map((option, i) => (
317+
<option key={i} value={option}>
318+
{option}
319+
</option>
320+
))}
321+
</select>
322+
</div>
285323
</div>
286324
<div className="w-full sm:w-1/3 pr-2 flex flex-col">
287325
<div className="mb-2">

0 commit comments

Comments
 (0)