diff --git a/src/components/DatetimePicker/DatetimePicker.vue b/src/components/DatetimePicker/DatetimePicker.vue
index f587aee7ac..2280183b90 100644
--- a/src/components/DatetimePicker/DatetimePicker.vue
+++ b/src/components/DatetimePicker/DatetimePicker.vue
@@ -82,6 +82,8 @@ export default {
 		:type="type"
 		:value="value"
 		:append-to-body="appendToBody"
+		:show-week-number="showWeekNumber"
+		:popup-class="{ 'show-week-number': showWeekNumber }"
 		v-bind="$attrs"
 		v-on="$listeners"
 		@select-year="handleSelectYear"
@@ -158,6 +160,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		showWeekNumber: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	methods: {
diff --git a/src/components/DatetimePicker/index.scss b/src/components/DatetimePicker/index.scss
index c76d2219db..6d74d0bbf8 100644
--- a/src/components/DatetimePicker/index.scss
+++ b/src/components/DatetimePicker/index.scss
@@ -53,6 +53,10 @@ $cell_height: 32px;
 			border-left: 1px solid var(--color-border);
 		}
 	}
+	
+	&.show-week-number .mx-calendar {
+		width: $cell_height * 8  + 2 * 5px; // week number + 7 days + padding
+	}
 
 	.mx-datepicker-header {
 		border-bottom: 1px solid var(--color-border);