Bootstrap Date Picker For React

A Bootstrap date picker component built with create-react-library.

How to use it:

1. Install the Bootstrap date picker component.

@kamil-perczynski/bootstrap-date-picker

2. Import necessary stylesheet.

@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);

3. Import necessary JavaScript.

import * as React from "https://cdn.skypack.dev/[email protected]";
import * as ReactDOM from "https://cdn.skypack.dev/[email protected]";
import * as DatePicker from "https://cdn.skypack.dev/@kamil-perczynski/[email protected]";
import * as dateFns from "https://cdn.skypack.dev/[email protected]";

4. Render a date picker on the app.

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"));

Preview:

Download Details:

Author: kamil-perczynski

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/kamil-perczynski/bootstrap-datepicker

License: MIT