reactstrap-date-picker
Version:
Reactstrap based, zero dependencies, date picker
93 lines (92 loc) • 3.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Calendar = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactstrap = require("reactstrap");
var _setTimeToNoon = require("../util/setTimeToNoon");
var _CalendarHeader = require("./CalendarHeader");
var _CalendarSubHeader = require("./CalendarSubHeader");
var _CalendarBody = require("./CalendarBody");
var _CalendarFooter = require("./CalendarFooter");
var _useCalendarDays = require("./useCalendarDays");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var Calendar = _ref => {
var {
popoverRef,
selectedDate,
displayDate,
minDate,
maxDate,
onChange,
dayLabels,
cellPadding,
weekStartsOn,
showTodayButton,
todayButtonLabel,
roundedCorners,
showWeeks,
monthLabels,
previousButtonElement,
nextButtonElement,
pickMonthElement,
placement,
open,
container,
target,
onChangeMonth
} = _ref;
var calendarDays = (0, _useCalendarDays.useCalendarDays)(displayDate, selectedDate, minDate, maxDate, weekStartsOn);
var handleDayClick = e => {
var day = e.currentTarget.getAttribute('data-day');
var newSelectedDate = (0, _setTimeToNoon.setTimeToNoon)(new Date(displayDate));
newSelectedDate.setDate(day);
onChange(newSelectedDate);
};
var handleTodayClick = () => {
var newSelectedDate = (0, _setTimeToNoon.setTimeToNoon)(new Date());
onChange(newSelectedDate);
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactstrap.Popover, {
innerRef: popoverRef,
className: "rdp-popover ".concat(placement)
//toggle = {() => handleHide()}
,
isOpen: open,
container: container,
target: target,
placement: placement
// delay = {200} // does not apply for us (manual triggering)
}, /*#__PURE__*/_react.default.createElement(_reactstrap.PopoverHeader, {
tag: "div"
}, /*#__PURE__*/_react.default.createElement(_CalendarHeader.CalendarHeader, {
previousButtonElement: previousButtonElement,
nextButtonElement: nextButtonElement,
pickMonthElement: pickMonthElement,
displayDate: displayDate,
minDate: minDate,
maxDate: maxDate,
onChange: newDisplayDate => onChangeMonth(newDisplayDate),
monthLabels: monthLabels
})), /*#__PURE__*/_react.default.createElement(_reactstrap.PopoverBody, null, /*#__PURE__*/_react.default.createElement("table", {
className: "rdp-calendar text-center"
}, /*#__PURE__*/_react.default.createElement(_CalendarSubHeader.CalendarSubHeader, {
dayLabels: dayLabels,
showWeeks: showWeeks,
cellPadding: cellPadding
}), /*#__PURE__*/_react.default.createElement(_CalendarBody.CalendarBody, {
calendarDays: calendarDays,
showWeeks: showWeeks,
onDayClick: handleDayClick,
cellPadding: cellPadding,
roundedCorners: roundedCorners
}), /*#__PURE__*/_react.default.createElement(_CalendarFooter.CalendarFooter, {
dayLabels: dayLabels,
showWeeks: showWeeks,
handleTodayClick: handleTodayClick,
showTodayButton: showTodayButton,
todayButtonLabel: todayButtonLabel
})))));
};
exports.Calendar = Calendar;