native-datepicker

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
native-datepicker
3401.1.14 years ago8 years agoMinified + gzip package size for native-datepicker in KB

Readme

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

native-datepicker on npm codeclown/native-datepicker on GitHub
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:

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