Merge pull request #182 from shahabyazdi/develop

v4.0.0

README.md

@@ -1,7 +1,7 @@
 # DatePicker
 
 Simple React datepicker component for working with `gregorian`, `persian`, `arabic` and `indian` calendars
-with the ability to select the date in `single`, `multiple` and `range` modes.
+with the ability to select the date in `single`, `multiple`, `range` and `multiple range` modes.
 
 <div align="center">
   <img src="https://github.com/shahabyazdi/react-multi-date-picker/blob/master/screenshot/screenshot.jpg?raw=true" alt="date picker"/>
@@ -26,7 +26,7 @@ Ability to further customize the calendar and datepicker by adding one or more p
 ## Installation
 
 ```code
-npm install --save react-multi-date-picker
+npm i react-multi-date-picker
 ```
 
 ## Demo
@@ -205,18 +205,6 @@ export default function Example() {
           <td style="text-align:center"></td>
           <td>both</td>
         </tr>
-        <tr>
-          <td>onOpen</td>
-          <td style="text-align:center">Function</td>
-          <td style="text-align:center"></td>
-          <td>DatePicker</td>
-        </tr>
-        <tr>
-          <td>onClose</td>
-          <td style="text-align:center">Function</td>
-          <td style="text-align:center"></td>
-          <td>DatePicker</td>
-        </tr>
         <tr>
           <td>onPropsChange</td>
           <td style="text-align:center">Function</td>
@@ -241,12 +229,6 @@ export default function Example() {
           <td style="text-align:center"></td>
           <td>both</td>
         </tr>
-        <tr>
-          <td>onPositionChange</td>
-          <td style="text-align:center">Function</td>
-          <td style="text-align:center"></td>
-          <td>DatePicker</td>
-        </tr>
         <tr>
           <td>digits</td>
           <td style="text-align:center">Array</td>
@@ -415,28 +397,76 @@ export default function Example() {
           <td style="text-align:center">false</td>
           <td>both</td>
         </tr>
-         <tr>
+        <tr>
           <td>rangeHover</td>
           <td style="text-align:center">Boolean</td>
           <td style="text-align:center">false</td>
           <td>both</td>
         </tr>
         <tr>
-          <td>containerClassName</td>
+          <td>monthYearSeparator</td>
           <td style="text-align:center">String</td>
+          <td style="text-align:center">"," for LTR locales, "،" for RTL locales</td>
+          <td>both</td>
+        </tr>
+        <tr>
+          <td>formatMonth</td>
+          <td style="text-align:center">Function</td>
+          <td style="text-align:center">undefined</td>
+          <td>both</td>
+        </tr>
+        <tr>
+          <td>formatYear</td>
+          <td style="text-align:center">Function</td>
+          <td style="text-align:center">undefined</td>
+          <td>both</td>
+        </tr>
+        <tr>
+          <td>highlightToday</td>
+          <td style="text-align:center">Boolean</td>
+          <td style="text-align:center">true</td>
+          <td>both</td>
+        </tr>
+        <tr>
+          <td>style</td>
+          <td style="text-align:center">React.CSSProperties</td>
+          <td style="text-align:center">{}</td>
+          <td>both</td>
+        </tr>
+        <tr>
+          <td>headerOrder</td>
+          <td style="text-align:center">Array</td>
+          <td style="text-align:center">["LEFT_BUTTON", "MONTH_YEAR", "RIGHT_BUTTON"]</td>
+          <td>both</td>
+        </tr>
+        <tr>
+          <td>onOpen</td>
+          <td style="text-align:center">Function</td>
           <td style="text-align:center"></td>
           <td>DatePicker</td>
         </tr>
         <tr>
-          <td>arrowClassName</td>
+          <td>onClose</td>
+          <td style="text-align:center">Function</td>
+          <td style="text-align:center"></td>
+          <td>DatePicker</td>
+        </tr>
+        <tr>
+          <td>onPositionChange</td>
+          <td style="text-align:center">Function</td>
+          <td style="text-align:center"></td>
+          <td>DatePicker</td>
+        </tr>
+        <tr>
+          <td>containerClassName</td>
           <td style="text-align:center">String</td>
-          <td style="text-align:center">0</td>
+          <td style="text-align:center"></td>
           <td>DatePicker</td>
         </tr>
         <tr>
-          <td>style</td>
-          <td style="text-align:center">React.CSSProperties</td>
-          <td style="text-align:center">{}</td>
+          <td>arrowClassName</td>
+          <td style="text-align:center">String</td>
+          <td style="text-align:center">0</td>
           <td>DatePicker</td>
         </tr>
         <tr>
@@ -595,6 +625,18 @@ export default function Example() {
           <td style="text-align:center">[]</td>
           <td>DatePicker</td>
         </tr>
+        <tr>
+          <td>dateSeparator</td>
+          <td style="text-align:center"> string</td>
+          <td style="text-align:center">'~' in range mode, ',' in multiple mode</td>
+          <td>DatePicker</td>
+        </tr>
+        <tr>
+          <td>multipleRangeSeparator</td>
+          <td style="text-align:center"> string</td>
+          <td style="text-align:center">','</td>
+          <td>DatePicker</td>
+        </tr>
       </tbody>
     </table>
 
@@ -620,14 +662,22 @@ Click [here](https://shahabyazdi.github.io/react-multi-date-picker/calendars) to
       <td>/calendars/indian</td>
     </tr>
     <tr>
-      <th rowspan="4">Locales</th>
+      <th rowspan="5">Locales</th>
       <th>English</th>
       <td>/locales/gregorian_en</td>
       <td>/locales/persian_en</td>
       <td>/locales/persian_en</td>
       <td>/locales/arabic_en</td>
       <td>/locales/indian_en</td>
     </tr>
+    <tr>
+      <th>Portuguese - BRAZIL</th>
+      <td>/locales/gregorian_pt_br</td>
+      <td>-</td>
+      <td>-</td>
+      <td>-</td>
+      <td>-</td>
+    </tr>
     <tr>
       <th>Farsi</th>
       <td>/locales/gregorian_fa</td>

changelog.md

@@ -1,17 +1,33 @@
-# 3.3.1
+# 4.0.0
 
-- Removed placeholder from input icon value. [#130](https://github.com/shahabyazdi/react-multi-date-picker/issues/130)
-- mobileButtons added to props
-- Dependencies updated. (React 18.2.0 and ...)
+- multiple range picker.
+- custom mobile labels bug fixed in default locale.
+- monthYearSeparator added. [#98-1](https://github.com/shahabyazdi/react-multi-date-picker/issues/98#issue-1127212098)
+- formatMonth & formatYear added [#98-2](https://github.com/shahabyazdi/react-multi-date-picker/issues/98#issuecomment-1110705026)
+- in datepicker onChange method has (date, {validatedValue, input, isTyping}) arguments for validations.
+- highlightToday added. [#145](https://github.com/shahabyazdi/react-multi-date-picker/issues/145)
+- dateSeparator added.
+- input is now editable in multiple & range mode. [#147](https://github.com/shahabyazdi/react-multi-date-picker/issues/147)
+- multipleRangeSeparator added.
+- allow users to change the order of the header items by headerOrder prop.
+- CustomComponentProps type exported for typescript. [#175](https://github.com/shahabyazdi/react-multi-date-picker/issues/175)
+- Bug in timepicker if number keeps being pressed fixed. [#155](https://github.com/shahabyazdi/react-multi-date-picker/issues/155)
+- The Calendar component accepts the HTMLDivElement props along with its own props.
 
-# 3.3.2
+# 3.3.4
 
-- rangeHover added. [#133](https://github.com/shahabyazdi/react-multi-date-picker/issues/133)
+- missed rangeHover prop added to index.d.ts.
 
 # 3.3.3
 
-- range hover effect added in onlyYearPicker and onlyMonthPicker
+- range hover effect added in onlyYearPicker and onlyMonthPicker.
 
-# 3.3.4
+# 3.3.2
+
+- rangeHover added. [#133](https://github.com/shahabyazdi/react-multi-date-picker/issues/133)
 
-- missed rangeHover prop added to index.d.ts
+# 3.3.1
+
+- Removed placeholder from input icon value. [#130](https://github.com/shahabyazdi/react-multi-date-picker/issues/130)
+- mobileButtons added to props.
+- Dependencies updated. (React 18.2.0 and ...)

index.d.ts

@@ -16,7 +16,24 @@ declare module "react-multi-date-picker" {
   export type FunctionalPlugin = { type: string; fn: Function };
   export type Plugin = React.ReactElement | FunctionalPlugin;
 
-  export interface CalendarProps {
+  export type HeaderItem =
+    | "MONTH_YEAR"
+    | "YEAR_MONTH"
+    | "LEFT_BUTTON"
+    | "RIGHT_BUTTON";
+
+  export type CustomComponentProps = {
+    value?: string;
+    openCalendar?: () => void;
+    onFocus?: () => void;
+    handleValueChange?: (e: React.ChangeEvent) => void;
+    onChange?: (e: React.ChangeEvent) => void;
+    locale?: Locale;
+    separator?: string;
+  };
+
+  export interface CalendarProps
+    extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     ref?: React.MutableRefObject<any>;
     /**
      * @types Date | string | number | DateObject
@@ -167,7 +184,7 @@ declare module "react-multi-date-picker" {
      *  }}
      * />
      */
-    onChange?(selectedDates: DateObject | DateObject[] | null): void;
+    onChange?(selectedDates: DateObject | DateObject[] | null): void | false;
     showOtherDays?: boolean;
     /**
      * the date you set in datepicker as value must be equal or bigger than min date.
@@ -308,6 +325,11 @@ declare module "react-multi-date-picker" {
     weekNumber?: string;
     weekPicker?: boolean;
     rangeHover?: boolean;
+    monthYearSeparator?: string;
+    formatMonth?: (month: string, year: string) => string;
+    formatYear?: (year: string, month: string) => string;
+    highlightToday?: boolean;
+    headerOrder?: Array<HeaderItem>;
   }
 
   export interface DatePickerProps {
@@ -353,11 +375,18 @@ declare module "react-multi-date-picker" {
     /**
      * @example
      * <DatePicker
-     *   type="custom"
      *   render={<CustomComponent/>}
      * />
      */
-    render?: React.ReactElement | Function;
+    render?:
+      | React.ReactElement<CustomComponentProps>
+      | ((
+          value: string,
+          openCalendar: () => void,
+          handleValueChange: (e: React.ChangeEvent) => void,
+          locale: Locale,
+          separator: string
+        ) => React.ReactNode);
     /**
      * This feature only affects on `input` in `single` mode
      *
@@ -467,6 +496,15 @@ declare module "react-multi-date-picker" {
     mobileButtons?: Array<
       HTMLAttributes<HTMLButtonElement> & { label: string }
     >;
+    onChange?(
+      selectedDates: DateObject | DateObject[] | null,
+      validatedValue: string | Array<string>,
+      input: HTMLElement,
+      isTyping: boolean
+    ): void | false;
+    dateSeparator?: boolean;
+    multipleRangeSeparator?: boolean;
+    type?: string;
   }
 
   export { DateObject };

package.json

@@ -1,10 +1,11 @@
 {
   "name": "react-multi-date-picker",
-  "version": "3.3.4",
-  "description": "a simple React datepicker component for working with gregorian, persian, arabic and indian calendars with the ability to select the date by single, multiple and range pickers.",
+  "version": "4.0.0",
+  "description": "A simple React datepicker component for working with gregorian, persian, arabic and indian calendars with the ability to select the date by single, multiple, range and multiple range pickers.",
   "main": "./build/index.js",
   "types": "index.d.ts",
   "scripts": {
+    "website": "cd website && npm start",
     "build": "rollup -c",
     "test": "jest ./test"
   },
@@ -19,13 +20,16 @@
     "picker",
     "datepicker",
     "rangepicker",
+    "weekpicker",
     "timepicker",
     "date picker",
     "range picker",
     "time picker",
+    "week picker",
     "multiple",
     "range",
     "time",
+    "week",
     "gregorian",
     "calendar",
     "persian",

rollup.config.js

@@ -64,6 +64,7 @@ function getProps() {
       babel({
         exclude: /node_modules/,
         presets,
+        babelHelpers: "bundled",
       }),
       commonjs(),
       postcss({