diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
index c21f303508..b147169fd6 100644
--- a/src/components/NcActionInput/NcActionInput.vue
+++ b/src/components/NcActionInput/NcActionInput.vue
@@ -159,7 +159,7 @@ For the multiselect component, all events will be passed through. Please see the
 					:id="idNativeDateTimePicker"
 					:value="value"
 					:type="nativeDatePickerType"
-					:class="{ focusable: isFocusable }"
+					:input-class="{ focusable: isFocusable }"
 					class="action-input__datetimepicker"
 					v-bind="$attrs"
 					@input="$emit('input', $event)"
diff --git a/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue b/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
index cb51536b0e..f20573700a 100644
--- a/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
+++ b/src/components/NcDateTimePickerNative/NcDateTimePickerNative.vue
@@ -140,6 +140,7 @@ All available types are: 'date', 'datetime-local', 'month', 'time' and 'week', p
 		<label :class="{ 'hidden-visually': hideLabel }" :for="id">{{ label }}</label>
 		<input :id="id"
 			class="native-datetime-picker--input"
+			:class="inputClass"
 			:type="type"
 			:value="formattedValue"
 			:min="formattedMin"
@@ -218,6 +219,14 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Class to add to the input field.
+		 * Necessary to use NcInputField in the NcActionInput component.
+		 */
+		inputClass: {
+			type: [Object, String],
+			default: '',
+		},
 	},
 
 	emits: [