A simple Calendar and Time picker component which lets user pick Date/Time through a visual interface. This component uses Moment.js behind the scenes for rendering the calendar and for re-rendering it when the user interacts.
Find the Demo here
npm install react-datetime-selector
The component imported is called DateOrTimePicker. As the name suggests, it can be used for both - picking date or picking time.
The mode of use (date or time) is determined by passing prop timePicker={true} If this prop is not passed it renders the Date Picker by default.
To use the component, simply import it on the top of the file and use to render
Please Note :
-
It is Important to import it as :
import DateOrTimeSelector from '../node_modules/react-datetime-selector/dist/index'
- Important: Please add the relative reference to the node_modules folder according to your directory setup
-
It uses Fontawesome for icons, therefore please add Fontawesome 4 or add Fontawesome 5 to your project.
- It is advisable to submit your email and get a embed code that looks like
<script src="https://kit.fontawesome.com/a57e85d9c9.js" crossorigin="anonymous"></script>
and can be placed
<head></head>tags of yourindex.htmlfile
import DateOrTimeSelector from '../node_modules/react-datetime-selector/dist/index'
class App extends React.Component {
constructor(){
super()
this.state = {
selectedDate='',
selectedTime=''
}
}
handleSelectedDate(selectedDate){
// can convert to JavaScript Date Object if fancied
var date = Date.parse(selectedDate) // returns milliseconds since January 1, 1970, 00:00:00 UTC
date = new Date(date) // creates JavaScript Date Object
// do whatever else with it here (setState etc)
this.setState({ selectedDate })
}
render(){
return(
<div>
// Date Picker
<DateOrTimePicker
pickerWidth={280} // default = 0
zIndex={10} // default = 1
onOk={selectedDate => {
// do stuff here
this.setState({ selectedDate })
}}
/>
// Time Picker
<DateOrTimePicker
timePicker={true}
onOk={selectedDate => this.handleSelectedDate(selectedDate)}
/>
</div>
)
}
}-
onOk (function)
- You'll need to pass the prop
onOkwhich is a function that takes the selected date/time as its argument. After recieveing the date/time in this function you can do whatever you please. By default, ifonOkis not passed, the component willconsole.log()the selected date
- You'll need to pass the prop
-
zIndex (number)
- You can change the z-index of the picker component according to your project needs by passin the prop
zIndex. Default value = 1
- You can change the z-index of the picker component according to your project needs by passin the prop
-
pickerWidth (number)
- This is used to set the width of the picker by passing the prop
pickerWidth. The dates in the calendar are rendered according to this width. Default value = 250
- This is used to set the width of the picker by passing the prop
Currently, the date is returned in the format "MM/DD/YYYY" ie "12/31/2019"
and the time is returned in the format "hh:mm a" ie "04:20 pm"
Both of them are returned as Strings.
To create a Date object out of a string, you can do the following :
var x = "12/31/2019"
var date = Date.parse(x) // returns milliseconds since January 1, 1970, 00:00:00 UTC
date = new Date(date) // creates JavaScript Date Object- Removal of Moment.js dependency
- Provision for styling