+
+
+
+
+
+
+
diff --git a/multiple_datepicker_widget/static/src/css/datepicker_widget.css b/multiple_datepicker_widget/static/src/css/datepicker_widget.css
new file mode 100644
index 000000000..11202d614
--- /dev/null
+++ b/multiple_datepicker_widget/static/src/css/datepicker_widget.css
@@ -0,0 +1,59 @@
+.datepicker-dropdown {
+ top: 0;
+ left: 0;
+ padding: 4px;
+}
+.datepicker table tr td,
+.datepicker table tr th {
+ text-align: center;
+ width: 30px;
+ height: 30px;
+ border: none;
+}
+.datepicker table tr td.day:hover,
+.datepicker table tr td.focused {
+ background: #eee;
+ cursor: pointer;
+ border-radius: 18px;
+}
+.datepicker table tr td.active.active,
+.datepicker table tr td.active.highlighted.active,
+.datepicker table tr td.active.highlighted:active,
+.datepicker table tr td.active:active {
+ color: #fff;
+ background-color: #7C7BAD;
+ border-radius:18px;
+ border-color: #7C7BAD;
+ background-radius:11px;
+}
+.datepicker table tr td span {
+ display: block;
+ width: 23%;
+ height: 54px;
+ line-height: 54px;
+ float: left;
+ margin: 1%;
+ cursor: pointer;
+}
+.datepicker table tr td span.active,
+.datepicker table tr td span.active.disabled,
+.datepicker table tr td span.active.disabled:hover,
+.datepicker table tr td span.active:hover {
+ color: #fff;
+ background-color: #7C7BAD;
+ border-color: #2e6da4;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
+}
+.datepicker .datepicker-switch {
+ width: 145px;
+ background:#7C7BAD;
+ color:white;
+}
+.datepicker .datepicker-switch,
+.datepicker .next,
+.datepicker .prev,
+.datepicker tfoot tr th {
+ cursor: pointer;
+ background:#7C7BAD;
+ color:white;
+}
diff --git a/multiple_datepicker_widget/static/src/js/multiple_date_picker_widget.js b/multiple_datepicker_widget/static/src/js/multiple_date_picker_widget.js
new file mode 100644
index 000000000..3b3e8692b
--- /dev/null
+++ b/multiple_datepicker_widget/static/src/js/multiple_date_picker_widget.js
@@ -0,0 +1,66 @@
+/** @odoo-module **/
+import { registry } from "@web/core/registry";
+import { useInputField } from "@web/views/fields/input_field_hook";
+import { Component, useRef, onMounted } from "@odoo/owl";
+import { standardFieldProps } from "@web/views/fields/standard_field_props";
+
+export class DatePickerField extends Component {
+ static template = 'FieldDateMultipleDate';
+
+ setup() {
+ // Reference for the input element
+ this.input = useRef("inputdate");
+
+ useInputField({
+ getValue: () => this.props.record.data[this.props.name] || "",
+ refName: "inputdate",
+ });
+
+ onMounted(() => {
+ this.initializeFlatpickr();
+ });
+ }
+
+ // Initialize the Flatpickr datepicker with multiple date selection
+ initializeFlatpickr() {
+ if (this.input.el && !this.fpInstance) {
+ this.fpInstance = flatpickr(this.input.el, {
+ mode: "multiple",
+ dateFormat: "Y-m-d",
+ defaultDate: this.props.record.data[this.props.name]
+ ? this.props.record.data[this.props.name].split(",")
+ : [],
+ onChange: (selectedDates) => {
+ const newValue = selectedDates.map(d => d.toISOString().split("T")[0]).join(",");
+ if (this.props.record.data[this.props.name] !== newValue) {
+ this.props.record.update({
+ [this.props.name]: newValue,
+ });
+ }
+ },
+ });
+ }
+ }
+
+
+ // Handle the click event to trigger Flatpickr on the input field
+ _onSelectDateField(ev) {
+ if (!this.input.el._flatpickr) {
+ this.initializeFlatpickr();
+ }
+ this.input.el.focus();
+ }
+}
+
+// Define the component's props
+DatePickerField.props = {
+ ...standardFieldProps,
+};
+
+// Register the custom field in the Odoo registry
+export const datepickerField = {
+ component: DatePickerField,
+ supportedTypes: ["char"],
+};
+
+registry.category("fields").add("multiple_datepicker", datepickerField);
diff --git a/multiple_datepicker_widget/static/src/xml/datepicker_widget_templates.xml b/multiple_datepicker_widget/static/src/xml/datepicker_widget_templates.xml
new file mode 100644
index 000000000..d681293db
--- /dev/null
+++ b/multiple_datepicker_widget/static/src/xml/datepicker_widget_templates.xml
@@ -0,0 +1,10 @@
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Pick Multiple Dates to a Field. +
+Multiple Date Picker Widget +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Choose multiple dates. +
++
+
+
+
+
+
+
+
+
+ + Pick or choose from a Calendar. +
++
+
+
+
+
+
+
+
+
+
+ Multiple Date Picker Widget
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + Add + + widget +
+
+
+ + Add widget="multiple_datepicker" code into a + field. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Multiple date + + picker view. +
+
+
+ + +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Save the + + Change. +
+
+
+ + After saving, the field will be stored dates + as follows. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Widget for + picking multiple dates. +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ + Using + widget="multiple_datepicker" for applying widget + on a char field.
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + This feature allows you + to select and assign more + than one date to a single field, + instead of being limited to just one. +
+
+
+
+
+
+
+ + You can use this in + custom modules or enhanced + standard models—like scheduling + multiple delivery dates, + setting multiple event dates. +
+
+
+
+
+
+ + No, Odoo natively + supports only single + date fields. This is a custom + implementation that enhances + user flexibility. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 15th July, 2025 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+