react-native-dates-picker/lib/module/components/DatePicker.js

Customizable date picker for React Native

import { useCallback, useMemo } from 'react';
import { View, StyleSheet } from 'react-native';
import { useCalendarContext } from '../CalendarContext';
import Wheel from './WheelPicker/Wheel';
import { CALENDAR_HEIGHT } from '../enums';
import { getFormatted, getParsedDate, getDaysNumInMonth, getTimeRange, getDate } from '../utils';
function createNumberList(start, end) {
  return new Array(end - start).fill(0).map((_, index) => String(index + 1 + start).padStart(2, '0'));
}
const DatePicker = () => {
  const {
    columns,
    currentDate,
    onSelectYear,
    onSelectMonth,
    onSelectDate,
    minDate = '1900-01-01',
    maxDate = '2099-12-31'
  } = useCalendarContext();
  const {
    year,
    month
  } = useMemo(() => getParsedDate(getDate(currentDate).isAfter(getDate(maxDate)) ? maxDate : getDate(currentDate).isBefore(getDate(minDate)) ? minDate : currentDate), [currentDate, maxDate, minDate]);
  const {
    year: startYear,
    month: startMonth
  } = getParsedDate(minDate);
  const {
    year: endYear,
    month: endMonth
  } = getParsedDate(maxDate);
  const years = createNumberList(startYear - 1, endYear);
  const months = useMemo(() => createNumberList(startYear === year ? startMonth : 0, endYear === year ? endMonth + 1 : 12), [endMonth, endYear, startMonth, startYear, year]);
  const days = useMemo(() => getDaysNumInMonth(year, month + 1, minDate, maxDate), [year, month, minDate, maxDate]);
  const hours = useMemo(() => createNumberList(...getTimeRange(currentDate, minDate, maxDate, 'hour')), [currentDate, maxDate, minDate]);
  const minutes = useMemo(() => createNumberList(...getTimeRange(currentDate, minDate, maxDate, 'minute')), [currentDate, maxDate, minDate]);
  const seconds = useMemo(() => createNumberList(...getTimeRange(currentDate, minDate, maxDate, 'second')), [currentDate, maxDate, minDate]);
  const handleChangeDate = useCallback((value, data, type) => {
    const newDate = getDate(currentDate)[type](Number(data[value]));
    onSelectDate(getFormatted(newDate));
  }, [currentDate, onSelectDate]);
  const createIndicatorStyle = useCallback(index => {
    const len = (columns === null || columns === void 0 ? void 0 : columns.length) || 0;
    if (!index && len > 1) return {
      borderTopRightRadius: 0,
      borderBottomRightRadius: 0
    };else if (index === len - 1 && len > 1) return {
      borderTopLeftRadius: 0,
      borderBottomLeftRadius: 0
    };else if (len > 2) return {
      borderRadius: 0
    };else return undefined;
  }, [columns]);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.datePickerContainer
  }, columns === null || columns === void 0 ? void 0 : columns.map((item, index) => /*#__PURE__*/React.createElement(View, {
    style: styles.wheelContainer,
    key: item
  }, item === 'year' && /*#__PURE__*/React.createElement(Wheel, {
    value: years.indexOf(String(year)),
    items: years,
    key: years.length,
    setValue: value => onSelectYear(Number(years[value])),
    indicatorStyle: createIndicatorStyle(index)
  }), item === 'month' && /*#__PURE__*/React.createElement(Wheel, {
    value: months.indexOf(String(month + 1).padStart(2, '0')),
    items: months,
    key: months.length,
    setValue: value => onSelectMonth(Number(months[value]) - 1),
    indicatorStyle: createIndicatorStyle(index)
  }), item === 'day' && /*#__PURE__*/React.createElement(Wheel, {
    value: days.indexOf(String(getDate(currentDate).date()).padStart(2, '0')),
    key: days.length,
    items: days,
    setValue: value => handleChangeDate(value, days, 'date'),
    indicatorStyle: createIndicatorStyle(index)
  }), item === 'hour' && /*#__PURE__*/React.createElement(Wheel, {
    value: hours.indexOf(String(getDate(currentDate).hour()).padStart(2, '0')),
    key: hours.length,
    items: hours,
    setValue: value => handleChangeDate(value, hours, 'hour'),
    indicatorStyle: createIndicatorStyle(index)
  }), item === 'minute' && /*#__PURE__*/React.createElement(Wheel, {
    value: minutes.indexOf(String(getDate(currentDate).minute()).padStart(2, '0')),
    key: minutes.length,
    items: minutes,
    setValue: value => handleChangeDate(value, minutes, 'minute'),
    indicatorStyle: createIndicatorStyle(index)
  }), item === 'second' && /*#__PURE__*/React.createElement(Wheel, {
    value: seconds.indexOf(String(getDate(currentDate).second()).padStart(2, '0')),
    key: seconds.length,
    items: seconds,
    setValue: value => handleChangeDate(value, seconds, 'second'),
    indicatorStyle: createIndicatorStyle(index)
  })))));
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  wheelContainer: {
    flex: 1
  },
  datePickerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 16,
    height: CALENDAR_HEIGHT / 2
  }
});
export default DatePicker;
//# sourceMappingURL=DatePicker.js.map