angular-datepicker-oldschool

    0.1.0 • Public • Published

    Bower version npm version npm stable version Dependency Status devDependency Status npm

    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

    Bitdeli Badge

    Install

    npm i angular-datepicker-oldschool

    DownloadsWeekly Downloads

    7

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • se-panfilov