Merge branch 'develop'

Author: shahabyazdi

README.md

@@ -161,7 +161,7 @@ export default function Example() {
 | fixRelativePosition  |                                            Boolean                                            |             false              | DatePicker                          |
 | offsetY              |                                            Number                                             |               0                | DatePicker                          |
 | offsetX              |                                            Number                                             |               0                | DatePicker                          |
-| onPositionChange     |                                           Function                                            |               0                | DatePicker                          |
+| onPositionChange     |                                           Function                                            |                                | DatePicker                          |
 
 ## Calendars
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-multi-date-picker",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "a simple React datepicker component for work with gregorian, persian, arabic and indian calendars",
   "main": "./build/index.js",
   "types": "index.d.ts",

src/components/day_picker/day_picker.js

@@ -185,7 +185,7 @@ export default function DayPicker({
       if (range && !disabled && mustDisplaySelectedDate) {
         if (selectedDate.length === 1) {
           if (isSameDate(date, selectedDate[0])) names.push("rmdp-range")
-        } else {
+        } else if (selectedDate.length === 2) {
           let { year, month, day } = date,
             first = selectedDate[0],
             second = selectedDate[1]

styles/backgrounds/bg-brown.css

@@ -2,7 +2,7 @@
 .bg-brown .rmdp-month-picker,
 .bg-brown .rmdp-year-picker,
 .bg-brown .rmdp-time-picker div input,
-.bg-brown.ep-arrow::after {
+.rmdp-container .bg-brown.ep-arrow::after {
   background-color: #5d4037;
   color: #d7ccc8;
 }
@@ -22,18 +22,18 @@
   color: #f5f5f5;
 }
 
-.bg-brown.ep-arrow[direction="top"] {
+.rmdp-container .bg-brown.ep-arrow[direction="top"] {
   border-bottom: 1px solid #5d4037;
 }
 
-.bg-brown.ep-arrow[direction="left"] {
+.rmdp-container .bg-brown.ep-arrow[direction="left"] {
   border-right: 1px solid #5d4037;
 }
 
-.bg-brown.ep-arrow[direction="right"] {
+.rmdp-container .bg-brown.ep-arrow[direction="right"] {
   border-left: 1px solid #5d4037;
 }
 
-.bg-brown.ep-arrow[direction="bottom"] {
+.rmdp-container .bg-brown.ep-arrow[direction="bottom"] {
   border-top: 1px solid #5d4037;
 }

styles/backgrounds/bg-dark.css

@@ -2,7 +2,7 @@
 .bg-dark .rmdp-month-picker,
 .bg-dark .rmdp-year-picker,
 .bg-dark .rmdp-time-picker div input,
-.bg-dark.ep-arrow::after {
+.rmdp-container .bg-dark.ep-arrow::after {
   background-color: #312f2f;
   color: #c4c7ca;
 }
@@ -22,18 +22,18 @@
   color: #f5f5f5;
 }
 
-.bg-dark.ep-arrow[direction="top"] {
+.rmdp-container .bg-dark.ep-arrow[direction="top"] {
   border-bottom: 1px solid #312f2f;
 }
 
-.bg-dark.ep-arrow[direction="left"] {
+.rmdp-container .bg-dark.ep-arrow[direction="left"] {
   border-right: 1px solid #312f2f;
 }
 
-.bg-dark.ep-arrow[direction="right"] {
+.rmdp-container .bg-dark.ep-arrow[direction="right"] {
   border-left: 1px solid #312f2f;
 }
 
-.bg-dark.ep-arrow[direction="bottom"] {
+.rmdp-container .bg-dark.ep-arrow[direction="bottom"] {
   border-top: 1px solid #312f2f;
 }

styles/backgrounds/bg-gray.css

@@ -1,7 +1,7 @@
 .bg-gray.rmdp-wrapper,
 .bg-gray .rmdp-month-picker,
 .bg-gray .rmdp-year-picker,
-.bg-gray.ep-arrow::after {
+.rmdp-container .bg-gray.ep-arrow::after {
   background-color: #b1abab;
   color: white;
 }
@@ -22,18 +22,18 @@
   color: white;
 }
 
-.bg-gray.ep-arrow[direction="top"] {
+.rmdp-container .bg-gray.ep-arrow[direction="top"] {
   border-bottom: 1px solid #b1abab;
 }
 
-.bg-gray.ep-arrow[direction="left"] {
+.rmdp-container .bg-gray.ep-arrow[direction="left"] {
   border-right: 1px solid #b1abab;
 }
 
-.bg-gray.ep-arrow[direction="right"] {
+.rmdp-container .bg-gray.ep-arrow[direction="right"] {
   border-left: 1px solid #b1abab;
 }
 
-.bg-gray.ep-arrow[direction="bottom"] {
+.rmdp-container .bg-gray.ep-arrow[direction="bottom"] {
   border-top: 1px solid #b1abab;
 }