feat: add setMonthList method to customize month names

Author: javadbat

CHANGELOG.md

@@ -1,4 +1,7 @@
 #changelog
+## [3.13.0] - 2024-2-19
+### new features
+- add `setMonthList` method to easily customize month names.
 ## [3.12.0] - 2024-2-7
 ### new features
 - change `inputType` and `valuetype` from enum to pure string so it easily be used in other ts files without extra dep

README.md

@@ -258,6 +258,13 @@ you can change calendar icon base on your own need to doing so you just have to
         </div>
     </jb-date-input>
 ```
+## Change Month List
+you may want to change the default month list for both  of Jalali and Gregorian calendars base on your country month labels. here how you can do it:
+```js
+document.querySelector('jb-date-input').setMonthList('JALALI',['حَمَل','ثَور','جَوزا','سَرَطان','اَسَد','سُنبُله','میزان','عَقرَب','قَوس','جَدْی','دَلو','حوت']);
+document.querySelector('jb-date-input').setMonthList('GREGORIAN',['1','2','3','4','5','6','7','8','9','10','11','12']);
+```
+
 ## set custom style
 
 in some cases in your project you need to change default style of web-component for example you need zero margin or different border-radius and etc.    

lib/JBDateInput.ts

@@ -56,7 +56,10 @@ export class JBDateInputWebComponent extends HTMLElement {
         this.#setDateValue(value);
         this.#updateInputTextFromValue();
     }
-    #updateFormAssossicatedValue():void{
+    setMonthList(inputType:InputType, monthName:string[]){
+        this.elements.calendar.setMonthList(inputType,monthName);
+    }
+    #updateFormAssociatedValue():void{
         //in html form we need to get date input value in native way this function update and set value of the input so form can get it when needed
         if (this.internals_ && typeof this.internals_.setFormValue == "function") {
             this.internals_.setFormValue(this.value);
@@ -665,7 +668,7 @@ export class JBDateInputWebComponent extends HTMLElement {
         }else if(value instanceof Date){
             this.#setDateValueFromDate(value);
         }
-        this.#updateFormAssossicatedValue();
+        this.#updateFormAssociatedValue();
     }
     setValueObjNull() {
         // mean we reset calendar value and set it to null
@@ -744,7 +747,7 @@ export class JBDateInputWebComponent extends HTMLElement {
         const result: JBDateInputValueObject = this.#dateFactory.getDateValueObjectBaseOnInputType(year, month, day, prevYear, prevMonth);
         this.#valueObject = result;
         this.updateCalendarView();
-        this.#updateFormAssossicatedValue();
+        this.#updateFormAssociatedValue();
     }
     #updateInputTextFromValue() {
         const { year, month, day } = this.inputType == InputTypes.jalali ? this.#valueObject.jalali : this.#valueObject.gregorian;

package.json

@@ -28,7 +28,7 @@
     "jalali web-component",
     "jalali web component"
   ],
-  "version": "3.12.0",
+  "version": "3.13.0",
   "bugs": "https://github.com/javadbat/jb-date-input/issues",
   "license": "MIT",
   "files": [
@@ -54,6 +54,6 @@
   "dependencies": {
     "date-fns": "^2.28.0",
     "date-fns-jalali": "^2.28.0-0",
-    "jb-calendar": "^4.0.4"
+    "jb-calendar": "^4.1.1"
   }
 }