Repository: directus/directus
File: app/src/layouts/kanban/kanban.vue (Vue)

Code before:
										@click="onClick({ item: element, event: $event })"
									>
										<div v-if="element.title" class="title">
											<render-display
												v-if="fieldDisplay.titleField"
												v-bind="fieldDisplay.titleField"
												:value="element.title"
											/>
										</div>
										<img v-if="element.image" class="image" :src="element.image" draggable="false" />
										<div v-if="element.text" class="text">
											<render-display
												v-if="fieldDisplay.textField"
												v-bind="fieldDisplay.textField"
												:value="element.text"
											/>
										</div>
										<display-labels
											v-if="element.tags"
											:value="element.tags"
											:type="Array.isArray(element.tags) ? 'csv' : 'json'"
										/>
										<div class="bottom">
											<display-datetime
												v-if="element.date"
												:format="fieldDisplay.dateField?.options?.format ?? 'short'"
												:value="element.date"
												:type="element.dateType"
											/>
											<div class="avatars">
												<span v-if="element.users.length > 3" class="avatar-overflow">
													+{{ element.users.length - 3 }}
												</span>
												<v-avatar
													v-for="user in element.users.slice(0, 3)"
													:key="user.id"
													v-tooltip.bottom="`${user.first_name} ${user.last_name}`"
													class="avatar"
												>
													<v-image v-if="user.avatar && parseAvatar(user.avatar)" :src="parseAvatar(user.avatar)" />
													<v-icon v-else name="person" />
												</v-avatar>
											</div>
										</div>
									</div>
								</template>
							</draggable>
						</div>
					</template>
				</draggable>


Review comment (suggestion):
Instead of applying only the format option, let’s apply all display options when the display is set to `datetime`.

```suggestion
												v-bind="
													fieldDisplay.dateField?.display === 'datetime'
														? fieldDisplay.dateField.options
														: { format: 'short' }
												"
```

Code after:
										@click="onClick({ item: element, event: $event })"
									>
										<div v-if="element.title" class="title">
											<render-display
												v-if="fieldDisplay.titleField"
												v-bind="fieldDisplay.titleField"
												:value="element.title"
											/>
										</div>
										<img v-if="element.image" class="image" :src="element.image" draggable="false" />
										<div v-if="element.text" class="text">
											<render-display
												v-if="fieldDisplay.textField"
												v-bind="fieldDisplay.textField"
												:value="element.text"
											/>
										</div>
										<display-labels
											v-if="element.tags"
											:value="element.tags"
											:type="Array.isArray(element.tags) ? 'csv' : 'json'"
										/>
										<div class="bottom">
											<display-datetime
												v-if="element.date"
												v-bind="
													fieldDisplay.dateField?.display === 'datetime'
														? fieldDisplay.dateField.options
														: { format: 'short' }
												"
												:value="element.date"
												:type="element.dateType"
											/>
											<div class="avatars">
												<span v-if="element.users.length > 3" class="avatar-overflow">
													+{{ element.users.length - 3 }}
												</span>
												<v-avatar
													v-for="user in element.users.slice(0, 3)"
													:key="user.id"
													v-tooltip.bottom="`${user.first_name} ${user.last_name}`"
													class="avatar"
												>
													<v-image v-if="user.avatar && parseAvatar(user.avatar)" :src="parseAvatar(user.avatar)" />
													<v-icon v-else name="person" />
												</v-avatar>
											</div>
										</div>
									</div>
								</template>
							</draggable>