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:
Browser support
Supported:
- Chrome
- Firefox
- Edge
- Safari iOS
Not supported (datepicker is hidden):
- Safari MacOS
- IE
Usage
Vanilla JS
const NativeDatepicker = ;const picker = { console; };someElement;
See API.
See also example.html
(source).
React
const NativeDatepicker = ;const SomeComponent = const date setDate = ; return <NativeDatepicker = = /> ;;
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 = initialValue: '2020-11-09 12:43:00';// orconst datepicker = ;datepicker;
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 = = ="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"
:
optionalChildren
If children
are given, they are inserted into the resulting DOM. This can be used for any styling needs.
Example:
<!-- Children will be inserted here -->
Styling / DOM structure
The following DOM is created for each datepicker:
The recommended way to style the datepicker is to apply styles (e.g. width/height and a background-image) to the topmost element. Example:
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