File tree Expand file tree Collapse file tree 5 files changed +28
-4
lines changed Expand file tree Collapse file tree 5 files changed +28
-4
lines changed Original file line number Diff line number Diff line change @@ -31,6 +31,7 @@ export default function Playground() {
31
31
const [ newDisabledDates , setNewDisabledDates ] = useState ( { startDate : "" , endDate : "" } ) ;
32
32
const [ startFrom , setStartFrom ] = useState ( "2023-03-01" ) ;
33
33
const [ startWeekOn , setStartWeekOn ] = useState ( "" ) ;
34
+ const [ required , setRequired ] = useState ( false ) ;
34
35
35
36
const handleChange = ( value , e ) => {
36
37
setValue ( value ) ;
@@ -113,6 +114,7 @@ export default function Playground() {
113
114
return isEmpty ? "Select Date" : "Clear" ;
114
115
} }
115
116
popoverDirection = { "down" }
117
+ required = { required }
116
118
// classNames={{
117
119
// input: ({ disabled, readOnly, className }) => {
118
120
// if (disabled) {
@@ -215,6 +217,20 @@ export default function Playground() {
215
217
</ label >
216
218
</ div >
217
219
</ 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 >
218
234
</ div >
219
235
< div className = "w-full sm:w-1/3 pr-2 flex flex-col" >
220
236
< div className = "mb-2" >
Original file line number Diff line number Diff line change @@ -41,7 +41,8 @@ const Datepicker: React.FC<DatepickerType> = ({
41
41
inputName,
42
42
startWeekOn = "sun" ,
43
43
classNames = undefined ,
44
- popoverDirection = undefined
44
+ popoverDirection = undefined ,
45
+ required = false
45
46
} ) => {
46
47
// Ref
47
48
const containerRef = useRef < HTMLDivElement | null > ( null ) ;
@@ -282,7 +283,8 @@ const Datepicker: React.FC<DatepickerType> = ({
282
283
classNames,
283
284
onChange,
284
285
input : inputRef ,
285
- popoverDirection
286
+ popoverDirection,
287
+ required
286
288
} ;
287
289
} , [
288
290
asSingle ,
@@ -315,7 +317,8 @@ const Datepicker: React.FC<DatepickerType> = ({
315
317
classNames ,
316
318
inputRef ,
317
319
popoverDirection ,
318
- firstGotoDate
320
+ firstGotoDate ,
321
+ required
319
322
] ) ;
320
323
321
324
const containerClassNameOverload = useMemo ( ( ) => {
Original file line number Diff line number Diff line change @@ -36,7 +36,8 @@ const Input: React.FC<Props> = (e: Props) => {
36
36
inputId,
37
37
inputName,
38
38
classNames,
39
- popoverDirection
39
+ popoverDirection,
40
+ required
40
41
} = useContext ( DatepickerContext ) ;
41
42
42
43
// UseRefs
@@ -273,6 +274,7 @@ const Input: React.FC<Props> = (e: Props) => {
273
274
className = { getClassName ( ) }
274
275
disabled = { disabled }
275
276
readOnly = { readOnly }
277
+ required = { required }
276
278
placeholder = {
277
279
placeholder
278
280
? placeholder
Original file line number Diff line number Diff line change @@ -50,6 +50,7 @@ interface DatepickerStore {
50
50
inputName ?: string ;
51
51
classNames ?: ClassNamesTypeProp ;
52
52
popoverDirection ?: PopoverDirectionType ;
53
+ required ?: boolean ;
53
54
}
54
55
55
56
const DatepickerContext = createContext < DatepickerStore > ( {
@@ -92,6 +93,7 @@ const DatepickerContext = createContext<DatepickerStore>({
92
93
toggleIcon : undefined ,
93
94
classNames : undefined ,
94
95
popoverDirection : undefined ,
96
+ required : false ,
95
97
separator : "~"
96
98
} ) ;
97
99
Original file line number Diff line number Diff line change @@ -82,6 +82,7 @@ export interface DatepickerType {
82
82
disabledDates ?: DateRangeType [ ] | null ;
83
83
startWeekOn ?: string | null ;
84
84
popoverDirection ?: PopoverDirectionType ;
85
+ required ?: boolean ;
85
86
}
86
87
87
88
export type ColorKeys = ( typeof COLORS ) [ number ] ; // "blue" | "orange"
You can’t perform that action at this time.
0 commit comments