angular-pure-datepicker
angular-pure-datepicker - is kind of old-school date select, but with modern look and feel and abilities.
| [Demos and documentation] 1 |
More info
tldr;
Stability
Not stable yet; Use it only in test or development cases.
Installation and usage
-
Download it
bower install angular-pure-datepicker --save
npm install ??? --save
(not ready yet)(look for other package managers)
or download from git: releases
-
Add to html
-
Add as angilarjs project's dependency:
angular -
Add a directive to html
Options
-
ng-model
-Object
, can beempty
ornull
, butrequired
.The result of select would placed here. Also if ng-model is object with
datetime
field (should contain number), it's will be applied as initial date value. -
apd-start
-number
,optional
.Datetime of a lower date limit (model's values lower then limit wouldn't be applied).
-
apd-end
-number
,optional
.Datetime of a upper date limit (model's values upper then limit wouldn't be applied).
-
apd-day-id
-string
,optional
.Setter of custom id for the days select element.
-
apd-month-id
-string
,optional
.Setter of custom id for the month select element.
-
apd-year-id
-string
,optional
.Setter of custom id for the years select element.
-
apd-day-classes
-string
,optional
.Setter of custom classes for the days select element.
-
apd-month-classes
-string
,optional
.Setter of custom classes for the month select element.
-
apd-year-classes
-string
,optional
.Setter of custom classes for the years select element.
Features
- No dependencies (except angular of course);
- About 13kb minified;
- Support start date and end date limitation;
- No popups;
- Easy to customize - you'll be able to provide any class or id for any element inside directive;
- Localization (development in progress);
Compatibility with browsers
- Chrome;
- Firefox (select arrows will be hidden);
- ...
Localization
There only localization what may be needed is for names of days of week.
(here should be instructions when it's done)
How to port to other framework?
It's should be easy. Most of business logic placed in ./src/classes
dir, and angular_directive.ts
only works with
DOM. You may easily replace it with any other view implementation.
Report issue
github.com/se-panfilov/angular-pure-datepicker/issues
Contribution
All contributions are welcome. Please add a Pull-Request. If you not sure about TypeScript, you ay wrote your PR in JS (it's will be easy to port after all).
You may found few hand-test cases in dev-server branch. It will be better if you test how it works on it.
How it works (for users)
(how it resolve conflicts of limits and datetime, only datetime has mean, what data provided in model, etc...)
How it works (for developers)
(should write basics of apd)
License
MIT: go to text