diff --git a/docs/app/components/content/examples/calendar/CalendarDatePickerExample.vue b/docs/app/components/content/examples/calendar/CalendarDatePickerExample.vue
index c60583b2..3bb88e31 100644
--- a/docs/app/components/content/examples/calendar/CalendarDatePickerExample.vue
+++ b/docs/app/components/content/examples/calendar/CalendarDatePickerExample.vue
@@ -11,7 +11,7 @@ const modelValue = shallowRef(new CalendarDate(2022, 1, 10))
 <template>
   <UPopover>
     <UButton color="neutral" variant="subtle" icon="i-lucide-calendar">
-      {{ df.format(modelValue.toDate(getLocalTimeZone())) }}
+      {{ modelValue ? df.format(modelValue.toDate(getLocalTimeZone())) : 'Select a date' }}
     </UButton>
 
     <template #content>