# Angular 6 compatible Normal Datepicker along with Date range Calender with support of external data view
Demo
https://tanoy009.github.io/ng6-multidatepicker/
Test Case.
In Pipeline will be updated in a while.
Table of contents
About
angular 6 compatible multipurpose date picker with external data integration support and AOT enabled
Installation
Install through npm:
npm install --save ng6-multidatepicker
Then include in your apps module:
;;
Finally use in one of your apps components:
;
List of settings that can be used to configure the module (all config. are optional):
uiSettings =; uiInputSettings =; minDate //In Format MM/DD/YYYY as string or a Date object or Date in millisecond; (STRICT) (Default is current system date) maxDate //In Format MM/DD/YYYY as string or a Date object or Date in millisecond; (STRICT) (Default is 20 years from min date) defaultFromDate //In Format MM/DD/YYYY as string or a Date object or Date in millisecond; (STRICT) defaultToDate //In Format MM/DD/YYYY as string or a Date object or Date in millisecond; (STRICT) enableRangeSelect = true; //config to enable and disable range select (Default: true) maximumDayInRange = 0; //config to set maximum range to which the user can select. (Default: 0 i.e no limit) isExternalDataAvailable = true; //config to be set true if any external data to be shown inside the calendar promiseData?: Observable<any>; //config to be used when 'isExternalDataAvailable' is set to true and the input should be an observable who returns data according to the format mentioned in doc. dateCallback //this output method will be called whenever user selects a date i.e either from date or to date or both. externalDataCallback //this output method will be called whenever a any month or year is changed to get the fresh latest data to be shown in the calender.
NOTE: 'defaultFromDate' and 'defaultToDate' can only be changed after component initialization. 'promiseData' should always return an observable. Please see the below code for better understanding.
; ;
demo source.
You may also find it useful to view theYou can use it with system js as well
'ng6-multidatepicker': 'npm:ng6-multidatepicker/bundles/ng6-multidatepicker.umd.js'
Usage without a module bundler
<script src="node_modules/ng6-multidatepicker/bundles/ng6-multidatepicker.umd.js"></script>
<script>
// everything is exported ng6Calendar namespace
</script>
Documentation
All documentation is auto-generated from the source via compodoc and can be viewed here: https://tanoy009.github.io/ng6-multidatepicker/docs/
Development
Prepare your environment
- Install Node.js and NPM
- Install local dev dependencies:
npm install
while current directory is this repo
Development server
Run npm start
to start a development server on port 8000 with auto reload + tests.
Testing
Run npm test
to run tests once or npm run test:watch
to continually run tests.
Release
- Bump the version in package.json (once the module hits 1.0 this will become automatic)
npm run release
License
MIT