Package Exports

date-input-control-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (date-input-control-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Date input control React

Uses the date-input-control library under the hood to implement a simple control for capturing dates in any format.

How to use it

Install the date-input-control-react package in your project.

$ npm install date-input-control-react

Import useDateInputControl hook and call it within your component. It will return an array of refs (up to 10) which should be assigned (in order) to your input elements.

import { useDateInputControl } from 'date-input-control-react';

const DateOfBirth = () => {
  const [dd, mm, yyyy] = useDateInputControl();
  return (
    <fieldset role="group">
      <legend>Date of birth</legend>
      <input
        ref={dd}
        type="text"
        maxLength={2}
        inputMode="numeric"
        pattern="[0-9]*"
        defaultValue=""
      />
      <input
        ref={mm}
        type="text"
        maxLength={2}
        inputMode="numeric"
        pattern="[0-9]*"
        defaultValue=""
      />
      <input
        ref={yyyy}
        type="text"
        maxLength={4}
        inputMode="numeric"
        pattern="[0-9]*"
        defaultValue=""
      />
    </fieldset>
  );
};

There are two requirements in order for this package to function correctly:

Inputs must be of type text. You cannot use type number.
Inputs must have a maxLength attribute.

It is recommended that you add inputMode="numeric" and pattern="[0-9*]" on each input which will enable the numeric keyboard on mobile devices.