A Simple And Configurable Bootstrap Date Picker For React


Category: React React DatePicker | July 5, 2021
Author:kamil perczynski
Official Page:Go to website
Last Update:July 5, 2021
License:MIT

bootstrap date picker for react

Description:

You must be looking for Bootstrap date picker for React. Then, your search ends here because, we have collected a lot of different types of React date pickers on this website.

Here, we are sharing with you a simple and configurable Bootstrap date picker which is built using React create-react-library.

How can I use it?

Step1: First, you will need to install the Bootstrap date picker component with NPM.

npm install --save @kamil-perczynski/bootstrap-date-picker

Step2: Import the CSS style-sheet dependencies.

@import url(https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css);
@import url(https://unpkg.com/@kamil-perczynski/[email protected]/dist/index.css);

Step3: Import the required components.

import React, { useState } from "react";
import { format } from "date-fns";
import { DatePicker, useDatePickerContainer } from "@kamil-perczynski/bootstrap-date-picker";
import "@kamil-perczynski/bootstrap-date-picker/dist/index.css";

Step4: Now, time to render the date picker in your application.

const App = () => {
  return (
    <div className="container">
      <br />
      <div className="row">
        <div className="col-md-4">
          <DatePickerFormGroup
            initialValue="2021-06-03T12:00:00Z"
            type="localdatetime"
          />
        </div>
      </div>
      <br />
      <div className="row">
        <div className="col-md-4">
          <DatePickerFormGroup initialValue="2021-05-03" type="localdate" />
        </div>
      </div>
    </div>
  );
};
const DatePickerFormGroup = ({ type, initialValue }) => {
  const [isOpen, setOpen] = React.useState(false);
  const [value, setValue] = React.useState(initialValue);
  const focuser = DatePicker.useDatePickerContainer(() => setOpen(false));
  return (
    <>
      <div
        onClick={focuser.onClick}
        onBlur={focuser.onBlur}
        ref={focuser.containerRef}
        className="form-group"
      >
        <label htmlFor="date-1">Pick a date:</label>
        <input
          value={dateFns.format(
            new Date(value),
            type === "localdate" ? "dd.MM.yyyy" : "dd.MM.yyyy HH:mm"
          )}
          onFocus={() => setOpen(true)}
          id="date-1"
          readOnly
          className="form-control bg-white"
        />
        <DatePicker.DatePicker
          type={type}
          open={isOpen}
          onClose={() => setOpen(false)}
          value={value}
          onChange={setValue}
          locale="en"
        />
      </div>
      <code>{value || ""}</code>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

🙂