Angular DateRange Picker II

This date picker is forked from this repo authored by jankuri. The date picker is completely re-factored. It contain fixes for issues from original repo and implements a few new features.

You can try it live on stackblitz

Installation

npm i @matew/ng-daterangepicker-2 --save

or

yarn add @matew/ng-daterangepicker-2

Configuration

interface NgDateRangePickerOptions {
    initialDateRange: NgDateRange;
    inputFormat: (input: any) => NgDateRange;
    outputFormat: (dateRange: NgDateRange) => any;
    startOfWeek: number;
    dayNames: string[];
    inputNames: {
        from: string;
        to: string;
    };
    visibleDateFormat: string | ((date: Date) => string);
    alignment: 'left' | 'center' | 'right';
    shortCuts: 'thisMonth' | 'lastMonth' | 'lastWeek' | 'thisWeek' | 'thisYear' | 'lastYear' | NgDaterangeShortcutEntity;
    limitRange?: NgDateRange | null;
}

interface NgDaterangeShortcutEntity {
    title: string;
    range: (now: Date) => NgDateRange;
    visibleMonth: (state: 'from' | 'to') => Date;
}

interface NgDateRange {
    from: Date;
    to: Date;
}

| Variable | Default | Description | |----------|:-------------:|------| | initialDateRange | { from: now, to: now } | This value will used when you don't set value by formControl or ngModel | | inputFormat | (input: NgDateRange) => NgDateRange | Allow you to map input value | | outputFormat | (data: NgDateRange) => NgDateRange | Allow you to map output value | | startOfWeek | number | Allow you to apply offset for week start e.g value 0 mark sunday as first day of week | | dayNames | ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] | Allow you to define prefixes of days visible on top of calendar. It's relative to startOfWeek | | inputNames | { from: 'Start', to: 'End'} | Allow you to set label for inputs | | visibleDateFormat | DD-MM-YYYY | Allow you to define visible date format | | alignment | left | Allow you to select alignment of calendar | | shortCuts | ['thisMonth', 'lastMonth', 'lastWeek', 'thisWeek', 'thisYear', 'lastYear'] | Allow you to use predefined shortcuts or define own shortcuts visible next to calendar | | limitRange | null | Allow you to set limit range |

Running the demo

git clone https://github.com/jkuri/ng-daterangepicker.git --depth 1
cd ng-daterangepicker
npm start

Licence

MIT