Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codeclown/native-datepicker
Styleable datepicker utilizing the native <input type="date">
https://github.com/codeclown/native-datepicker
datepicker input javascript react
Last synced: about 4 hours ago
JSON representation
Styleable datepicker utilizing the native <input type="date">
- Host: GitHub
- URL: https://github.com/codeclown/native-datepicker
- Owner: codeclown
- License: isc
- Created: 2020-11-01T11:58:43.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2020-11-09T10:52:51.000Z (about 4 years ago)
- Last Synced: 2024-11-11T20:15:50.783Z (6 days ago)
- Topics: datepicker, input, javascript, react
- Language: JavaScript
- Homepage:
- Size: 31.3 KB
- Stars: 34
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# native-datepicker
> Styleable datepicker utilizing the native ``
[](https://www.npmjs.com/package/native-datepicker)
[](https://github.com/codeclown/native-datepicker)
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](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
```js
const NativeDatepicker = require('native-datepicker');
const picker = new NativeDatepicker({
onChange: (newValue) => {
console.log(newValue);
},
});
someElement.appendChild(picker.element);
```
See [API](#api).
See also [`example.html` (source)](./example.html).
### React
```jsx
const NativeDatepicker = require('native-datepicker/src/react');
const SomeComponent = () => {
const [date, setDate] = useState('2020-11-01');
return (
setDate(newValue)} />
);
};
```
See [React API](#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:
```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"`
- `"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:
```jsx
{}}
className="customClassName"
>
{optionalChildren}
```
#### `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"`:
```html
```
#### `optionalChildren`
If `children` are given, they are inserted into the resulting DOM. This can be used for any styling needs.
Example:
```html
```
## Styling / DOM structure
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`!
## 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`](./CHANGELOG.md) up-to-date. Run:
```bash
yarn test
# will ask for updated version number
yarn publish
# remember to push commits and tags to remote
git push --follow-tags
```
## License
[ISC](./LICENSE)