> Styleable datepicker utilizing the native `<input type="date">`
npm install native-datepicker> Styleable datepicker utilizing the native
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
Supported:
- Chrome
- Firefox
- Edge
- Safari iOS
Not supported (datepicker is hidden):
- Safari MacOS
- IE
``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).
`jsx`
const NativeDatepicker = require('native-datepicker/src/react');
const SomeComponent = () => {
const [date, setDate] = useState('2020-11-01');
return (
);
};
See React API.
#### 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:
`js`
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"
-
-
Upon changes, NativeDatepicker will replace the date-portion of the string and return the result.
#### element
Contains a reference to the datepicker element.
Props:
`jsx`
onChange={(newValue) => {}}
className="customClassName"
>
{optionalChildren}
#### props.value
type: string default: ""
Initial value. Examples:
- value="2020-11-01"
-
-
#### 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":
`html`
#### optionalChildren
If children are given, they are inserted into the resulting DOM. This can be used for any styling needs.
Example:
`html`
The following DOM is created for each datepicker:
`html`
The recommended way to style the datepicker is to apply styles (e.g. width/height and a background-image) to the topmost element. Example:
`css`
.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!
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).
Keep CHANGELOG.md up-to-date. Run:
`bash``
yarn testwill ask for updated version number
yarn publishremember to push commits and tags to remote
git push --follow-tags