GHHub/src/views/gysgl/components/date.jsx

import React, { useState } from 'react';
import { DatePicker, Input, Button } from 'antd';
import dayjs from 'dayjs';

const DateComponent = ({ onDateChange }) => {
  const dateFormat = 'YYYY/MM/DD';
  const { RangePicker } = DatePicker;

  const [selectedMonths, setSelectedMonths] = useState([]);
  const [selectedDays, setSelectedDays] = useState([]);

  const handleChange = (date, dateString) => {
    const dateFw = dateString[0] + "-" + dateString[1];
    onDateChange(dateFw);
  };

  const months = [
    'January', 'February', 'March', 'April', 'May', 'June', 
    'July', 'August', 'September', 'October', 'November', 'December'
  ];

  const days = [
    'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
  ];

  const handleMonthClick = (month) => {
    setSelectedMonths((prevSelectedMonths) => {
      if (prevSelectedMonths.includes(month)) {
        return prevSelectedMonths.filter((m) => m !== month);
      } else {
        return [...prevSelectedMonths, month];
      }
    });
  };

  const handleDayClick = (day) => {
    setSelectedDays((prevSelectedDays) => {
      if (prevSelectedDays.includes(day)) {
        return prevSelectedDays.filter((d) => d !== day);
      } else {
        return [...prevSelectedDays, day];
      }
    });
  };

  return (
    <div>
      <h4>Title</h4>
      <Input />
      <h4>Data</h4>
      <RangePicker
        defaultValue={[dayjs('2015/01/01', dateFormat), dayjs('2015/01/01', dateFormat)]}
        format={dateFormat}
        onChange={handleChange}
      />
      <h4>Months</h4>
      <div>
        {months.map((month, index) => (
          <Button
            key={index}
            type={selectedMonths.includes(month) ? 'primary' : 'default'}
            onClick={() => handleMonthClick(month)}
            style={{ margin: '5px' }}
          >
            {month}
          </Button>
        ))}
      </div>
      <h4>Weekdays</h4>
      <div>
        {days.map((day, index) => (
          <Button
            key={index}
            type={selectedDays.includes(day) ? 'primary' : 'default'}
            onClick={() => handleDayClick(day)}
            style={{ margin: '5px' }}
          >
            {day}
          </Button>
        ))}
      </div>
    </div>
  );
};

export default DateComponent;