angular-datepicker-oldschool

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

1. Download it

   bower install angular-pure-datepicker --save

   npm install ??? --save (not ready yet)

   (look for other package managers)

   or download from git: releases

2. Add to html

   <link href="bower_components/angular-pure-datepicker/dist/angular-pure-datepicker.css">
   <script src="bower_components/angular-pure-datepicker/dist/angular-pure-datepicker.min.js"></script>

3. Add as angilarjs project's dependency:

       angular.module('demo', [
           'angular-pd'
       ])

4. Add a directive to html

Options

• ng-model - Object, can be empty or null, but required.

  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