feat: Split datetime fields

- Replace single datetime-local field with 4 separate fields:

- Add helper functions:
  * splitDateTime(): Split datetime string into date and time parts
  * combineDateTime(): Combine date and time into datetime string

- Implement internal state management:
  * startDate, startTime, endDate, endTime internal states
  * Sync effects to update internal states from start/end props
  * Change handlers for each field that combine values and call parent handlers

- Fix test cases:
  * Update EventModal.test.tsx, EventUpdateModal.test.tsx to use new field labels
  * Change from 'Start'/'End' to 'Start Date'/'Start Time'/'End Time'/'End Date'

__test__/features/Events/EventModal.test.tsx

@@ -152,7 +152,8 @@ describe("EventPopover", () => {
       allDay: false,
     } as unknown as DateSelectArg);
 
-    expect(screen.getByLabelText("Start")).toHaveValue("2026-07-20T10:00");
+    expect(screen.getByLabelText("Start Date")).toHaveValue("2026-07-20");
+    expect(screen.getByLabelText("Start Time")).toHaveValue("10:00");
   });
 
   it("updates inputs on change", () => {
@@ -276,10 +277,10 @@ describe("EventPopover", () => {
       target: { value: newEvent.title },
     });
     fireEvent.click(screen.getByLabelText("All day"));
-    fireEvent.change(screen.getByLabelText("Start"), {
+    fireEvent.change(screen.getByLabelText("Start Date"), {
       target: { value: newEvent.start.split("T")[0] },
     });
-    fireEvent.change(screen.getByLabelText("End"), {
+    fireEvent.change(screen.getByLabelText("End Date"), {
       target: { value: newEvent.end.split("T")[0] },
     });
 

__test__/features/Events/EventUpdateModal.test.tsx

@@ -92,16 +92,20 @@ describe("EventUpdateModal Timezone Handling", () => {
     const titleInput = screen.getByDisplayValue("Timezone Event");
     expect(titleInput).toBeInTheDocument();
 
-    // Verify the start time input exists
-    // Since showMore is false by default, label should be "Start"
+    // Verify the start date and time inputs exist
+    // Since showMore is false by default, labels should be "Start Date" and "Start Time"
     await waitFor(() => {
-      const startInput = screen.getByLabelText("Start");
-      expect(startInput).toBeInTheDocument();
-      expect(startInput).toHaveAttribute("type", "datetime-local");
+      const startDateInput = screen.getByLabelText("Start Date");
+      const startTimeInput = screen.getByLabelText("Start Time");
 
-      // The value should be formatted as 2025-01-15T14:00 (2PM in Bangkok time)
-      // EventUpdateModal uses formatDateTimeInTimezone which formats in event's original timezone
-      expect(startInput).toHaveValue("2025-01-15T14:00");
+      expect(startDateInput).toBeInTheDocument();
+      expect(startTimeInput).toBeInTheDocument();
+      expect(startDateInput).toHaveAttribute("type", "date");
+      expect(startTimeInput).toHaveAttribute("type", "time");
+
+      // The values should be split from 2025-01-15T14:00
+      expect(startDateInput).toHaveValue("2025-01-15");
+      expect(startTimeInput).toHaveValue("14:00");
     });
   });