diff --git a/addons/hr_holidays/static/src/components/day_of_month/day_of_month.js b/addons/hr_holidays/static/src/components/day_of_month/day_of_month.js
new file mode 100644
index 0000000000000..0b0120d259804
--- /dev/null
+++ b/addons/hr_holidays/static/src/components/day_of_month/day_of_month.js
@@ -0,0 +1,30 @@
+import { registry } from "@web/core/registry";
+import { SelectionField, selectionField } from "@web/views/fields/selection/selection_field";
+
+export class DayOfMonth extends SelectionField {
+    static props = {
+        ...SelectionField.props,
+        month: String,
+    };
+
+    get options() {
+        const days = this.props.record.fields[this.props.name].selection;
+        const month = this.props.record.data[this.props.month];
+        // using non-leap year (2025) to avoid having the date set to 29th of Feb and only triggering once every 4 years
+        const lastDay = new Date(2025, month, 0).getDate();
+        return days.filter((day) => day[0] <= lastDay);
+    }
+}
+
+export const dayOfMonth = {
+    ...selectionField,
+    component: DayOfMonth,
+    extractProps({ options }) {
+        return {
+            ...selectionField.extractProps(...arguments),
+            month: options.depends_on,
+        };
+    },
+};
+
+registry.category("fields").add("day_of_month", dayOfMonth);
diff --git a/addons/hr_holidays/views/hr_leave_accrual_views.xml b/addons/hr_holidays/views/hr_leave_accrual_views.xml
index 53e2df20c6ff2..bb2b85558b514 100644
--- a/addons/hr_holidays/views/hr_leave_accrual_views.xml
+++ b/addons/hr_holidays/views/hr_leave_accrual_views.xml
@@ -36,17 +36,17 @@
                                 </span>
                                 <span name="biyearly" invisible="frequency != 'biyearly'">
                                     on the
-                                    <field nolabel="1" name="first_month_day" class="o_field_accrual" placeholder="select a day" required="frequency == 'biyearly'"/>
+                                    <field nolabel="1" name="first_month_day" widget="day_of_month" options="{'depends_on': 'first_month'}" class="o_field_accrual" placeholder="select a day" required="frequency == 'biyearly'"/>
                                     of
                                     <field name="first_month" class="o_field_accrual" placeholder="select a month" required="frequency == 'biyearly'"/>
                                     and the
-                                    <field nolabel="1" name="second_month_day" class="o_field_accrual" placeholder="select a day" required="frequency == 'biyearly'"/>
+                                    <field nolabel="1" name="second_month_day" widget="day_of_month" options="{'depends_on': 'second_month'}" class="o_field_accrual" placeholder="select a day" required="frequency == 'biyearly'"/>
                                     of
                                     <field nolabel="1" name="second_month" class="o_field_accrual" placeholder="select a month" required="frequency == 'biyearly'"/>
                                 </span>
                                 <span name="yearly" invisible="frequency != 'yearly'">
                                     on the
-                                    <field nolabel="1" name="yearly_day" class="o_field_accrual" required="frequency == 'yearly'" placeholder="select a day"/>
+                                    <field nolabel="1" name="yearly_day" widget="day_of_month" options="{'depends_on': 'yearly_month'}" class="o_field_accrual" required="frequency == 'yearly'" placeholder="select a day"/>
                                     of
                                     <field nolabel="1" name="yearly_month" class="o_field_accrual" required="frequency == 'yearly'" placeholder="select a month"/>
                                 </span>