Every front-end developer certainly craves a user-friendly interface that is cool and easy to use. Likewise for the date input, presenting user-friendly date input is one of the challenges for programmers. If you are familiar with JQuery’s datepicker library, React-JS also has a very good library for displaying datepicker input, namely the react-datepicker. However, we need to modify these components to make them easier to use such as the bootstrap datepicker. Follow the following tutorial.
The image above is the final goal of this tutorial. To create a custom react-datepicker bootstrap we need several supporting libraries such as :
- Bootstrap Framework (^4.6.0)
- React-datepicker (^3.8.0)
- React (^17.0.2)
- React-input-mask (^2.0.4)
Okay let’s start this short tutorial:
Table of Contents
How to create a custom react datepicker bootstrap
Install supporting files
– React and Bootstrap (Surely they are well installed in your project)
– React-datepicker
1 | npm install react-datepicker --save |
– React-input-mask
1 | npm install react-input-mask --save |
Creating Custom-Datepicker Components
- Create a folder called Custom-Datepicker
- Add 2 files (index.css and index.js) in the Custom-Datepicker folder
- And copy the code below
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import "./index.css"; import InputMask from "react-input-mask"; const CustomDatePicker = (props) => { const months = [ "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ]; return ( <> <DatePicker customInput={<InputMask type="text" mask="99/99/9999" />} renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => ( <div className="input-group input-group-sm input-group-calender"> <div className="input-group-prepend"> <button onClick={(e) => { e.preventDefault(); decreaseMonth(); }} disabled={prevMonthButtonDisabled} className="btn btn-outline-secondary" type="button" > {"<"} </button> </div> <input type="number" onChange={({ target: { value } }) => changeYear(value)} value={date.getFullYear()} className="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1" /> <select className="form-control" value={months[date.getMonth()]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value)) } > {months.map((option) => ( <option key={option} value={option}> {option} </option> ))} </select> <div className="input-group-append"> <button onClick={(e) => { e.preventDefault(); increaseMonth(); }} className="btn btn-outline-secondary" disabled={nextMonthButtonDisabled} > {">"} </button> </div> </div> )} wrapperClassName={props.wrapperClassName} className="form-control" dateFormat="dd/MM/yyyy" minDate={false} selected={props.selected} onChange={props.onChange} /> </> ); }; export default CustomDatePicker; |
index.css
1 2 3 4 | .input-group-calender { max-width: 225px; padding-left: 15px; } |
How to apply the custom-datepicker component to the ReactJs project
- import your custom component
1 | import CustomDatePicker from "./Custom-Datepicker"; |
- Add the component to your HTML Form
1 2 3 4 5 6 7 | <CustomDatePicker wrapperClassName="datepicker" className="form-control" dateFormat="dd/MM/yyyy" selected={datepick} onChange={(date) => setDatePick(date)} /> |
To try it online, you can check the following code sandbox:
DEMO
Conclusion
- You can customize the datepicker to your liking (for example, change the month to English or the language of your country).
- This is one of the advantages of React (reusable component), it can be used anywhere without creating it from scratch.
Until this step, the short tutorial on making ReactJS datepicker has been completed, please check the other React tutorial pages from our site. happy coding.
Leave a Reply