tiny-picker
Ultra light weight date picker. There are no external dependencies involved. We mimic jQuery UI Datepicker without the bloat
View Demo
Install
npm install tiny-picker --save
Use
Bind to input:
In Javascript:
firstBox:document lastBox: document;
Options:
TinyPicker also takes in options as seen below
firstBox:document // Required -- Overrides us finding the first input box lastBox: document // Required -- Overrides us finding the last input box startDate: // Needs to be a valid instance of Date endDate: // Needs to be a valid instance of Date allowPast: true // If you want the user to be able to select past dates monthsToShow: 2 // How many months to display days: 'Su''Mo''Tu''We''Th''Fr''Sa' // Override for day abbreviations in the calendar overrideClass: 'MY_SPECIAL_CLASS' // to make elements more specific local: 'es-US' // Specifiy the language and date format. < IE 10 defaults to en-US, {} // callback function when user inputs dates, {} // callback fired when err state;
Color/Style Customizations
Currently using standard jQuery colorizations. Just create overriding styles in your own CSS files to change. Classes are currently not specific so overriding should be a breeze!
npm package-size
):
Benchmarking Size (Date Range Packages | minified | Gzipped |
---|---|---|
tiny-picker | 3.31kB | 1.43kB |
tiny-picker + css | 4.9kB | 2.27kB |
Pikaday | 247kB | 70.6kB |
jquery-date-range-picker | 367kB | 110kB |
moment | 232kB | 65.1kB |
air-datepicker | 35.3kB | 9.45kB |
tiny-date-picker | 9.8kB | 3.42kB |
tiny-date-picker + css | 13.3kB | 4.6kB |
Developing and contributing to tiny-picker
Folder structure
The main body of code is in index.js
The tests are in the spec/unit
directory. Please follow naming convention with xxxx.spec.js
Running tests
We use Jasmine The existing tests are in the spec folder.
Please write tests for new additions. We use codecov to test for complete unit test coverage.
Run all the tests:
npm test
Before submitting a pull request
Please make sure all code supports all versions of node. We write code in ES5 syntax for smaller size and browser compatibility.
We use ESLint for syntax consistency, and the linting rules are included in this repository. Running npm test
will check the linting rules as well. Please make sure your code has no linting errors before submitting a pull request.
npm run lint_fix
will also automatically fix any linting errors.