Angular-2-daterangepicker NPM

angular-2-daterangepicker

Warning

:warning: If you are on angular v6 or later. Please consider using angular-datetimerangepicker package

About this package

Announcements

Getting Started

Install

$ npm install angular-2-daterangepicker

$ bower install angular-2-daterangepicker

Demo

see Demo or Plunker to how to consume this module or You can play around with the code on stackblitz here

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

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.

Time Picker

Timepicker options expects an object containing following keys as timepicker options

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-wrapper{
            position: relative;
            border: none;
        }

        .daterangepicker {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
            font-size: 14px;
            position: absolute;
            top: 44px;
            background: #fff;
        }

        .daterangepicker.always-open{
            top: 0;
            box-shadow: none;
        }

        .daterangepicker.open-right{
            right: 0;
        }

        .daterangepicker.open-left{
            left: 0;
        }

        .daterangepicker.open-center{
            right: -50%;
        }

        .daterangepicker.tooltip-chevron:before{
            content: '';
            height: 0px;
            width: 0px;
            border: 10px solid transparent;
            position: absolute;
            border-bottom-color: #aaa; 
            top: -20px;
        }

         .daterangepicker.tooltip-chevron:after{
            content: '';
            height: 0px;
            width: 0px;
            border: 9px solid transparent;
            position: absolute;
            border-bottom-color: #fff;
            top: -18px;
        }
        
        .daterangepicker.open-left.tooltip-chevron:before{
            left: 10px;
        }

        .daterangepicker.open-left.tooltip-chevron:after{
            left: 11px;
        }

        .daterangepicker.open-right.tooltip-chevron:before{
            right: 10px;
        }

        .daterangepicker.open-right.tooltip-chevron:after{
            right: 11px;
        }

         .daterangepicker.open-center.tooltip-chevron:before{
            left: 50%
        }

        .daterangepicker.open-center.tooltip-chevron:after{
            left: 50%;
        }

        @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 15px 0 5px;
        }

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

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

        .applyBtn {
            margin: 4px;
        }

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

        .daterangepicker .flussh {
            padding: 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;
            opacity: 0.5;
            cursor: not-allowed;
        }

        .ranges{
            padding: 5px 0;
        }

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

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

        .daterangepicker .form-control{
            margin: 5px;
        }

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

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

        .daterangepicker .time-picker span{
            padding-left: 4px;
            padding-right: 4px;
        }

        .daterangepicker .time-picker .time-breadcrumb{
            position: relative;
            top: 22px;
            font-weight: bolder;
            font-size: 0.8em;
        }

        .daterangepicker .col-md-1,
        .daterangepicker .col-md-2,
        .daterangepicker .col-md-3,
        .daterangepicker .col-md-4,
        .daterangepicker .col-md-5,
        .daterangepicker .col-md-6,
        .daterangepicker .col-md-7,
        .daterangepicker .col-md-8,
        .daterangepicker .col-md-9,
        .daterangepicker .col-md-10,
        .daterangepicker .col-md-11,
        .daterangepicker .col-md-12 {
            position: relative;
            float: left;
        }

        .daterangepicker .col-md-12 {
            width: 100%;
        }

        .daterangepicker .col-md-11 {
            width: 91.66666667%;
        }

        .daterangepicker .col-md-10 {
            width: 83.33333333%;
        }

        .daterangepicker .col-md-9 {
            width: 75%;
        }

        .daterangepicker .col-md-8 {
            width: 66.66666667%;
        }

        .daterangepicker .col-md-7 {
            width: 58.33333333%;
        }

        .daterangepicker .col-md-6 {
            width: 50%;
        }

        .daterangepicker .col-md-5 {
            width: 41.66666667%;
        }

        .daterangepicker .col-md-4 {
            width: 33.33333333%;
        }

        .daterangepicker .col-md-3 {
            width: 25%;
        }

        .daterangepicker .col-md-2 {
            width: 16.66666667%;
        }

        .daterangepicker .col-md-1 {
            width: 8.33333333%;
        }

        .daterangepicker .col-md-offset-4 {
            margin-left: 33.333333333%;
        }
    </style>