react-native-future-date-range-calendar
Version:
React Native calendar to pick future date ranges only
178 lines (177 loc) • 7.82 kB
JavaScript
import React from 'react';
import moment from "moment";
import { CommonState } from "./context/common-provider";
import { useEffect } from "react";
import { styles } from "./calendar-styles";
export const disablePreviousDays = (currentMonthDate, currentDate, renderMonthsLimit, currMonth, currYear, currentMonth) => {
let totalDays = 0;
const date1 = new Date(currentMonthDate);
const date2 = new Date(currentDate);
const diffTime = Math.abs(date1 - date2);
totalDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
if (isNaN(totalDays)) {
totalDays = 0;
}
/**
* disable last months's days
*/
const totalScrollMonths = renderMonthsLimit;
const yearAfter12 = currMonth === 0 ? currYear : currYear + 1;
const leftMonthsOfCurrentYear = totalScrollMonths - currentMonth;
const nextYearLastMonth = totalScrollMonths - leftMonthsOfCurrentYear - 1;
const totalDaysOfNextYearLastMonth = new Date(yearAfter12, nextYearLastMonth, 0).getDate(); // getting last date of the month
const lastActiveDay = 15 + totalDays + 3;
const listOfDisabledDates = [];
for (let i = lastActiveDay; i <= totalDaysOfNextYearLastMonth; i++) {
const completeDate = yearAfter12.toString() +
'-' +
(nextYearLastMonth < 10 ? '0' + nextYearLastMonth : nextYearLastMonth) +
'-' +
i;
listOfDisabledDates.push(completeDate);
}
for (let i = 0; i <= totalDays; i++) {
const date = new Date(currentMonthDate);
date.setDate(date.getDate() + i);
const cdYear = date.getFullYear();
const cdMonth = (date.getMonth() + 1).toString();
const cdDate = date.getDate().toString();
const completeDate = cdYear.toString() +
'-' +
(cdMonth.length === 1 ? '0' + cdMonth : cdMonth) +
'-' +
(cdDate.length === 1 ? '0' + cdDate : cdDate);
listOfDisabledDates.push(completeDate);
}
return { totalDays, listOfDisabledDates };
};
export const getStartEndDateBaseStyle = (runningDate, startDate, endDate, rangeDaysBackgroundColor) => {
const dayNumber = moment(runningDate, "YYYY-MM-DD").day();
const day0Style = dayNumber === 0 ? { width: 0 } : {};
if (runningDate === startDate && endDate) {
if (rangeDaysBackgroundColor) {
return { ...styles.startDateBase, backgroundColor: rangeDaysBackgroundColor, ...day0Style };
}
if (startDate !== endDate) {
return styles.startDateBase;
}
}
if (runningDate === endDate) {
if (rangeDaysBackgroundColor) {
return { ...styles.endDateBase, backgroundColor: rangeDaysBackgroundColor, ...day0Style };
}
if (startDate !== endDate) {
return { ...styles.endDateBase, ...day0Style };
}
}
};
export const getSelectedDatesStyle = (runningDate, startDate, endDate, calendarType, startAndEndDateBackgroundColor, rangeDaysBackgroundColor) => {
const dayNumber = moment(runningDate, "YYYY-MM-DD").day();
const day0Style = dayNumber === 0 ? { left: 10 } : {};
if (runningDate === startDate || runningDate === endDate) {
if (calendarType == "type1") {
if (startAndEndDateBackgroundColor) {
return { ...styles.daySelectedWrapperFirstAndLasType1, backgroundColor: startAndEndDateBackgroundColor };
}
return styles.daySelectedWrapperFirstAndLasType1;
}
else {
if (startAndEndDateBackgroundColor) {
return { ...styles.daySelectedWrapperFirstAndLasType2, backgroundColor: startAndEndDateBackgroundColor };
}
return styles.daySelectedWrapperFirstAndLasType2;
}
}
else {
if (calendarType == "type1") {
if (rangeDaysBackgroundColor) {
return { ...styles.daySelectedWrapperType1, ...day0Style, backgroundColor: rangeDaysBackgroundColor };
}
return { ...styles.daySelectedWrapperType1, ...day0Style };
}
else {
if (rangeDaysBackgroundColor) {
return { ...styles.daySelectedWrapperType2, backgroundColor: rangeDaysBackgroundColor };
}
return { ...styles.daySelectedWrapperType2 };
}
}
};
export const getSelectedDatesTextStyle = (runningDate, startDate, endDate, startAndEndDateTextColor, rangeDaysTextColor) => {
if (runningDate === startDate || runningDate === endDate) {
if (startAndEndDateTextColor) {
return { ...styles.daySelectedTextFirstAndLast, color: startAndEndDateTextColor };
}
return styles.daySelectedTextFirstAndLast;
}
else {
if (rangeDaysTextColor) {
return { ...styles.daySelectedTextFirstAndLast, color: rangeDaysTextColor };
}
return styles.daySelectedText;
}
};
export const DateRangeHandler = (props) => {
const { startDate, setStartDate, endDate, setEndDate, setSelectedDate, daySelectedDate } = CommonState();
const onDateSelect = (startDate, endDate) => {
const currentTime = moment().format("HH:mm:ss");
const startDateWithTime = startDate + " " + currentTime;
const endDateWithTime = endDate + " " + currentTime;
const startDateTimestamp = startDate ? moment(startDateWithTime, "YYYY-MM-DD HH:mm:ss").format("YYYY-MM-DDTHH:mm:ssZ") : '';
const endDateTimestamp = endDate ? moment(endDateWithTime, "YYYY-MM-DD HH:mm:ss").format("YYYY-MM-DDTHH:mm:ssZ") : '';
if (props?.onDateSelect) {
props?.onDateSelect({ startDate: startDateTimestamp, endDate: endDateTimestamp });
}
};
const dateRangeHandler = () => {
if (startDate === '') {
setStartDate(daySelectedDate);
/** this method is handling onDateSelect props
* with the help of this props user can access startDate and endDate timestamp
*/
onDateSelect(daySelectedDate, '');
}
const d1 = new Date(startDate);
const d2 = new Date(daySelectedDate);
if (!props?.disablePreviousDateSelection && startDate !== '' && d1 > d2) {
setStartDate(daySelectedDate);
setEndDate('');
/** this method is handling onDateSelect props
* with the help of this props user can access startDate and endDate timestamp
*/
onDateSelect(daySelectedDate, '');
}
else if (startDate !== '' && endDate === '') {
setEndDate(daySelectedDate);
/** this method is handling onDateSelect props
* with the help of this props user can access startDate and endDate timestamp
*/
onDateSelect(startDate, daySelectedDate);
}
else if (startDate !== '' &&
endDate !== '' &&
props.disablePreviousDateSelection &&
d2 > d1) {
setEndDate(daySelectedDate);
/** this method is handling onDateSelect props
* with the help of this props user can access startDate and endDate timestamp
*/
onDateSelect(startDate, daySelectedDate);
}
else if (startDate !== '' &&
endDate !== '' &&
d2 > d1) {
setStartDate(daySelectedDate);
setEndDate('');
/** this method is handling onDateSelect props
* with the help of this props user can access startDate and endDate timestamp
*/
onDateSelect(daySelectedDate, '');
}
setSelectedDate(daySelectedDate);
};
useEffect(() => {
dateRangeHandler();
}, [daySelectedDate]);
return React.createElement(React.Fragment, null);
};