diff --git a/frontend/src/shared/ui/components/KsDateField.vue b/frontend/src/shared/ui/components/KsDateField.vue
index 0dfbd85b..6d10a418 100644
--- a/frontend/src/shared/ui/components/KsDateField.vue
+++ b/frontend/src/shared/ui/components/KsDateField.vue
@@ -35,10 +35,16 @@ const emit = defineEmits<{
 const isFocused = ref(false)
 const id = computed(() => props.inputId || `date-${Math.random().toString(36).substr(2, 9)}`)
 
+const inputRef = ref<HTMLInputElement | null>(null)
+
 const dateString = computed(() => {
   if (!props.modelValue) return ''
   const date = typeof props.modelValue === 'string' ? new Date(props.modelValue) : props.modelValue
-  return date.toISOString().split('T')[0]
+  if (isNaN(date.getTime())) return ''
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
 })
 
 const containerClass = computed(() => [
@@ -55,9 +61,25 @@ const containerClass = computed(() => [
 
 const handleInput = (event: Event) => {
   const target = event.target as HTMLInputElement
+  if (!target.value) {
+    emit('update:modelValue', null)
+    emit('change', null)
+    return
+  }
   const date = new Date(target.value)
-  emit('update:modelValue', date)
-  emit('change', date)
+  if (!isNaN(date.getTime())) {
+    emit('update:modelValue', date)
+    emit('change', date)
+  }
+}
+
+const openPicker = () => {
+  if (props.disabled || props.readonly) return
+  if (inputRef.value && typeof inputRef.value.showPicker === 'function') {
+    inputRef.value.showPicker()
+  } else if (inputRef.value) {
+    inputRef.value.focus()
+  }
 }
 
 const handleFocus = (event: FocusEvent) => {
@@ -83,6 +105,7 @@ const handleBlur = (event: FocusEvent) => {
     <div class="ks-date-field__container">
       <input
         :id="id"
+        ref="inputRef"
         :type="type === 'range' ? 'text' : type"
         :value="dateString"
         :disabled="disabled"
@@ -98,7 +121,7 @@ const handleBlur = (event: FocusEvent) => {
         @focus="handleFocus"
         @blur="handleBlur"
       />
-      <span class="ks-date-field__icon">📅</span>
+      <span class="ks-date-field__icon" @click="openPicker">📅</span>
     </div>
 
     <!-- Error or help text -->
@@ -179,7 +202,7 @@ const handleBlur = (event: FocusEvent) => {
   position: absolute;
   right: var(--spacing-3);
   font-size: 1.2rem;
-  pointer-events: none;
+  cursor: pointer;
   color: var(--color-text-tertiary);
 }