Skip to content

Commit eb1f986

Browse files
author
Gus Clemens
committed
New option for setting the 'required' attribute on the date picker input element.
1 parent bf063fe commit eb1f986

File tree

5 files changed

+28
-4
lines changed

5 files changed

+28
-4
lines changed

pages/index.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default function Playground() {
3131
const [newDisabledDates, setNewDisabledDates] = useState({ startDate: "", endDate: "" });
3232
const [startFrom, setStartFrom] = useState("2023-03-01");
3333
const [startWeekOn, setStartWeekOn] = useState("");
34+
const [required, setRequired] = useState(false);
3435

3536
const handleChange = (value, e) => {
3637
setValue(value);
@@ -113,6 +114,7 @@ export default function Playground() {
113114
return isEmpty ? "Select Date" : "Clear";
114115
}}
115116
popoverDirection={"down"}
117+
required={required}
116118
// classNames={{
117119
// input: ({ disabled, readOnly, className }) => {
118120
// if (disabled) {
@@ -215,6 +217,20 @@ export default function Playground() {
215217
</label>
216218
</div>
217219
</div>
220+
<div className="mb-2 w-1/2 sm:w-full">
221+
<div className="inline-flex items-center">
222+
<input
223+
type="checkbox"
224+
className="mr-2 rounded"
225+
id="required"
226+
checked={required}
227+
onChange={e => setRequired(e.target.checked)}
228+
/>
229+
<label className="block" htmlFor="required">
230+
Required
231+
</label>
232+
</div>
233+
</div>
218234
</div>
219235
<div className="w-full sm:w-1/3 pr-2 flex flex-col">
220236
<div className="mb-2">

src/components/Datepicker.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,8 @@ const Datepicker: React.FC<DatepickerType> = ({
4141
inputName,
4242
startWeekOn = "sun",
4343
classNames = undefined,
44-
popoverDirection = undefined
44+
popoverDirection = undefined,
45+
required = false
4546
}) => {
4647
// Ref
4748
const containerRef = useRef<HTMLDivElement | null>(null);
@@ -282,7 +283,8 @@ const Datepicker: React.FC<DatepickerType> = ({
282283
classNames,
283284
onChange,
284285
input: inputRef,
285-
popoverDirection
286+
popoverDirection,
287+
required
286288
};
287289
}, [
288290
asSingle,
@@ -315,7 +317,8 @@ const Datepicker: React.FC<DatepickerType> = ({
315317
classNames,
316318
inputRef,
317319
popoverDirection,
318-
firstGotoDate
320+
firstGotoDate,
321+
required
319322
]);
320323

321324
const containerClassNameOverload = useMemo(() => {

src/components/Input.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ const Input: React.FC<Props> = (e: Props) => {
3636
inputId,
3737
inputName,
3838
classNames,
39-
popoverDirection
39+
popoverDirection,
40+
required
4041
} = useContext(DatepickerContext);
4142

4243
// UseRefs
@@ -273,6 +274,7 @@ const Input: React.FC<Props> = (e: Props) => {
273274
className={getClassName()}
274275
disabled={disabled}
275276
readOnly={readOnly}
277+
required={required}
276278
placeholder={
277279
placeholder
278280
? placeholder

src/contexts/DatepickerContext.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ interface DatepickerStore {
5050
inputName?: string;
5151
classNames?: ClassNamesTypeProp;
5252
popoverDirection?: PopoverDirectionType;
53+
required?: boolean;
5354
}
5455

5556
const DatepickerContext = createContext<DatepickerStore>({
@@ -92,6 +93,7 @@ const DatepickerContext = createContext<DatepickerStore>({
9293
toggleIcon: undefined,
9394
classNames: undefined,
9495
popoverDirection: undefined,
96+
required: false,
9597
separator: "~"
9698
});
9799

src/types/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ export interface DatepickerType {
8282
disabledDates?: DateRangeType[] | null;
8383
startWeekOn?: string | null;
8484
popoverDirection?: PopoverDirectionType;
85+
required?: boolean;
8586
}
8687

8788
export type ColorKeys = (typeof COLORS)[number]; // "blue" | "orange"

0 commit comments

Comments
 (0)