TimePicker

TimePicker.tsx

import React, { useState } from 'react';
import './TimePicker.css';

type TimePickerProps = {
  label: string;
  value: string;
  onChange: (newValue: string) => void;
}

const TimePicker = (props: TimePickerProps) => {
  const { label, value, onChange } = props;
  const [hours, setHours] = useState<string>(value.split(':')[0]);
  const [minutes, setMinutes] = useState<string>(value.split(':')[1]);
  const [ampm, setAmPm] = useState<string>(value.slice(-2));

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const inputValue = event.target.value;
    const inputType = event.target.name;

    if (inputType === 'hours') {
      setHours(inputValue);
    } else if (inputType === 'minutes') {
      setMinutes(inputValue);
    } else if (inputType === 'ampm') {
      setAmPm(inputValue);
    }

    onChange(`${hours.padStart(2, '0')}:${minutes.padStart(2, '0')} ${ampm}`);
  }

  return (
    <div className="time-picker">
      <label>{label}</label>
      <input
        type="number"
        name="hours"
        min="1"
        max="12"
        value={hours}
        onChange={handleChange}
      />
      <span>:</span>
      <input
        type="number"
        name="minutes"
        min="0"
        max="59"
        value={minutes}
        onChange={handleChange}
      />
      <select
        name="ampm"
        value={ampm}
        onChange={handleChange}
      >
        <option value="AM">AM</option>
        <option value="PM">PM</option>
      </select>
    </div>
  );
}

export default TimePicker;

{
  "time": "11:45 AM"
}

TimePicker.module.css

.time-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-picker label {
  font-weight: bold;
}

.time-picker input {
  width: 40px;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.time-picker select {
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #ccc;
}