feat(edge/jobs): migrate create view to react [EE-2221] (#11867)

app/react/components/DateTimeField.tsx

@@ -0,0 +1,57 @@
+import DateTimePicker from 'react-datetime-picker';
+import { Calendar, X } from 'lucide-react';
+
+import { isoDate } from '@/portainer/filters/filters';
+import { AutomationTestingProps } from '@/types';
+
+import { FormControl } from '@@/form-components/FormControl';
+import { Input } from '@@/form-components/Input';
+
+import 'react-datetime-picker/dist/DateTimePicker.css';
+import 'react-calendar/dist/Calendar.css';
+
+export const FORMAT = 'YYYY-MM-DD HH:mm';
+
+export function DateTimeField({
+  error,
+  label,
+  disabled,
+  name,
+  value,
+  onChange,
+  minDate,
+  'data-cy': dataCy,
+}: {
+  error?: string;
+  disabled?: boolean;
+  name: string;
+  value: Date | null;
+  onChange: (date: Date | null) => void;
+  label: string;
+  minDate?: Date;
+} & AutomationTestingProps) {
+  return (
+    <FormControl label={label} errors={error}>
+      {!disabled ? (
+        <DateTimePicker
+          format="y-MM-dd HH:mm"
+          className="form-control [&>div]:border-0"
+          name={name}
+          value={value}
+          onChange={onChange}
+          calendarIcon={<Calendar className="lucide" />}
+          clearIcon={<X className="lucide" />}
+          disableClock
+          data-cy={dataCy}
+          minDate={minDate}
+        />
+      ) : (
+        <Input
+          defaultValue={isoDate(value?.valueOf(), FORMAT)}
+          disabled
+          data-cy={`${dataCy}-disabled-value`}
+        />
+      )}
+    </FormControl>
+  );
+}