@matew/ng-daterangepicker-2
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @matew/ng-daterangepicker-2

Weekly Downloads

0

Version

1.1.1

License

MIT

Unpacked Size

878 kB

Total Files

69

Last publish

Collaborators

  • matew