Date time picker
A date time picker allows the user to select an associated date and time.
Default
By default, selecting the date field opens the calendar view. The current date text is bold, underlined, and highlighted blue. The time field is used to select a time from the select menu.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from "react";
import DateTimePicker from '@neoKit/datetime-picker';
const DatePickerDefault = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatetimePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
/>
);
};
export default DatePickerDefault;
Disable datepicker
By default, User can disabled the datepicker
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from "react";
import DateTimePicker from '@neoKit/datetime-picker';
const DatePickerDisabled = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatetimePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
disabled
placeholderText="This is disabled"
/>
);
};
export default DatePickerDisabled; Date formats
By default, selecting dates are "dd/mm/yy" format.but we can change the date formats.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from "react";
import DateTimePicker from '@neoKit/datetime-picker';
const DatePickerFormats = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatetimePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
dateFormat="yyyy/dd/MM"
/>
);
};
export default DatePickerFormats; Children
User can pass messages to the component and that will displayed bottom of the calender
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from "react";
import DateTimePicker from '@neoKit/datetime-picker';
const DatePickerChildren = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatetimePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
dateFormat="yyyy/dd/MM"
>
<div style={{ color: "red" }}>
Don't forget to check the weather!
</div>
</DatetimePicker>
);
};
export default DatePickerChildren; Clear datepicker input
User can clear the exising data
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from "react";
import DateTimePicker from '@neoKit/datetime-picker';
const DatePickerClear = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatetimePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
dateFormat="yyyy/dd/MM"
isClearable
placeholderText="I have been cleared!"
></DatetimePicker>
);
};
export default DatePickerClear; Custom input
User pass a component instead of the input field
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from "react";
import DateTimePicker from '@neoKit/datetime-picker';
const DatePickerCustomInput = () => {
const [startDate, setStartDate] = useState(new Date());
const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
<Buttons appearance="primary" onClick={onClick} ref={ref}>
{value}
</Buttons>
return (
<DatetimePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
customInput={<ExampleCustomInput />} ></DatetimePicker>
);
};
export default DatePickerCustomInput; Calender with time
User can select time from the list
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from "react";
import DateTimePicker from '@neoKit/datetime-picker';
const DatePickerwithTime = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatetimePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
showTimeSelect
dateFormat="MMMM d, yyyy h:mm aa"
></DatetimePicker>
);
};
export default DatePickerwithTime; Select Time Only
User can select only time
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from "react";
import DateTimePicker from '@neoKit/datetime-picker';
const DatePickerTime = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatetimePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
showTimeSelect
showTimeSelectOnly
timeIntervals={15}
timeCaption="Time"
dateFormat="h:mm aa"
></DatetimePicker>
);
};
export default DatePickerTime;