Package Exports

angular-2-daterangepicker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-2-daterangepicker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

angular-2-daterangepicker

About this package

Daterangepicker for Angular vX.X. Although the name of package is angular 2 it is compatible with angular v4 and v5

It is a fully responsive daterangepicker with or without bootstrap.css. See responsive section below for more details.

This module is strictly intended to work on browsers only and not in node/browserless environments

This is a work in progress and you are always welcome to help me going forward with this project.

Announcements

Date: 28 Apr 2018
- Fixing a small CSS issue in version 1.1.28
Date: 31 Mar 2018
- New option for singleCalendar added in version 1.1.27
Date: 25 Mar 2018
- Made some changes in CSS and responsiveness in version v1.1.26
Date: 23 Mar 2018
- New option for DisplayFormat added in version v1.1.25
Date: 20 Jan 2018
- Module less than version v1.0.10 is no longer supported

Getting Started

Install

$ npm install angular-2-daterangepicker

$ bower install angular-2-daterangepicker

Demo

see Demo or Plunker to how to consume this module

Usage

How to make it work for you

Import DaterangepickerModule into your module as following

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { DaterangepickerModule } from 'angular-2-daterangepicker';
@NgModule({
    imports: [BrowserModule, DaterangepickerModule],
    declarations: [ AppComponent ],
    bootstrap: [AppComponent]
})
export class AppModule {
    
}

Options

Currently, very minimum number of options are available but I will keep on developing and adding more and more options

Option Name	Type	Purpose
format	string	format that this daterangepicker will use to communicate with your code	"YYYY-MM-DD"
displayFormat	string	format that will be displayed to end user	Same as format
startDate	string	Default start date when this components is rendered for first time. Format of this date should be in line with format option's value above	Current Systetm Date
endDate	string	Default end date when this components is rendered for first time. Format of this date should be in line with format option's value above	Current Systetm Date
minDate	string	Default minimum date not including this date. End user will not be able select all dates before this date. Format of this date should be in line with format option's value above	null
maxDate	string	Default maximum date not including this date. End user will not be able select all dates after this date. Format of this date should be in line with format option's value above	null
inactiveBeforeStart	boolean	Blurs all dates before selected start date. So end user can not select toDate to be before fromDate.	false
autoApply	boolean	Removes apply and cancel buttons and applies as soon as user selects end date	false
showRanges	boolean	Predefined ranges to show to end user. So end user has ready options instead of navingating through calendars.	false
preDefinedRanges	Array of object shown as below.	Custom ranges if you want to define your own ranges. This is useful only if showRanges option is set to true.	see below for more details
noDefaultRangeSelected	boolean	This option set the startDate and endDate options to blank on first render.This date range picker sets startDate and endDate to be current system date by dafault if no value is passed to startDate and endDate.	false
singleCalendar	boolean	Use only one calendar. So you do not need another datepicker for single month.	false

Custom Range

For custom range, Pass options as below. For this you need to pass momentjs objects.

        preDefinedRanges: [{
            name: 'Day After tomorrow',
                value: {
                    start: moment().add(2, 'days'),
                    end: moment().add(2, 'days'),
                }
            },{
            name: 'This week',
            value: {
                start: moment(),
                end: moment().add(7, 'days'),
            }
        }]

All dates are supposed to be string and in format as you are passing. You can also

import { Options } from 'angular-2-daterangepicker';

class for passing options to the component.

Events

Subscribe to rangeSelected event as

<date-range-picker [class]="'col-md-12 form-control'" [options]="daterangepickerOptions" (rangeSelected)="rangeSelected($event)"></date-range-picker>

the event listener will receive a javascript object conaining

{
    start: 'moment object representing start date selected by user'
    end: 'moment object representing end date selected by user'
}

and if you have set singleCalendar to true then the event listener will receive following

{
    start: 'moment object representing date selected by user'
}

How pass options to the component

The input box automatically takes class of the date-range-picker tag

import { Component } from '@angular/core';

@Component({
    selector: "my-datepicker-demo",
    template: `
        <date-range-picker class="col-md-4" [options]="daterangepickerOptions" class="col-md-4">
        </date-range-picker>
    `
})
export class AppComponent{
    daterangepickerOptions = {
        startDate: '09/01/2017',
        endDate: '09/02/2017',
        format: 'DD/MM/YYYY'
    }
}

