The create-react-app npm package from the folks at Facebook allows us to generate the skeletal of a ReactJS Application. We use it here to generate the starting point of our example. It uses and pulls down the latest version of ReactJS. Visual Studio Code is my favorite IDE for JavaScript development although you are free to follow along in an IDE of your choice.<\/p>\n
2. Application Structure<\/h2>\n
Let us generate our application structure by running the below command.<\/p>\n
>npx create-react-app my-app\n<\/pre>\nnpx tool that downloads a temporary copy of create-react-app and executes it with the arguments provided. Once the above command completes, we should have the below application structure ready.
<\/div> <\/div><\/p>\n\nProject Structure<\/figcaption><\/figure>\n<\/div>\n Now that we have a project structure ready let us proceed with our implementation.<\/p>\n
3. DatePicker Component<\/h2>\n
We build a component named DatePicker in a file called DatePicker under a folder named Components. This component, implemented as a function component, renders an input tag. And we pass in the type property to this component that is then assigned within the component to the type property of the input tag. <\/p>\n
The input tag supports 3 different types to allow us to display a date\/time picker. The types are as follows:<\/p>\n
\n
- date <\/li>\n
- datetime-local<\/li>\n
- time<\/li>\n<\/ul>\n
The date type displays a datepicker allowing us to select dates. Whereas datetime-local allows us to additionally pick time as well. The time type presents UI to just pick the time.<\/p>\n
The code for our DateTime Component looks like below:<\/p>\n
DatePicker.js<\/em><\/span><\/p>\n
import React from 'react';\n\nfunction DatePicker(props) {\n return <input type={props.type} {...props} \/>;\n}\n\nexport default DatePicker;\n<\/pre>\nTo use our DatePicker Component we need to modify the index.js file. The code for the modified index.js file looks like below:<\/p>\n
index.js<\/em><\/span><\/p>\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/index.css';\nimport DatePicker from '.\/Components\/DatePicker';\nimport * as serviceWorker from '.\/serviceWorker';\n\nReactDOM.render(\n <React.StrictMode>\n <div style={{\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-around',\n alignItems: 'center',\n height: '50vh',\n width: '100vw'\n }}>\n <DatePicker type=\"date\" \/>\n <DatePicker type=\"datetime-local\" \/>\n <DatePicker type=\"time\" \/>\n <\/div>\n <\/React.StrictMode>,\n document.getElementById('root')\n);\n\n\/\/ If you want your app to work offline and load faster, you can change\n\/\/ unregister() to register() below. Note this comes with some pitfalls.\n\/\/ Learn more about service workers: https:\/\/bit.ly\/CRA-PWA\nserviceWorker.unregister();\n\n<\/pre>\nIn the next section we run the application and see it in action.<\/p>\n
4. Component in Action<\/h2>\n
If you are running the downloaded code for this example, you need to run the below command first.<\/p>\n
\/my-app>npm install<\/pre>\nAfter this we run the below command to run the application.<\/p>\n
\/my-app>npm start<\/pre>\nThis should launch our application in the default browser and it will look like below:<\/p>\n
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/04\/DatePickerProjectStructure.jpg\")
![\"ReactJS](\"https:\/\/www.javacodegeeks.com\/wp-content\/uploads\/2020\/04\/ProjectOutputDatePickerExampleReactJS.jpg\")