marketing-shibata50/tududi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a datepicker and a days selector

Browse source
This commit is contained in:
Chris Veleris 2025-07-04 23:44:20 +03:00
parent 22ca177836
commit b25ea537ab
9 changed files with 879 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

21
frontend/components/Task/TaskForm/TaskMetadataSection.tsx
View file

@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
import { PriorityType, StatusType } from '../../../entities/Task';
import StatusDropdown from '../../Shared/StatusDropdown';
import PriorityDropdown from '../../Shared/PriorityDropdown';
import DatePicker from '../../Shared/DatePicker';
interface TaskMetadataSectionProps {
priority: PriorityType;
@ -24,8 +25,8 @@ const TaskMetadataSection: React.FC<TaskMetadataSectionProps> = ({
const { t } = useTranslation();
return (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 overflow-visible">
<div className="overflow-visible">
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
{t('forms.task.labels.priority', 'Priority')}
</label>
@ -34,17 +35,19 @@ const TaskMetadataSection: React.FC<TaskMetadataSectionProps> = ({
onChange={onPriorityChange}
/>
</div>
<div>
<div className="overflow-visible">
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
{t('forms.task.labels.dueDate', 'Due Date')}
</label>
<input
type="date"
id={`task_due_date_${taskId}`}
name="due_date"
<DatePicker
value={dueDate}
onChange={onDueDateChange}
className="block w-full focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm px-3 py-2 text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-md text-gray-900 dark:text-gray-100"
onChange={(value) => {
const event = {
target: { name: 'due_date', value }
} as React.ChangeEvent<HTMLInputElement>;
onDueDateChange(event);
}}
placeholder={t('forms.task.dueDatePlaceholder', 'Select due date')}
/>
</div>
</div>