diff --git a/docs-site/public/index.html b/docs-site/public/index.html index 1055c50b1..39469bb86 100644 --- a/docs-site/public/index.html +++ b/docs-site/public/index.html @@ -9,6 +9,9 @@ React Datepicker crafted by HackerOne + diff --git a/docs-site/src/components/Examples/index.js b/docs-site/src/components/Examples/index.js index d777e61ef..e4f98d673 100644 --- a/docs-site/src/components/Examples/index.js +++ b/docs-site/src/components/Examples/index.js @@ -99,6 +99,8 @@ import selectsRangeWithDisabledDates from "../../examples/selectsRangeWithDisabl import CalendarStartDay from "../../examples/calendarStartDay"; import ExternalForm from "../../examples/externalForm"; import CalendarIcon from "../../examples/calendarIcon"; +import CalendarIconExternal from "../../examples/calendarIconExternal"; +import CalendarIconSvgIcon from "../../examples/calendarIconSvgIcon"; import "./style.scss"; import "react-datepicker/dist/react-datepicker.css"; @@ -118,6 +120,14 @@ export default class exampleComponents extends React.Component { title: "Calendar Icon", component: CalendarIcon, }, + { + title: "Calendar Icon using React Svg Component", + component: CalendarIconSvgIcon, + }, + { + title: "Calendar Icon using External Lib", + component: CalendarIconExternal, + }, { title: "Calendar container", component: CalendarContainer, diff --git a/docs-site/src/examples/calendarIconExternal.js b/docs-site/src/examples/calendarIconExternal.js new file mode 100644 index 000000000..f3e6f6b26 --- /dev/null +++ b/docs-site/src/examples/calendarIconExternal.js @@ -0,0 +1,11 @@ +() => { + const [startDate, setStartDate] = useState(new Date()); + return ( + setStartDate(date)} + icon="fa fa-calendar" + /> + ); +}; diff --git a/docs-site/src/examples/calendarIconSvgIcon.js b/docs-site/src/examples/calendarIconSvgIcon.js new file mode 100644 index 000000000..ffd88f8bc --- /dev/null +++ b/docs-site/src/examples/calendarIconSvgIcon.js @@ -0,0 +1,33 @@ +() => { + const [startDate, setStartDate] = useState(new Date()); + return ( + setStartDate(date)} + icon={ + + + + + + + + + + } + /> + ); +}; diff --git a/docs/datepicker.md b/docs/datepicker.md index 948b98fda..171e2eb01 100644 --- a/docs/datepicker.md +++ b/docs/datepicker.md @@ -45,7 +45,6 @@ General datepicker component. | `injectTimes` | `array` | | | | `inline` | `bool` | | | | `isClearable` | `bool` | | | -| `showIcon` | `bool` | | | | `locale` | `string` | | | | `maxDate` | `instanceOf(Date)` | | | | `maxTime` | `instanceOf(Date)` | | | @@ -69,7 +68,8 @@ General datepicker component. | `peekNextMonth` | `bool` | | | | `placeholderText` | `string` | | | | `popperClassName` | `string` | | | -| `popperContainer` | `func` | | | +| `popperContainer` | `func` | | +| | | `popperModifiers` | `object` | | | | `popperPlacement` | `enumpopperPlacementPositions` | | | | `preventOpenOnFocus` | `bool` | false | When this is true, the datepicker will not automatically open when the date field is focussed | @@ -103,3 +103,6 @@ General datepicker component. | | | `yearItemNumber` | `number` | `12` | | | `yearDropdownItemNumber` | `number` | | | +| `icon` | `string` or `element` | | Allows using a custom calendar icon. Accepts a string (icon class name) or a React component (e.g., custom SVG). If a string is passed, an `` element is rendered with that string as its class name. If a React component is passed, it is rendered as-is. | +| `calendarIconClassName` | `string` | | Accepts a string that will be added as an additional CSS class to the calendar icon, allowing further styling customization. | +| `showIcon` | `bool` | `true` | Determines whether the calendar icon is displayed. Set to `true` to display the icon, and `false` to hide it. If `icon` prop is also provided, the custom icon will be displayed when `showIcon` is `true`. | diff --git a/src/calendar_icon.jsx b/src/calendar_icon.jsx new file mode 100644 index 000000000..23264d5a3 --- /dev/null +++ b/src/calendar_icon.jsx @@ -0,0 +1,43 @@ +import React from "react"; +import PropTypes from "prop-types"; + +const CalendarIcon = ({ icon, className }) => { + const defaultClass = "react-datepicker__calendar-icon"; + + if (React.isValidElement(icon)) { + return React.cloneElement(icon, { + className: `${icon.props.className || ""} ${defaultClass} ${className}`, + }); + } + + if (typeof icon === "string") { + return ( +