diff --git a/src/components/DatePicker.jsx b/src/components/DatePicker.jsx
index e94067f6a..45bdea44e 100644
--- a/src/components/DatePicker.jsx
+++ b/src/components/DatePicker.jsx
@@ -43,6 +43,7 @@ const DatePicker = forwardRef(
defaultValue,
value,
labelProps,
+ required = false,
...otherProps
},
ref
@@ -63,7 +64,11 @@ const DatePicker = forwardRef(
return (
- {label && }
+ {label && (
+
+ )}
;
+DateInput.args = {
+ label: "Required Date",
+ type: "date",
+ picker: "date",
+ showTime: false,
+ required: true
+};
+DateInput.storyName = "Required Date";
+
const DatePickerWithRef = args => {
const ref = React.useRef();
const [open, setOpen] = React.useState(false);
@@ -209,6 +219,7 @@ export {
DateRangePicker,
DateRangePickerWithPresetRanges,
ShowTime,
+ RequiredDatePicker
};
export default metadata;
diff --git a/tests/DatePicker.test.jsx b/tests/DatePicker.test.jsx
index 17998d3b4..2a3428b12 100644
--- a/tests/DatePicker.test.jsx
+++ b/tests/DatePicker.test.jsx
@@ -109,4 +109,10 @@ describe("DatePicker", () => {
expect(dateInputBox[0]).toHaveValue("11/04/2022");
expect(dateInputBox[1]).toHaveValue("16/05/2022");
});
+
+ it("should render asterisk when required is set to true", () => {
+ const { getByText } = render();
+ const asterisk = getByText("*");
+ expect(asterisk).toBeInTheDocument();
+ });
});