Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tristen/datepickr
The do it yourself date picker
https://github.com/tristen/datepickr
Last synced: 19 days ago
JSON representation
The do it yourself date picker
- Host: GitHub
- URL: https://github.com/tristen/datepickr
- Owner: tristen
- Created: 2014-10-26T17:13:01.000Z (about 10 years ago)
- Default Branch: gh-pages
- Last Pushed: 2018-01-13T15:30:12.000Z (almost 7 years ago)
- Last Synced: 2024-04-14T22:18:36.356Z (8 months ago)
- Language: JavaScript
- Homepage: http://tristen.ca/datepickr/demo/
- Size: 88.9 KB
- Stars: 9
- Watchers: 2
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
Datepickr
---
The do it yourself date picker. It makes as no assumptions how it's shown on
the page. [__See demo__](http://tristen.ca/datepickr/demo/).
- Need to show/hide it on an input field? __Do it yourself__.
- Need to have it insert one date after selection? __Do it yourself__.
- Need nice formatted dates after selection? __Do it yourself__.
### Usage
``` html
var el = document.getElementById('datepickr');
new Datepickr(el, function(res) {
// console.log(res);
});
```
### API
#### `new Datepickr(element, callback, options);`
The callback returns an array of arrayed dates whenever a date is selected.
```
[
[1412481600000,1],
[1413864000000,1],
[1413950400000,1],
[1414468800000,1]
]
```
The first field value is a timestamp along with `1` or `0.5` depending on
whether halfdays are enabled as an option or not.
| Option | Default Value | Description |
| ---- | ---- | ---- |
| weekdays | An array of weekday strings in English | Option for translation |
| months | An array of month strings in English | Option for translation |
| startYear | Current year | Start the date picker on a particular year |
| startMonth | Current month | Start the date picker on a particular month |
| minDate | null | a timestamp representing a maximum date the pager should page |
| maxDate | null | a timestamp representing a minimum date the pager should page |
| halfDay | false | Enables halfday selection of dates |
| omitPast | false | Prevent selecting days in the past |
| omitFuture | false | Prevent selecting days in the future |
| omitWeekends | false | Prevent selecting weekends |
| omitDays | Empty array | Pass a timestamp array of dates to prevent the selection of |
| activeDays | Empty array | Pass an array of arrayed dates ie. `[[[1413950400000,1],[1414468800000,0.5]` that are auto selected on load |
| utc | false | Should date output be interpreted as UTC |
| singleSelection | false | Limit days selection to one day. |
To see examples of each option [see the demos](http://tristen.ca/datepickr/demo/).
### Adding/Removing options after initialization.
``` js
var pickr = new Datepickr(el);
pickr.options({
halfDay: true
});
```
### Use with node or browserify.
``` js
// npm install datepickr
var datepickr = require('datepickr')
datepickr(el, function(res) {
console.log(res);
});
```
### Developing
npm install && npm start
### Building
npm run build
### Credits
Code originally based off of [datepickr](https://code.google.com/p/datepickr/).