HosseinShabani / react-native-modern-datepicker

A customizable calendar, time & month picker for React Native (including Persian Jalaali calendar & locale)
MIT License
577 stars 165 forks source link

particular day need to disable. #146

Open surinderpanwar05 opened 9 months ago

surinderpanwar05 commented 9 months ago

Hi Hossein Shabani,

actually i m using this library. and trying to disable all sunday dates in Datepicker. but i try everything its bit hard. could you give me any suggestion or sample code. so i can disable sundays. your help and support really appriciated.

Thanks Best Regards

renanmalato commented 4 months ago

Hi, I'm trying to disable Mondays also

Would like to have mondays grayed out like past days with the minimumDate

I tried to GPT a bunch of hacks but it seems like it doesn't works...

I tried like:

                      availableDates={availableDates}
// Initialize arrays to store available dates
const availableDates = [];

// Get today's date
const today = new Date();

// Calculate tomorrow's date
const tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1);

// Add tomorrow's date to availableDates
availableDates.push(getFormatedDate(tomorrow, "YYYY-MM-DD"));

// Get the current day of the week
const dayOfWeek = today.getDay();

// Calculate the number of days until the next Monday
let daysUntilMonday = 1; // Default to 1 (Monday)
if (dayOfWeek === 1) {
  daysUntilMonday = 7; // If today is Monday, set daysUntilMonday to 7
} else {
  daysUntilMonday = 1 + (7 - dayOfWeek + 1); // Calculate days until next Monday
}

// Calculate the date of the next Monday
const nextMonday = new Date(today);
nextMonday.setDate(today.getDate() + daysUntilMonday);

// Iterate from Tuesday to Sunday and add the dates to availableDates
for (let i = 0; i < 6; i++) {
  // Check if the current day is not Monday
  if (nextMonday.getDay() !== 1) {
    availableDates.push(getFormatedDate(nextMonday, "YYYY-MM-DD"));
  }
  // Move to the next day
  nextMonday.setDate(nextMonday.getDate() + 1);
}

// Modal state and handlers
const [openCalendar, setOpenCalendar] = useState(false);
const [date, setDate] = useState(availableDates[0]);

const handleCalendarOpen = () => {
  setOpenCalendar(!openCalendar);
};

const handleChangeDate = (propDate) => {
  setDate(propDate);
};

but nothing...

Would love to be able to do that

Now I have to change the UX to (if monday selected, doesn't show my cart button and send an alert to select another date)