feat: add datetime picker for start field in TaskDialog (#349)

Author: Hell1213

backend/controllers/edit_task.go

@@ -67,6 +67,12 @@ func EditTaskHandler(w http.ResponseWriter, r *http.Request) {
 			return
 		}
 
+		start, err = utils.ConvertISOToTaskwarriorFormat(start)
+		if err != nil {
+			http.Error(w, fmt.Sprintf("Invalid start date format: %v", err), http.StatusBadRequest)
+			return
+		}
+
 		logStore := models.GetLogStore()
 		job := Job{
 			Name: "Edit Task",

frontend/src/components/HomeComponents/Tasks/TaskDialog.tsx

@@ -2,6 +2,7 @@ import { EditTaskDialogProps } from '../../utils/types';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { DatePicker } from '@/components/ui/date-picker';
+import { DateTimePicker } from '@/components/ui/date-time-picker';
 import {
   Dialog,
   DialogClose,
@@ -350,7 +351,7 @@ export const TaskDialog = ({
                   <TableCell>
                     {editState.isEditingStartDate ? (
                       <div className="flex items-center gap-2">
-                        <DatePicker
+                        <DateTimePicker
                           date={
                             editState.editedStartDate &&
                             editState.editedStartDate !== ''
@@ -359,13 +360,10 @@ export const TaskDialog = ({
                                     // Handle YYYY-MM-DD format
                                     const dateStr =
                                       editState.editedStartDate.includes('T')
-                                        ? editState.editedStartDate.split(
-                                            'T'
-                                          )[0]
-                                        : editState.editedStartDate;
-                                    const parsed = new Date(
-                                      dateStr + 'T00:00:00'
-                                    );
+                                        ? editState.editedStartDate
+                                        : editState.editedStartDate +
+                                          'T00:00:00';
+                                    const parsed = new Date(dateStr);
                                     return isNaN(parsed.getTime())
                                       ? undefined
                                       : parsed;
@@ -375,13 +373,16 @@ export const TaskDialog = ({
                                 })()
                               : undefined
                           }
-                          onDateChange={(date) =>
+                          onDateTimeChange={(date, hasTime) =>
                             onUpdateState({
                               editedStartDate: date
-                                ? format(date, 'yyyy-MM-dd')
+                                ? hasTime
+                                  ? date.toISOString()
+                                  : format(date, 'yyyy-MM-dd')
                                 : '',
                             })
                           }
+                          placeholder="Select start date and time"
                         />
 
                         <Button
@@ -420,11 +421,7 @@ export const TaskDialog = ({
                           onClick={() => {
                             onUpdateState({
                               isEditingStartDate: true,
-                              editedStartDate: task.start
-                                ? task.start.includes('T')
-                                  ? task.start.split('T')[0]
-                                  : task.start
-                                : '',
+                              editedStartDate: task.start || '',
                             });
                           }}
                         >

frontend/src/components/HomeComponents/Tasks/__tests__/Tasks.test.tsx

@@ -1105,7 +1105,7 @@ describe('Tasks Component', () => {
     ['Wait', 'Wait:', 'Pick a date'],
     ['End', 'End:', 'Select end date'],
     ['Due', 'Due:', 'Select due date'],
-    ['Start', 'Start:', 'Pick a date'],
+    ['Start', 'Start:', 'Select start date and time'],
     ['Entry', 'Entry:', 'Pick a date'],
   ])('shows red when task %s date is edited', async (_, label, placeholder) => {
     render(<Tasks {...mockProps} />);
@@ -1135,7 +1135,7 @@ describe('Tasks Component', () => {
     });
 
     const dialog = screen.getByRole('dialog');
-    const day15 = within(dialog).getByText('15');
+    const day15 = within(dialog).getAllByText('15')[0];
     fireEvent.click(day15);
 
     const saveButton = screen.getByLabelText('save');