GHHub/src/views/products/Detail/addValidityWithWeekend.jsx

import React, { useState } from 'react';
import { DatePicker, Button } from 'antd';
import dayjs from 'dayjs';
import { useDatePresets } from '@/hooks/useDatePresets';
const addValidityWithWeekend = ({ onDateChange }) => {
  const dateFormat = 'YYYY/MM/DD';
  const { RangePicker } = DatePicker;
  const [dateRange, setDateRange] = useState(null);
  const [selectedDays, setSelectedDays] = useState([]);
  const presets = useDatePresets();
  const days = [
    'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
  ];


  const handleChange = (date, dateString) => {
    console.log("dateString",dateString)
    onDateChange({ dateRange: dateString, selectedDays });
  };



  const handleDayClick = (day) => {
    setSelectedDays((prevSelectedDays) => {
      const updatedDays = prevSelectedDays.includes(day)
        ? prevSelectedDays.filter((d) => d !== day)
        : [...prevSelectedDays, day];
      onDateChange({ dateRange, selectedDays: updatedDays });
      return updatedDays;
    });
  };

  return (
    <div>
      <h4>Data</h4>
      {<RangePicker allowClear={true} inputReadOnly={true} presets={presets} placeholder={['From', 'Thru']} onChange={handleChange}/>}
      <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 addValidityWithWeekend;