Dependencies

moment.js version greater than 2.17.1
moment-range.js version 2.2.0
also you should have installed @types/node or see here for more information. I suggest installing all the dependencies before this module

Responsive CSS

If you are using bootstrap.css then just include the following styling in your code if you do not want to include whole bootstrap.css then include this css in your code.

<style>
        .daterangepicker {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
            font-size: 14px;
            position: absolute;
            top: 34px;
        }

        @media (min-width: 550px) {
            .daterangepicker {
                width: 550px;
            }
        }

        @media (max-width: 550px) {
            .daterangepicker {
                width: 270px;
            }
            .text-center .pull-right {
                float: none !important;
            }
            .col-md-6 {
                width: 100% !important;
            }
            .col-md-10 {
                width: 100% !important;
            }
            .ranges > div {
                display: none;
            }
        }

        .singledatepicker {
            width: 225px;
        }

        .daterangepicker {
            z-index: 3000;
            border-radius: 4px;
            box-shadow: 0px 2px 2px 2px #ddd;
            border: 1px solid #aaa;
            padding: 10px;
        }

        .daterangepicker div[class*="col-md-"],
        .daterangepicker span[class*="col-md-"] {
            padding: 0 5px 0 5px;
            ;
        }

        .hidden {
            display: none !important;
            visibility: false !important;
        }

        .daterangepicker .calendar {
            margin: 4px;
            float: left;
            border-radius: 4px !important;
        }

        .applyBtn {
            margin: 4px;
        }

        .daterangepicker .flush {
            padding: 0 !important;
            margin: 0 !important;
        }

        .daterangepicker .flush-bottom {
            padding-bottom: 0 !important;
        }

        .daterangepicker .flush-left {
            padding-left: 0 !important;
        }

        .daterangepicker .flush-right {
            padding-right: 0 !important;
        }

        .daterangepicker .nudge-half--left {
            padding-left: 4px !important;
        }

        .daterangepicker .nudge-half--right {
            padding-right: 4px !important;
        }

        .daterangepicker .nudge-top {
            top: 5px;
        }

        .daterangepicker .push-bottom {
            margin-bottom: 10px;
        }

        .daterangepicker th {
            margin: 1px !important;
            padding: 1px !important;
            text-align: center;
            border-radius: 4px !important;
        }

        .daterangepicker td {
            font-size: 14px;
            height: 20px;
            width: 20px;
            text-align: center;
            margin: 1px !important;
            padding: 3px !important;
            border-radius: 4px !important;
            white-space: nowrap;
            text-align: center;
        }

        .daterangepicker .btn.btn-flat {
            border: none;
            background: transparent;
            margin: 3px !important;
            padding: 1px !important;
        }

        .daterangepicker .off {
            color: #666;
        }

        .daterangepicker table {
            border-spacing: 0;
            border-collapse: collapse;
        }

        .daterangepicker td,
        .daterangepicker th {
            padding: 0;
        }

        .daterangepicker .clickable {
            cursor: pointer;
        }

        .daterangepicker .clickable-link {
            color: #337ab7;
        }

        .daterangepicker .clickable.disabled {
            pointer-events: none;
            color: #AAA;
            cursor: not-allowed;
        }

        .ranges .clickable {
            margin-top: 8px !important;
        }

        .daterangepicker label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .daterangepicker .btn-link {
            padding: 1px 6px 1px 6px !important;
        }

        .daterangepicker .bootstrap-flush{
            margin: 0 !important;
            padding: 0 !important;
        }
    </style>

Issues/Problems

Please let me know if you are facing any issues here

Want to contribute. You are welcome!!! :)

Fork this repo
npm install
Copy all files from this gist to your local folder. And do not add them to git index otherwise they will appear in your pull requests.
run "npm install -g typescript typescript-formatter lite-server concurrently rimraf"
run "npm start"
open browser at http://localhost:3000/
You are all set.
Add features. Fix issues. Open Pull requests.
Remember not to include files from gist in your pull requests