stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @matew/ng-daterangepicker-2 in KB


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


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


yarn add @matew/ng-daterangepicker-2


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



If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.