make it compatible with native form submit close #14

Author: javadbat

CHANGELOG.md

@@ -1,4 +1,7 @@
 #changelog
+## [3.8.0] - 2023-3-30
+### new features
+- make component compatible with native form element value getter. 
 ## [3.7.13] - 2023-3-30
 ### fixed
 - fix calendar open and close problem #13 on calendar button clicked

README.md

@@ -28,7 +28,9 @@ web component date input (picker) to get date (jalali & gregorian) from user.
 
 - customizable value format so you can get your value in standard iso format or custom format like `1400/12/08` or `1400_12_08`
 
-- support `esm` import build for modern `ECMA Script` nodejs app. 
+- support `esm` import build for modern `ECMA Script` nodejs app.
+
+- compatible with native HTML `form` element to send data to server.
 
 Demo & Sample    
 in github: <https://javadbat.github.io/jb-date-input/>    

lib/JBDateInput.ts

@@ -26,7 +26,7 @@ if(HTMLElement== undefined){
     console.error('you cant render web component on a server side');
 }
 export class JBDateInputWebComponent extends HTMLElement {
-    static get formAssociated() { return true; }
+    static formAssociated = true;
     internals_?: ElementInternals;
     elements!: ElementsObject;
     #dateFactory: DateFactory = new DateFactory({ inputType: (this.getAttribute("value-type") as InputTypes), valueType: this.getAttribute("value-type") as ValueTypes });
@@ -45,16 +45,23 @@ export class JBDateInputWebComponent extends HTMLElement {
     required = false;
     DefaultValidationErrorMessage = "مقدار وارد شده نا معتبر است"
     #valueObject: JBDateInputValueObject = getEmptyValueObject();
+    get name() { return this.getAttribute('name'); }
+    get form() { return this.internals_!.form; }
     get value(): string {
         const value = this.getDateValue();
         return value;
     }
     set value(value: string) {
-        if (this.internals_ && typeof this.internals_.setFormValue == "function") {
-            this.internals_.setFormValue(value);
-        }
+        
         this.setDateValue(value);
         this.updateinputTextFromValue();
+        this.#updateFormAssossicatedValue();
+    }
+    #updateFormAssossicatedValue():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);
+        }
     }
     get inputValue() {
         return this.#inputValue;
@@ -609,6 +616,7 @@ export class JBDateInputWebComponent extends HTMLElement {
                 this.setDateValueFromTimeStamp(value);
                 break;
         }
+        this.#updateFormAssossicatedValue();
 
     }
     setValueObjNull() {
@@ -679,6 +687,7 @@ export class JBDateInputWebComponent extends HTMLElement {
         const result: JBDateInputValueObject = this.#dateFactory.getDateValueObjectBaseOnInputType(year, month, day, prevYear, prevMonth);
         this.#valueObject = result;
         this.updateCalendarView();
+        this.#updateFormAssossicatedValue();
     }
     updateinputTextFromValue() {
         let str = this.inputFormat;

package.json

@@ -28,7 +28,7 @@
     "jalali web-component",
     "jalali web component"
   ],
-  "version": "3.7.13",
+  "version": "3.8.0",
   "bugs": "https://github.com/javadbat/jb-date-input/issues",
   "license": "MIT",
   "files": [