├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── angular.json ├── e2e ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.e2e.json ├── package.json ├── projects └── ngx-animating-datepicker │ ├── README.md │ ├── karma.conf.js │ ├── ng-package.json │ ├── ng-package.prod.json │ ├── package.json │ ├── src │ ├── lib │ │ ├── components │ │ │ ├── animatepicker │ │ │ │ ├── animatepicker.component.html │ │ │ │ ├── animatepicker.component.spec.ts │ │ │ │ └── animatepicker.component.ts │ │ │ ├── datepicker │ │ │ │ ├── datepicker-directive.options.ts │ │ │ │ ├── datepicker.component.html │ │ │ │ ├── datepicker.component.scss │ │ │ │ ├── datepicker.component.spec.ts │ │ │ │ ├── datepicker.component.ts │ │ │ │ ├── datepicker.directive.ts │ │ │ │ └── datepicker.options.ts │ │ │ ├── navigation │ │ │ │ ├── navigation.component.html │ │ │ │ ├── navigation.component.scss │ │ │ │ ├── navigation.component.spec.ts │ │ │ │ └── navigation.component.ts │ │ │ └── sub-navigation │ │ │ │ ├── monthpicker.component.spec.ts │ │ │ │ ├── sub-navigation.component.html │ │ │ │ ├── sub-navigation.component.scss │ │ │ │ └── sub-navigation.component.ts │ │ ├── models │ │ │ ├── datepicker-options.model.ts │ │ │ ├── datepicker.model.ts │ │ │ └── directive-options.model.ts │ │ ├── ngx-animating-datepicker.module.ts │ │ ├── services │ │ │ ├── datepicker.service.ts │ │ │ └── utilities.service.ts │ │ └── shared │ │ │ └── scss │ │ │ ├── _helpers.scss │ │ │ └── _vars.scss │ ├── public_api.ts │ └── test.ts │ ├── tsconfig.lib.json │ ├── tsconfig.spec.json │ └── tslint.json ├── src ├── app │ ├── animations.ts │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.ts │ ├── app.module.ts │ ├── demo │ │ ├── demo.component.html │ │ ├── demo.component.scss │ │ ├── demo.component.spec.ts │ │ └── demo.component.ts │ ├── recipes │ │ ├── recipes.component.html │ │ ├── recipes.component.scss │ │ ├── recipes.component.spec.ts │ │ └── recipes.component.ts │ └── shared │ │ └── scss │ │ └── _helpers.scss ├── assets │ └── .gitkeep ├── browserslist ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── karma.conf.js ├── main.ts ├── polyfills.ts ├── styles.scss ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── tslint.json ├── tsconfig.json ├── tslint.json ├── yarn-error.log └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = tab 7 | indent_size = 4 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | 36 | # e2e 37 | /e2e/*.js 38 | /e2e/*.map 39 | 40 | # System Files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Koen Zigtermann 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Animating Angular Datepicker 2 | An Animating Datepicker for Angular 2+. For some smooth date picking :). Including range functionality, multiple calendars next to each other and loads of other functionality. Checkout the [Demo page](http://zigterman.com/datepicker) for a preview. 3 | 4 | Want an improvement or found bug? please use the pull request functionality or create an issue. 5 | 6 | #### Some existing- and upcoming features 7 | - [x] Directive 8 | - [x] Reactive Forms Support 9 | - [x] Multiple Calendars next to each other 10 | - [x] Composable footer 11 | - [x] Themable 12 | - [x] Multi Languages support using Intl.DateTimeFormat 13 | - [x] Animations 14 | - [ ] i18n 15 | - [ ] Keyboard control 16 | - [ ] ... 17 | 18 | ## Installation 19 | 20 | To install go through the following steps 21 | 22 | 1. `npm install ngx-animating-datepicker --save` -- or -- 23 | `yarn add ngx-animating-datepicker` 24 | 2. Add `AaDatepickerModule` to your module imports: 25 | ```ts 26 | import {AaDatepickerModule} from 'ngx-animating-datepicker'; 27 | 28 | @NgModule({ 29 | ... 30 | imports: [ 31 | ... 32 | AaDatepickerModule 33 | ] 34 | } 35 | ``` 36 | 37 | ## Basic Usage 38 | 39 | Implement the datepicker component in one of the following ways 40 | 41 | ### 1. Inline Animatepicker 42 | Implement aa-animatepicker component inline 43 | 44 | ```html 45 | 48 | ``` 49 | ### 2. As Directive 50 | Implement datepicker as a directive 51 | ```html 52 | 58 | ``` 59 | ### Options 60 | The options can be used for the inline- as well as the directive implementation. 61 | 62 | In the following example you'll see the default options: 63 | 64 | ```ts 65 | datepickerOptions: Options = { 66 | selectMultiple: false, // Select multiple dates 67 | closeOnSelect: false, // Close datepicker when date(s) selected 68 | animationSpeed: 400, // Animation speed in ms 69 | easing: 'ease-in', // Easing type string 70 | hideRestDays: false, // Hide the rest days 71 | disableRestDays: true, // Disable the click on rest days 72 | hideNavigation: false, // Hide the navigation 73 | range: false, // Use range functionality 74 | currentDate: new Date(), // Tne current displayed date (month, year) 75 | timeoutBeforeClosing: 5000, // The timeout / delay before closing 76 | weekdayFormat: 'short', // "narrow", "short", "long" 77 | weekStart: 'monday' // Set the week start day 78 | }; 79 | ``` 80 | 81 | #### Directive options 82 | These options can be used only on the directive like so 83 | 84 | ```html 85 | 86 | ``` 87 | In the following example you'll see the default options 88 | ```ts 89 | directiveOptions: DirectiveOptions = { 90 | appendToBody: true, // Append Datepicker to body 91 | openDirection: 'bottom', // The direction it should open to 92 | closeOnBlur: true // Close the datepicker onBlur 93 | useAnimatePicker: true // Use the regular datepicker or the animating one 94 | }; 95 | ``` 96 | 97 | ### @Input's() 98 | The following inputs are available for the Animatepicker 99 | 100 | ```ts 101 | @Input() minDate: Date; // Disables dates until this date 102 | @Input() maxDate: Date; // Disables dates from this date 103 | @Input() language: string; // Set the locale string. Example: nl-NL 104 | @Input() numberOfMonths: number; // Number of months shown next to eachother 105 | @Input() selectedDates: Date | Date\[\]; // Also a @Output (two-way data bindend) 106 | @Input() theme: string; // Theme string is added to the host 107 | @Input() isOpen: boolean; // The open state 108 | ``` 109 | 110 | #### Directive @input's() 111 | All the above @Input's() can be used with the directive implementation as well. Additionally, you can use these @Input's() for the directive. The assigned values are the default ones: 112 | 113 | 114 | ```ts 115 | @Input() appendToBody = true; // Append Datepicker to the body else append to directive 116 | @Input() openDirection = 'bottom' // 'top', 'left', 'right', 'bottom' 117 | @Input() closeOnBlur = true; // Close datepicker on blur 118 | ``` 119 | 120 | ### Composing 121 | You can add a footer or header to the datepicker by adding a `