yearPicker improvement

README.md

@@ -1,6 +1,6 @@
 # DatePicker
 
-![DatePicker](/example/screenshot.jpg?raw=true "Optional Title")
+![DatePicker](/example/screenshot.jpg?raw=true)
 
 ## Installation
 
@@ -28,7 +28,7 @@ export default function Example() {
 | onlyTimePicker |                                     Boolean                                      |   false    |
 | format         |                                      String                                      | YYYY/MM/DD |
 | local          |                                     en or fa                                     |     en     |
-| calendar       |                               georgian of persian                                |  georgian  |
+| calendar       |                               georgian or persian                                |  georgian  |
 | onChange       |                                     Function                                     |     -      |
 
 ## Example

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-multi-date-picker",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "a simple React datepicker component for work with persian and georgian calendars",
   "main": "./build/index.js",
   "scripts": {

src/components/day_picker/day_picker.js

@@ -17,7 +17,7 @@ export default function DayPicker({ state, setState }) {
                             className={`day ${object.current ? "" : "deactive"} ${isToday(object.date) ? "today" : ""} ${isSelected(object.date) ? "selected" : ""}`}
                             onClick={() => selectDate(object.date)}
                         >
-                            <span>{object.date.format("D")}</span>
+                            <span>{typeof object.date.day === "number" ? object.date.format("D") : object.date.digits[0]}</span>
                         </div>
                     })}
                 </div>

src/components/year_picker/year_picker.js

@@ -6,14 +6,14 @@ export default function YearPicker({ state, setState }) {
 
     useEffect(() => {
         let years = []
-        let date = new DateObject({ year: state.year, month: 1, day: 1, calendar: state.calendar, local: state.local })
-        let index = -1
+        let year = state.year - 1
+        let digits = state.date.digits
 
         for (var i = 0; i < 4; i++) {
             let array = []
             for (var j = 0; j < 3; j++) {
-                array.push(new DateObject(date).setYear(date.year + index))
-                index++
+                array.push({ year, str: year.toString().replace(/[0-9]/g, w => digits[w]) })
+                year++
             }
             years.push(array)
         }
@@ -25,14 +25,14 @@ export default function YearPicker({ state, setState }) {
         <div className={`year-picker ${state.mustShowYearPicker ? "active" : ""}`}>
             {years.map((array, i) => {
                 return <div key={i} className="days">
-                    {array.map((year, j) => {
+                    {array.map((object, j) => {
                         return <div
                             key={j}
-                            className={`day ${isCurrentYear(year) ? "selected" : ""}`}
+                            className={`day ${isCurrentYear(object.year) ? "selected" : ""}`}
                             style={{ height: "50.5px" }}
-                            onClick={() => selectYear(year.year)}
+                            onClick={() => selectYear(object.year)}
                         >
-                            <span>{year.format("YYYY")}</span>
+                            <span>{object.str}</span>
                         </div>
                     })}
                 </div>

webpack.config.js

@@ -22,7 +22,8 @@ module.exports = {
         }]
     },
     externals: {
-        react: "react"
+        react: "react",
+        "react-date-object": "react-date-object"
     },
     mode: "production"
 }