v2.10.0

Author: shahabyazdi

README.md

@@ -330,6 +330,12 @@ export default function Example() {
           <td style="text-align:center"></td>
           <td>both</td>
         </tr>
+        <tr>
+          <td>onYearChange</td>
+          <td style="text-align:center">Function</td>
+          <td style="text-align:center"></td>
+          <td>both</td>
+        </tr>
         <tr>
           <td>onFocusedDateChange</td>
           <td style="text-align:center">Function</td>

index.d.ts

@@ -257,10 +257,11 @@ declare module "react-multi-date-picker" {
     disableDayPicker?: boolean;
     onPropsChange?(props: object): void;
     onMonthChange?(date: DateObject): void;
+    onYearChange?(date: DateObject): void;
     onFocusedDateChange?(
       focusedDate: DateObject | undefined,
       clickedDate: DateObject | undefined
-    );
+    ): void;
     readOnly?: boolean;
     disabled?: boolean;
     hideMonth?: boolean;

test/date_picker.test.js

@@ -356,6 +356,27 @@ describe("events", () => {
     expect(onMonthChange).toHaveBeenCalledTimes(3);
   });
 
+  test("onYearChange", () => {
+    const date = new DateObject();
+    const onYearChange = jest.fn();
+    const { openCalendar, queryByText, getCalendar } = renderDatePicker({
+      onYearChange,
+    });
+
+    openCalendar();
+
+    //opening year picker
+    const calendar = getCalendar();
+    const year = calendar.querySelector(".rmdp-header-values").children[1];
+    fireEvent.click(year);
+
+    //selecting next year
+    const nextyear = queryByText(date.year + 1);
+    fireEvent.click(nextyear);
+
+    expect(onYearChange).toHaveBeenCalledTimes(1);
+  });
+
   test("onFocusedDateChange", () => {
     const onFocusedDateChange = jest.fn();
     const { openCalendar, getByText } = renderDatePicker({

website/src/components/demo/demo.js

@@ -347,6 +347,11 @@ export default function Demo({ language = "en", translate }) {
             },
             {
               title: "Other Days",
+              disabled:
+                onlyYearPicker ||
+                onlyMonthPicker ||
+                $onlyAnalogTimePicker ||
+                $onlyTimePicker,
               options: [
                 ["Enable", "enable"],
                 ["Disable", "disable"],
@@ -387,6 +392,11 @@ export default function Demo({ language = "en", translate }) {
             },
             {
               title: "Week Days",
+              disabled:
+                onlyYearPicker ||
+                onlyMonthPicker ||
+                $onlyAnalogTimePicker ||
+                $onlyTimePicker,
               options: [
                 ["Show", "show"],
                 ["Hide", "hide"],
@@ -397,6 +407,8 @@ export default function Demo({ language = "en", translate }) {
             },
             {
               title: "Month",
+              disabled:
+                onlyYearPicker || $onlyAnalogTimePicker || $onlyTimePicker,
               options: [
                 ["Show", "show"],
                 ["Hide", "hide"],
@@ -406,6 +418,7 @@ export default function Demo({ language = "en", translate }) {
             },
             {
               title: "Year",
+              disabled: $onlyAnalogTimePicker || $onlyTimePicker,
               options: [
                 ["Show", "show"],
                 ["Hide", "hide"],
@@ -424,7 +437,12 @@ export default function Demo({ language = "en", translate }) {
             },
             {
               title: "Days Of Week",
-              disabled: hideWeekDays,
+              disabled:
+                hideWeekDays ||
+                onlyYearPicker ||
+                onlyMonthPicker ||
+                $onlyAnalogTimePicker ||
+                $onlyTimePicker,
               options: [
                 ["SUN, MON, ...", "3"],
                 ["SU, MO, ...", "2"],
@@ -435,7 +453,11 @@ export default function Demo({ language = "en", translate }) {
             },
             {
               title: "Months",
-              disabled: hideMonth,
+              disabled:
+                hideMonth ||
+                onlyYearPicker ||
+                $onlyAnalogTimePicker ||
+                $onlyTimePicker,
               options: [
                 ["January, February, ...", "2"],
                 ["Jan, Feb, ...", "1"],
@@ -445,6 +467,11 @@ export default function Demo({ language = "en", translate }) {
             },
             {
               title: "Weekend",
+              disabled:
+                onlyMonthPicker ||
+                onlyYearPicker ||
+                $onlyAnalogTimePicker ||
+                $onlyTimePicker,
               options: [
                 ["Default", "default"],
                 ["Highlight", "highlight"],

website/src/docs/props.js

@@ -217,6 +217,12 @@ export default function Props(translate, language) {
             <td></td>
             <td>{translate("both")}</td>
           </tr>
+          <tr>
+            <td>onYearChange</td>
+            <td>Function</td>
+            <td></td>
+            <td>{translate("both")}</td>
+          </tr>
           <tr>
             <td>onFocusedDateChange</td>
             <td>Function</td>