Add size prop to DatePicker and fix range end

resources/js/packages/ui/src/Input/DatePicker.vue

@@ -16,6 +16,7 @@ import type { Organization } from '@/packages/api/src';
 const props = defineProps<{
     tabindex?: string;
     class?: string;
+    size?: 'sm' | 'default';
 }>();
 
 // This has to be a localized timestamp, not UTC
@@ -67,7 +68,7 @@ function handleDateSelect(newDate: DateValue | undefined) {
             <PopoverTrigger as-child>
                 <Button
                     variant="input"
-                    size="sm"
+                    :size="props.size ?? 'default'"
                     :tabindex="tabindex"
                     :class="['w-full px-2 gap-1.5', props.class]">
                     <CalendarIcon class="!size-3 text-muted-foreground" />

resources/js/packages/ui/src/Input/DateRangePicker.vue

@@ -58,13 +58,14 @@ const modelValue = computed<CalendarDateRange>({
     }),
     set: (newValue) => {
         if (newValue.start) {
-            console.log(newValue.start);
             const date = newValue.start.toDate(getUserTimezone());
             emit('update:start', getLocalizedDayJs(date.toString()).format());
         }
         if (newValue.end) {
             const date = newValue.end.toDate(getUserTimezone());
             emit('update:end', getLocalizedDayJs(date.toString()).format());
+        } else {
+            emit('update:end', '');
         }
     },
 });

resources/js/packages/ui/src/Input/TimeRangeSelector.vue

@@ -73,6 +73,7 @@ const dropdownContent = ref();
                 <DatePicker
                     v-model="tempStart"
                     class="w-full"
+                    size="sm"
                     @changed="updateTimeEntry"></DatePicker>
             </div>
         </div>
@@ -89,6 +90,7 @@ const dropdownContent = ref();
                 <DatePicker
                     v-model="tempEnd"
                     class="w-full"
+                    size="sm"
                     @changed="updateTimeEntry"></DatePicker>
             </div>
             <div v-else-if="end === null && !showEndTimePicker">
@@ -102,7 +104,7 @@ const dropdownContent = ref();
                     class="w-full"
                     data-testid="time_entry_range_end"
                     @keydown.enter.prevent.stop="confirmEndTime"></TimePickerSimple>
-                <DatePicker v-model="tempEnd" class="w-full"></DatePicker>
+                <DatePicker v-model="tempEnd" class="w-full" size="sm"></DatePicker>
                 <Button variant="outline" size="sm" class="w-full" @click="confirmEndTime">
                     Confirm
                 </Button>