diff --git a/README.md b/README.md
index 7e44cd6a4..4856e2cf6 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,12 @@
-# react-date-range
-[](https://www.npmjs.com/package/react-date-range)
-[]()
-[](https://www.npmjs.com/package/react-date-range)
-[](https://github.com/sponsors/hypeserver)
+# @atefbena/react-date-range
+### A fork of the great `react-date-range` package
+[](https://www.npmjs.com/package/@atefbena/react-date-range)
+[]()
+[](https://www.npmjs.com/package/@atefbena/react-date-range)
A date library agnostic React component for choosing dates and date ranges. Uses [date-fns](http://date-fns.org/) for date operations.
-# Notice ⚠️
-This project is currently unmaintained because the original maintainers are busy with other things. It should be pretty stable in it's current state but we won't be updating it in the foreseeable future. **If you are willing to maintain it, please fork and open a pr adding your fork's link to this readme.**
-
### Why should you use `react-date-range`?
- Stateless date operations
@@ -21,19 +18,17 @@ This project is currently unmaintained because the original maintainers are busy
**Live Demo :** [http://hypeserver.github.io/react-date-range](http://hypeserver.github.io/react-date-range)
-
-
## Getting Started
### Installation
```
-npm install --save react-date-range
+yarn add @atefbena/react-date-range
```
This plugin expects `react` and `date-fns` as peerDependencies, It means that you need to install them in your project folder.
```
-npm install --save react date-fns
+yarn add react date-fns
```
## Usage
@@ -41,57 +36,58 @@ npm install --save react date-fns
You need to import skeleton and theme styles first.
```javascript
-import 'react-date-range/dist/styles.css'; // main style file
-import 'react-date-range/dist/theme/default.css'; // theme css file
+import '@atefbena/react-date-range/dist/styles.css'; // main style file
+import '@atefbena/react-date-range/dist/theme/default.css'; // theme css file
```
### `DatePicker`
```javascript
-import { Calendar } from 'react-date-range';
+import { Calendar } from '@atefbena/react-date-range';
-class MyComponent extends Component {
- handleSelect(date){
+function MyComponent() {
+ function handleSelect(date) {
console.log(date); // native Date object
}
- render(){
- return (
-
- )
- }
+
+ return (
+
+ );
}
```
### `DateRangePicker / DateRange`
```javascript
-import { DateRangePicker } from 'react-date-range';
+import { DateRangePicker } from '@atefbena/react-date-range';
-class MyComponent extends Component {
- handleSelect(ranges){
+function MyComponent() {
+ function handleSelect(ranges) {
console.log(ranges);
// {
// selection: {
// startDate: [native Date Object],
// endDate: [native Date Object],
+ // label: [string] // selected range label
// }
// }
}
- render(){
- const selectionRange = {
- startDate: new Date(),
- endDate: new Date(),
- key: 'selection',
- }
- return (
-
- )
+
+
+ const selectionRange = {
+ startDate: new Date(),
+ endDate: new Date(),
+ key: 'selection',
}
+
+ return (
+
+ )
}
```
@@ -209,3 +205,4 @@ If you prefer, you can overwrite calendar sizes with `calendarWidth`/`calendarHe
- Make mobile friendly (integrate tap and swipe actions)
- Add tests
- Improve documentation
+- Migrate to Typescript
diff --git a/package.json b/package.json
index 45d1a59c3..91c2125f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
- "name": "react-date-range",
- "version": "1.4.0",
+ "name": "@atefbena/react-date-range",
+ "version": "1.0.4",
"description": "A React component for choosing dates and date ranges.",
"main": "dist/index.js",
"scripts": {
@@ -29,10 +29,10 @@
"license": "MIT",
"repository": {
"type": "git",
- "url": "http://github.com/hypeserver/react-date-range"
+ "url": "git+ssh://git@github.com/atefBB/react-date-range.git"
},
"bugs": {
- "url": "http://github.com/hypeserver/react-date-range/issues"
+ "url": "http://github.com/atefBB/react-date-range/issues"
},
"browserslist": [
"defaults"
@@ -83,5 +83,7 @@
"style-loader": "^1.0.0",
"url-loader": "^3.0.0",
"webpack": "^4.41.5"
- }
+ },
+ "homepage": "https://github.com/atefBB/react-date-range#readme",
+ "author": "Atef Ben Ali "
}
diff --git a/src/components/DayCell/index.js b/src/components/DayCell/index.js
index 26f12539e..5f25a976d 100644
--- a/src/components/DayCell/index.js
+++ b/src/components/DayCell/index.js
@@ -114,6 +114,7 @@ class DayCell extends Component {
const inRanges = ranges.reduce((result, range) => {
let startDate = range.startDate;
let endDate = range.endDate;
+ if (startDate === null || endDate === null) return result;
if (startDate && endDate && isBefore(endDate, startDate)) {
[startDate, endDate] = [endDate, startDate];
}
@@ -170,10 +171,9 @@ class DayCell extends Component {
{this.renderSelectionPlaceholders()}
{this.renderPreviewPlaceholder()}
- {
- dayContentRenderer?.(this.props.day) ||
+ {dayContentRenderer?.(this.props.day) ? (
{format(this.props.day, this.props.dayDisplayFormat)}
- }
+ ) : null}
);
diff --git a/src/components/DefinedRange/index.js b/src/components/DefinedRange/index.js
index 10ca9f960..b637e53ee 100644
--- a/src/components/DefinedRange/index.js
+++ b/src/components/DefinedRange/index.js
@@ -17,7 +17,12 @@ class DefinedRange extends Component {
handleRangeChange = range => {
const { onChange, ranges, focusedRange } = this.props;
- const selectedRange = ranges[focusedRange[0]];
+ let selectedRange = ranges[focusedRange[0]];
+ selectedRange = {
+ ...selectedRange,
+ ...{ label: range.label }
+ }
+
if (!onChange || !selectedRange) return;
onChange({
[selectedRange.key || `range${focusedRange[0] + 1}`]: { ...selectedRange, ...range },
@@ -83,7 +88,13 @@ class DefinedRange extends Component {
: null,
}}
key={i}
- onClick={() => this.handleRangeChange(staticRange.range(this.props))}
+ onClick={() => {
+ let rangeWithLabel = {
+ ...staticRange.range(this.props),
+ ...{ label: staticRange.label }
+ }
+ this.handleRangeChange(rangeWithLabel)
+ }}
onFocus={() => onPreviewChange && onPreviewChange(staticRange.range(this.props))}
onMouseOver={() =>
onPreviewChange && onPreviewChange(staticRange.range(this.props))