lxe-native-datetimepicker
v1.1.1
Published
> Styleable datepicker utilizing the native `<input type="date">`
Downloads
3
Readme
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 = 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