Jun 18: [FIX] Bug Fixed 'multiple_datepicker_widget'

multiple_datepicker_widget/__manifest__.py

@@ -21,7 +21,7 @@
 
 {
     'name': 'Multiple DatePicker Widget',
-    'version': '16.0.1.0.1',
+    'version': '16.0.1.0.2',
     'summary': 'Widget for picking multiple dates',
     'description': 'Widget for picking multiple dates',
     'category': 'Tools',
@@ -32,6 +32,7 @@
     'depends': ['base'],
     'assets': {
         'web.assets_backend': {
+            'https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment.min.js',
             '/multiple_datepicker_widget/static/src/css/datepicker_widget.css',
             '/multiple_datepicker_widget/static/src/js/lib/bootstrap-datepicker.min.js',
             '/multiple_datepicker_widget/static/src/js/multiple_date_picker_widget.js',

multiple_datepicker_widget/doc/RELEASE_NOTES.md

@@ -12,4 +12,13 @@
 #### Version 16.0.1.0.1
 #### UPDT
 
-- Remove useInputField function from setup.
+- Remove useInputField function from setup.
+
+
+## Module <multiple_datepicker_widget>
+
+#### 18.06.2024
+#### Version 16.0.1.0.2
+#### UPDT
+
+- Add new function onSelectDate for storing value.

multiple_datepicker_widget/static/src/js/multiple_date_picker_widget.js

@@ -3,8 +3,7 @@ import { registry } from "@web/core/registry";
 import time from 'web.time';
 var translation = require('web.translation');
 var _t = translation._t;
-
+const { Component,useRef, useState} = owl;
-const { Component,useRef} = owl;
 
 export class DomainSelectorTextField extends Component {
     static template = 'FieldDateMultipleDate'
@@ -12,40 +11,49 @@ export class DomainSelectorTextField extends Component {
     setup(){
         super.setup();
         this.input = useRef('inputdate')
+        this.state = useState({
+            date: this.props.value
+        })
     }
+
     _onSelectDateField(ev){
         var dateFormat = time.getLangDateFormat();
-        console.log("dateFormat....",dateFormat);
        if (dateFormat.includes('MMMM')){
           var dates = dateFormat.toLowerCase()
           var result = dates.replace(/mmmm/g, 'MM');
-          console.log("Result..............",result)
           dateFormat = result
       }
       else if (dateFormat.includes('MMM')) {
           var dates = dateFormat.toLowerCase()
           var result = dates.replace(/mmm/g, 'M');
           dateFormat = result
-          console('date',result)
-
       }
       else if(dateFormat.includes('ddd')){
           var dates =new dateFormat.toLowerCase()
           var result = new dates.replace(/ddd/g, 'DD');
-          console.log("Result..............",result)
           dateFormat = result
       }
      else{
         dateFormat = dateFormat.toLowerCase()
      }
         if (this.input.el){
-           this.props.update(this.input.el.value.replace(DomainSelectorTextField, ''));
-            console.log('this',dateFormat)
             $(this.input.el).datepicker({
                 multidate: true,
-                format: dateFormat,
+                format: dateFormat
-            }).trigger('focus');
+            }).on('changeDate',async (ev) => await this.onSelectDate(ev, dateFormat)).trigger('focus');
         }
     }
+
+    async onSelectDate(ev, dateFormat) {
+        const newDate = moment(ev.date).format(this.convertToMomentFormat(dateFormat))
+        this.state.date = `${this.state.date},${newDate}`
+        await this.props.update(this.state.date)
+    }
+
+    convertToMomentFormat(format) {
+        return format.replace(/d{1,2}/g, 'DD')
+                 .replace(/m{1,2}/g, 'MM')
+                 .replace(/y{2,4}/g, 'YYYY');
+    }
 }
 registry.category("fields").add("multiple_datepicker", DomainSelectorTextField);

multiple_datepicker_widget/static/src/xml/datepicker_widget.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates>
     <t t-name="FieldDateMultipleDate" owl="1">
-        <input type="text" class="input_datepicker" t-ref="inputdate"
+        <input type="text" t-model="state.date" class="input_datepicker" t-ref="inputdate"
                t-on-click="_onSelectDateField"
                />
     </t>