React-DatePick

react-datepick can be used to pick a date range in react and specify a data refresh interval.

Demo

Dependencies

• install the package.json dependencies with npm

Example Usage

import React from "react";
import ReactDOM from "react-dom";
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import purple from "@material-ui/core/colors/purple";
import green from "@material-ui/core/colors/green";
import DatePick from "../src/index.tsx";

const app = document.getElementById("app");

function reset() {
  console.log("Reset!");
}

function getData(data) {
  console.log(data);
}

ReactDOM.render(
  <DatePick
    resetFn={reset}
    getData={getData}
  />,
  app
);

Building and Serving the Examples

1. Build the react-datepick project. It will install all of the peer dependencies, so that it may produce a clean build. Finally, link it into the global registry.

  $ npm link
  $ npm install
  $ npm run-script build

NOTE: Make sure you do npm link first, before you run npm install. If the link to the ../../node_modules/react fails below, then it's likely because these steps were inverted.

2. In the example directory, specify the link for the project, install the dependencies, link the duplicate react modules (to avoid duplicate versions), and then serve locally:

  examples/basic_example $ npm link @preston10/react-datepick
  examples/basic_example $ npm install
  examples/basic_example $ npm link ../../node_modules/react
  examples/basic_example $ npm run-script start

NOTE: Occasionally an error of 'Cannot read property 'match' of undefined' occurs. If this happens, remove the package-lock.json and node_modules complete and try again.

NOTE: The sequence of link's and installs is fragile and may not work if executed out of order.

Creating a new version in NPM

$ npm install && npm build && npm publish

Props

• onDateEvent(data: Date[]) (required (data: Date[]) => void))

  • Called every time the user chooses a date, takes a Date[] object

• onTimerEvent() (optional (() => void))

  • Called when the refresh timer resets

• theme (optional)

  • Takes a materialUI createMuiTheme() object

   theme={createMuiTheme({
      palette: {
        primary: purple,
        secondary: green,
      },
    })}

• minimumYearValue (optional number)

  • Takes a number to represent the minimum year to be chosen

      maximumYearValue: {100}

• maximumYearValue (optional number)

  • Takes a number to represent the maximum year to be chosen

   maximumYearValue: {2500}

• relativeIntervals (optional number[])

  • Takes an array of relative intervals to be used in the relative date select dropdown menu

   relativeIntervals: {[60000, 1000]}

• quickSelectIntervals (optional number[])

  • Takes an array of relative intervals to be used in the quick select dropdown menu

   quickSelectIntervals: {[-60000, 1000]}

• localeObj (optional OptionalLocale)

  • Takes any of the followng optional properties

  localeObj={{ nowText: "NOW", localeString: "fr" }}

localeObj properties

• dateFormatter (optional Intl.DateTimeFormat)
  • Takes a Intl.DateTimeFormat object used to format displayed dates

  dateFormatter={
      new Intl.DateTimeFormat("en", {
        year: "numeric",
        month: "short",
        day: "2-digit",
      })
    }

• localeString (optional string)
  • Takes a time-locale string format

   localeString: "en-US"

• relativeTerms (optional string[])
  • Takes an array of 2 relative terms to be used in the relative date select dropdown menu

   relativeTerms=: {["ago", "from now"]}

• quickSelectTerms (optional string[])
  • Takes an array of relative terms to be used in the quick select dropdown menu

   quickSelectTerms: {["ago", "from now"]}

• commonlyUsedText (optional number[])
  • Takes an array of relative intervals to be used in the quick select dropdown menu

   commonlyUsedText: {[-60000, 10000]}   

• nowText (optional string)
  • Takes a string to represent the displayed "now" text

   nowText: "ahora"

Storage

• storedRange (optional () => string[] | null)
  • Takes a function that returns a string[] object representing the date range in milliseconds. Can be used to set date range data to preset or stored value

   storedRange={(): Date[] => {
      let persistedRange = history.location.hash.substring(1).split("=")[1];
      persistedRange = persistedRange.replace(/\%22/g, '"');
      console.log(persistedRange);
      let json = JSON.parse(persistedRange);
  
      return [new Date(json[0]), new Date(json[1])];
    }

• setStoredRange (optional Date[])
  • Takes a Date[] object

      setRawRange={(): string | null => {
         let range = null;
       try {
         range = JSON.parse(
           decodeURIComponent(history.location.hash.substring(1).split("=")[1])
         );
       } catch {
         return null;
       }
       return range;
    }}
  

Customization

• Utilizes materialUI elements
• Compatible with any materialUI createMuiTheme() object configuration
• Add custom date formatters (11/2/2000 vs November 2, 2000)
• Add custom menu text and preset time options
• Fully localized