Make Calendar Input Boostrap 4

Question

Here's the scenario that I want : When I click the calendar icon, it will show calendar/date pop up. I'm using bootstrap 4.

This is the result when you run the code Here's the code :

 <!-- DoB -->
                                        <div class="form-group">
                                            <label for="DoB">@yield('DoB')</label>
                                            <div class="input-group" id="DoB">
                                                <input type="text" name="DoB" placeholder="Enter your date of birth"
                                                    class="form-control DoB" required data-toggle="DoB">
                                                <div class="input-group-append">
                                                    <span class="input-group-text text-muted DoB">
                                                        <i class="fa fa-calendar mx-1 DoB"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

Answer 1

Index.js

        import React from 'react'
        import ReactDOM from 'react-dom'
        import './index.css'
        import App from './App'
        import { store } from './app/store'
        import { Provider } from 'react-redux'
        import * as serviceWorker from './serviceWorker';
        import {BrowserRouter} from "react-router-dom";
        
        ReactDOM.render(
          <React.StrictMode>
            <Provider store={store}>
              <BrowserRouter>
                <App />
              </BrowserRouter>
            </Provider>
          </React.StrictMode>,
          document.getElementById('root'),
        )
        
        // If you want your app to work offline and load faster, you can change
        // unregister() to register() below. Note this comes with some pitfalls.
        
        serviceWorker.unregister();

App.js

import React from 'react'
import './App.css'
import { Routes, Route } from 'react-router-dom'
import Header from './components/Header'
import styled from 'styled-components'
import Sidebar from './components/Sidebar'
import Chat from './components/Chat'

function App() {
  return (
    <div className="app">
      <Routes>
        <Route path="/" element={
          <>
            <Header />
            <AppBody>
              <Sidebar />
              <Chat />
            </AppBody>
          </>
        } />
      </Routes>
    </div>
  )
}

export default App