• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » How To Custom React Datepicker In Bootstrap

How To Custom React Datepicker In Bootstrap

By Sigit Prasetya Nugroho ∙ May 26, 2021 ∙ Javascript ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

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.

Custom React Js Datepicker Bootstrap

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

  • 1 How to create a custom react datepicker bootstrap
    • 1.1 Install supporting files
    • 1.2 Creating Custom-Datepicker Components
    • 1.3 How to apply the custom-datepicker component to the ReactJs project
  • 2 DEMO
  • 3 Conclusion

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.

Another Javascript Related Post :

  • How To Select all Text of Input Box When It Receives Focus React JS
  • React-Table Not Updating or Refreshing Data, The Solution ?
  • Tutorial Create Simple POS Using ReactJS And Laravel Lumen Part 1
  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) ajax (3) amazon (12) Android (8) angular (16) angular 4 (12) angular 4 tutorial (3) angular 5 (4) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (10) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com