diff --git a/addons/web/static/src/core/datepicker/datepicker.js b/addons/web/static/src/core/datepicker/datepicker.js
index 599558b3e74..6a39dc93f78 100644
--- a/addons/web/static/src/core/datepicker/datepicker.js
+++ b/addons/web/static/src/core/datepicker/datepicker.js
@@ -268,6 +268,7 @@ DatePicker.defaultProps = {
         today: "fa fa-calendar-check-o",
         up: "fa fa-chevron-up",
     },
+    inputId: "",
     maxDate: DateTime.fromObject({ year: 9999, month: 12, day: 31 }),
     minDate: DateTime.fromObject({ year: 1000 }),
     useCurrent: false,
@@ -305,6 +306,7 @@ DatePicker.props = {
         },
         optional: true,
     },
+    inputId: { type: String, optional: true },
     keyBinds: { validate: (kb) => typeof kb === "object" || kb === null, optional: true },
     locale: { type: String, optional: true },
     maxDate: { type: DateTime, optional: true },
diff --git a/addons/web/static/src/core/datepicker/datepicker.xml b/addons/web/static/src/core/datepicker/datepicker.xml
index 66665ca7c52..31eb05907d9 100644
--- a/addons/web/static/src/core/datepicker/datepicker.xml
+++ b/addons/web/static/src/core/datepicker/datepicker.xml
@@ -7,6 +7,7 @@
             <input type="text"
                 class="o_datepicker_input o_input datetimepicker-input"
                 t-att-name="props.name"
+                t-att-id="props.inputId"
                 t-att-placeholder="props.placeholder"
                 t-attf-data-target="#{ '#' + datePickerId }"
                 t-att-readonly="props.readonly"
diff --git a/addons/web/static/src/views/fields/date/date_field.xml b/addons/web/static/src/views/fields/date/date_field.xml
index 5326d2db462..6d261adc464 100644
--- a/addons/web/static/src/views/fields/date/date_field.xml
+++ b/addons/web/static/src/views/fields/date/date_field.xml
@@ -9,6 +9,7 @@
             <DatePicker
                 t-props="props.pickerOptions"
                 date="date"
+                inputId="props.id"
                 placeholder="props.placeholder"
                 onDateTimeChanged="(date) => this.onDateTimeChanged(date)"
             />
diff --git a/addons/web/static/src/views/fields/daterange/daterange_field.xml b/addons/web/static/src/views/fields/daterange/daterange_field.xml
index 4632b869f16..0380d637b15 100644
--- a/addons/web/static/src/views/fields/daterange/daterange_field.xml
+++ b/addons/web/static/src/views/fields/daterange/daterange_field.xml
@@ -6,7 +6,7 @@
             <t t-esc="formattedValue" />
         </t>
         <t t-else="">
-            <input class="o_input" style="width:100% !important"  t-ref="root" type="text" t-att-value="formattedValue" t-att-placeholder="props.placeholder" t-on-change="onChangeInput" />
+            <input class="o_input" style="width:100% !important"  t-ref="root" type="text" t-att-id="props.id" t-att-value="formattedValue" t-att-placeholder="props.placeholder" t-on-change="onChangeInput" />
         </t>
     </t>
 
diff --git a/addons/web/static/src/views/fields/datetime/datetime_field.xml b/addons/web/static/src/views/fields/datetime/datetime_field.xml
index ea08911fde1..de6b6103ada 100644
--- a/addons/web/static/src/views/fields/datetime/datetime_field.xml
+++ b/addons/web/static/src/views/fields/datetime/datetime_field.xml
@@ -9,6 +9,7 @@
             <DateTimePicker
                 t-props="props.pickerOptions"
                 date="props.value"
+                inputId="props.id"
                 placeholder="props.placeholder"
                 onDateTimeChanged="(datetime) => this.onDateTimeChanged(datetime)"
             />
diff --git a/addons/web/static/tests/views/fields/date_field_tests.js b/addons/web/static/tests/views/fields/date_field_tests.js
index a26b6cc2179..a777c3254ef 100644
--- a/addons/web/static/tests/views/fields/date_field_tests.js
+++ b/addons/web/static/tests/views/fields/date_field_tests.js
@@ -349,6 +349,27 @@ QUnit.module("Fields", (hooks) => {
         );
     });
 
+    QUnit.test("DateField with label opens datepicker on click", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <label for="date" string="What date is it" />
+                    <field name="date" />
+                </form>`,
+        });
+
+        await click(target.querySelector("label.o_form_label"));
+        assert.containsOnce(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be opened"
+        );
+    });
+
     QUnit.test("DateField with warn_future option", async function (assert) {
         await makeView({
             type: "form",
diff --git a/addons/web/static/tests/views/fields/daterange_field_tests.js b/addons/web/static/tests/views/fields/daterange_field_tests.js
index 3cdf6dc4f3d..fd9bab3ad42 100644
--- a/addons/web/static/tests/views/fields/daterange_field_tests.js
+++ b/addons/web/static/tests/views/fields/daterange_field_tests.js
@@ -381,6 +381,30 @@ QUnit.module("Fields", (hooks) => {
         }
     );
 
+    QUnit.test("DateRangeField with label opens datepicker on click", async function (assert) {
+        serverData.models.partner.fields.date_end = { string: "Date End", type: "date" };
+        serverData.models.partner.records[0].date_end = "2017-02-08";
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <label for="date" string="Daterange" />
+                    <field name="date" widget="daterange" options="{'related_end_date': 'date_end'}"/>
+                    <field name="date_end" widget="daterange" options="{'related_start_date': 'date'}"/>
+                </form>`,
+        });
+
+        await click(target.querySelector("label.o_form_label"));
+        assert.isVisible(
+            document.querySelector(".daterangepicker[data-name='date']"),
+            "date range picker should be opened"
+        );
+    });
+
     QUnit.test(
         "Datetime field manually input value should send utc value to server",
         async function (assert) {
diff --git a/addons/web/static/tests/views/fields/datetime_field_tests.js b/addons/web/static/tests/views/fields/datetime_field_tests.js
index 70eb8fd068d..e0a6f1d0718 100644
--- a/addons/web/static/tests/views/fields/datetime_field_tests.js
+++ b/addons/web/static/tests/views/fields/datetime_field_tests.js
@@ -598,4 +598,25 @@ QUnit.module("Fields", (hooks) => {
             assert.strictEqual(target.querySelector(".o_field_widget input").value, "01/08/2022");
         }
     );
+
+    QUnit.test("DateTimeField with label opens datepicker on click", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <label for="datetime" string="When is it" />
+                    <field name="datetime" />
+                </form>`,
+        });
+
+        await click(target.querySelector("label.o_form_label"));
+        assert.containsOnce(
+            document.body,
+            ".bootstrap-datetimepicker-widget",
+            "datepicker should be opened"
+        );
+    });
 });