react-datetime-selector
v1.0.12
Published
A simple Calendar component which lets user pick Date/Time through a visual interface
Downloads
36
Maintainers
sahilvermaReadme
react-datetime-selector
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
Installation
npm install react-datetime-selectorUsage
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
Example:
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>
)
}
}
Props that can be passed
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
Date Time Format
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
Ongoing Work
- Removal of Moment.js dependency
- Provision for styling