native-datepicker

native-datepicker

Styleable datepicker utilizing the native <input type="date">

Features:

• Light-weight, no dependencies
• Includes optional React-component
• Supports datetime strings (only replaces date-portion upon change)
• Simple styling, with BEM classes

Example/demo:

• https://codeclown.github.io/native-datepicker/example.html

Browser support

Supported:

• Chrome
• Firefox
• Edge
• Safari iOS

Not supported (datepicker is hidden):

• Safari MacOS
• IE

Usage

Vanilla JS

const NativeDatepicker = require('native-datepicker');
const picker = new NativeDatepicker({
  onChange: (newValue) => {
    console.log(newValue);
  },
});
someElement.appendChild(picker.element);

See API.

See also example.html (source).

React

const NativeDatepicker = require('native-datepicker/src/react');
const SomeComponent = () => {
  const [date, setDate] = useState('2020-11-01');
  return (
    <NativeDatepicker value={date} onChange={(newValue) => setDate(newValue)} />
  );
};

See React API.

API

class NativeDatepicker

constructor(options)

options is an object with the following properties:

options.onChange

type: function default: (value) => {}

Callback function which is called when the user selects a new date.

Receives the new value as string (e.g. "2020-11-01" or "2020-11-01 13:15:00"; just the date-portion of the original value is replaced).

options.initialValue

type: string default: ""

Set the initial date input value.

These are equivalent:

const datepicker = new NativeDatepicker({
  initialValue: '2020-11-09 12:43:00',
});
// or
const datepicker = new NativeDatepicker();
datepicker.setValue('2020-11-09 12:43:00');

options.existingElement

type: DOMElement default: null

If set, existing element will be used instead of creating a new span element.

options.win

type: Window default: window

For the rare use case (e.g. using inside a child iframe) when setting window is necessary.

setValue(dateString)

Set the value of the datepicker.

dateString should be a string containing a date in YYYY-MM-DD format. For example, all of these are valid:

• "2020-11-01"
• "2020-11-01 13:15:00"
• "2020-11-01T13:15:00"

Upon changes, NativeDatepicker will replace the date-portion of the string and return the result.

element

Contains a reference to the datepicker element.

React API

NativeDatepicker component

Props:

<NativeDatepicker
  value={date}
  onChange={(newValue) => {}}
  className="customClassName"
>
  {optionalChildren}
</NativeDatepicker>

props.value

type: string default: ""

Initial value. Examples:

• value="2020-11-01"
• value="2020-11-01 13:15:00"
• value="2020-11-01T13:15:00"

props.onChange

type: function default: (value) => {}

Callback function which is called when the user selects a new date.

Receives the new value as string (e.g. "2020-11-01" or "2020-11-01 13:15:00"; just the date-portion of the original value is replaced).

props.className

type: string default: ""

Custom className for the created element.

Example with className="CustomClass":

<span class="NativeDatepicker CustomClass">
  <input class="NativeDatepicker__input" type="date" />
</span>

optionalChildren

If children are given, they are inserted into the resulting DOM. This can be used for any styling needs.

Example:

<span class="NativeDatepicker">
  <!-- Children will be inserted here -->
  <input class="NativeDatepicker__input" type="date" />
</span>

Styling / DOM structure

The following DOM is created for each datepicker:

<span class="NativeDatepicker">
  <input class="NativeDatepicker__input" type="date" />
</span>

The recommended way to style the datepicker is to apply styles (e.g. width/height and a background-image) to the topmost element. Example:

.NativeDatepicker {
  width: 16px;
  height: 16px;
  background: transparent url(...) no-repeat center center;
}

Note: under normal circumstances you should not add any styles to .NativeDatepicker__input!

Development

Source files reside in src/. Note that src/index.js is not precompiled in any way; it should remain valid ES5 (no worries, though; this is checked by eslint).

Release process (for maintainers)

Keep CHANGELOG.md up-to-date. Run:

yarn test
# will ask for updated version number
yarn publish
# remember to push commits and tags to remote
git push --follow-tags

License

ISC