Use this to contribute to https://github.com/technikhil314/angular-2-daterangepicker

app-component.ts

import { Component } from '@angular/core';
import { NgModel } from '@angular/forms';
import * as moment from 'moment';
@Component({
	selector: "my-datepicker-demo",
	template: `
		<div class="col-md-7 separator-right">
			<h3>Configuration Options Tester</h3>
			<form>
				<div class="col-md-12">
					<input type="checkbox" name="singleCalendar" [(ngModel)]=daterangepickerOptions.singleCalendar id="singleCalendar">
					<label class="label" for="singleCalendar">Single Calendar</label>
				</div>
				<div class="col-md-12">
					<input type="checkbox" name="autoApply" [(ngModel)]=daterangepickerOptions.autoApply id="autoApply">
					<label class="label" for="autoApply">Auto Apply</label>
				</div>
				<div class="col-md-12">
					<input type="checkbox" name="inactiveBeforeStart" [(ngModel)]=daterangepickerOptions.inactiveBeforeStart id="inactiveBeforeStart">
					<label class="label" for="inactiveBeforeStart">Inactive Before Start</label>
				</div>
				<div class="col-md-12">
					<input type="checkbox" name="disableBeforeStart" [(ngModel)]=daterangepickerOptions.disableBeforeStart id="disableBeforeStart">
					<label class="label" for="disableBeforeStart">Disable Before Start</label>
				</div>
				<div class="col-md-12">
					<input type="checkbox" name="disabled" [(ngModel)]=daterangepickerOptions.disabled id="disabled">
					<label class="label" for="disabled">Disabled</label>
				</div>
				<div class="col-md-12">
					<input type="checkbox" name="showRanges" [(ngModel)]="daterangepickerOptions.showRanges" id="showRanges">
					<label class="label" for="showRanges">Show Ranges</label>
				</div>
				<div class="col-md-12">
					<input type="checkbox" name="noDefaultRangeSelected" [(ngModel)]="daterangepickerOptions.noDefaultRangeSelected" id="noDefaultRangeSelected">
					<label class="label" for="noDefaultRangeSelected">No Default Range Selected</label>
				</div>
				<div class="col-md-12">
					<input type="checkbox" name="timepicker" [ngModel]="isTimePickerEnabled" (change)="setTimePicker($event)" id="timepicker">
					<label class="label" for="timepicker">TimePicker</label>
				</div>	
				<div class="col-md-12">
					<label class="label">Position</label>
					<div class="col-md-12">
						<label class="label" for="position-left">Left</label>
						<input type="radio" name="position" value="left" [(ngModel)]="daterangepickerOptions.position" id="position-left" [disabled]="daterangepickerOptions.alwaysOpen">
					</div>
					<div class="col-md-12">
						<label class="label" for="position-right">Right</label>
						<input type="radio" name="position" value="right" [(ngModel)]="daterangepickerOptions.position" id="position-right" [disabled]="daterangepickerOptions.alwaysOpen">
					</div>
					<div class="col-md-12">
						<label class="label" for="position-left">Center</label>
						<input type="radio" name="position" value="center" [(ngModel)]="daterangepickerOptions.position" id="position-center" [disabled]="daterangepickerOptions.alwaysOpen">
					</div>
				</div>
				<div class="col-md-12">
					<input type="checkbox" name="alwaysOpen" [(ngModel)]="daterangepickerOptions.alwaysOpen" id="alwaysOpen">
					<label class="label" for="alwaysOpen">Always Open</label>
				</div>
			</form>
			<div class="col-md-12">
				<h4>Configuration</h4>
				<pre>{{prettyPrintJSON(daterangepickerOptions)}}</pre>
			</div>
		</div> 
		<div class="col-md-5">
			<h3>Live Demo</h3>	
			<div class="col-md-6 flush">
				<date-range-picker [class]="'col-md-12 form-control'" [options]="daterangepickerOptions" (rangeSelected)="rangeSelected($event)">
				</date-range-picker>
			</div>
		</div>
	`
})
export class AppComponent {
	isTimePickerEnabled = true;
	daterangepickerOptions = {
		startDate: null,
		endDate: null,
		format: "DD.MM.YYYY HH:mm",
		minDate: moment().add(-2, 'months').format("DD.MM.YYYY HH:mm"),
		maxDate: moment().add(2, 'months').format("DD.MM.YYYY HH:mm"),
		inactiveBeforeStart: true,
		autoApply: true,
		showRanges: true,
		preDefinedRanges: [{
			name: 'Day After tomorrow',
			value: {
				start: moment().add(2, 'days'),
				end: moment().add(2, 'days'),
			}
		}, {
			name: 'Today',
			value: {
				start: moment(),
				end: moment(),
			}
		}, {
			name: 'Tomorrow',
			value: {
				start: moment().add(1, 'days'),
				end: moment().add(1, 'days'),
			}
		}, {
			name: 'This week',
			value: {
				start: moment(),
				end: moment().add(7, 'days'),
			}
		}],
		singleCalendar: false,
		displayFormat: 'DD.MM.YYYY HH:mm',
		position: 'left',
		disabled: false,
		noDefaultRangeSelected: true,
		timePicker: {
			minuteInterval: 5,
			twentyFourHourFormat: true
		},
		disableBeforeStart: true,
		alwaysOpen: false
	}
	rangeSelected(data) {
		debugger;
	}
	singleCalendar(event) {
		this.daterangepickerOptions.singleCalendar = event.target.checked;
	}
	autoApply(event) {
		this.daterangepickerOptions.autoApply = event.target.checked;
	}
	inactiveBeforeStart(event) {
		this.daterangepickerOptions.inactiveBeforeStart = event.target.checked;
	}
	showRanges(event) {
		this.daterangepickerOptions.showRanges = event.target.checked;
	}
	setTimePicker(event) {
		this.isTimePickerEnabled = event.target.checked;
		this.daterangepickerOptions.timePicker = event.target.checked ? {
			minuteInterval: 5,
			twentyFourHourFormat: true
		} : null;
	}
	setPosition() {

	}
	prettyPrintJSON(object) {
		return JSON.stringify(object, null, '  ')
	}
}

app-main.ts

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app-module';

platformBrowserDynamic().bootstrapModule(AppModule)

app-module.ts

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

}

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Angular Date Range Picker</title>
    <base href=".">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
    <!-- <link rel="stylesheet" type="text/css" href="daterangepicker-component.css" /> -->
    <!-- Polyfill(s) for older browsers -->
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-125781207-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-125781207-1');
    </script>

    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <style>
        html {
            display: table;
            width: 100%;
        }

        body {
            display: table-cell;
            width: 100%;
            position: relative;
        }

        html,
        body,
        .main,
            {
            height: 100%;
            width: 100%;
            overflow-x: hidden;
        }

        .main {
            padding: 25px;
            float: left;
            width: 100%;
            margin-top: 65px;
        }

        .footer {
            position: fixed;
            bottom: 0;
            text-align: center;
            width: 100%;
            margin-top: 50px;
            background-color: white;
            height: 20px;
            border-top: 1px solid #ddd;
        }

        .separator-right {
            border-right: 1px solid #ddd;
            height: 100%;
        }

        .separator-right--dark {
            border-right: 1px solid #444;
            height: 100%;
        }

        .separator-left--dark {
            border-left: 1px solid #444;
            height: 100%;
        }

        .header {
            position: fixed;
            height: 65px;
            border-bottom: 1px solid black;
            width: 100%;
            z-index: 1000;
            background-color: white;
            box-shadow: 0 0 5px 5px #ddd;
            padding: 0 20px;
        }

        .header a {
            line-height: 65px;
            margin-right: 130px;
        }

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

        .label {
            color: black;
        }

        .float-right {
            float: right;
        }

        .github-ribbon {
            position: absolute;
            top: 60px;
            transform: rotate(45deg);
            background: black;
            color: white;
            padding: 5px 91px;
            right: -100px;
            font-weight: bolder;
            font-size: 16px;
            line-height: 30px;
        }
    </style>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app-main.js').catch(function (err) {
            console.error(err);
        });
    </script>
</head>

<body>
    <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 .push--threeUnits-left {
            margin-left: 3px;
        }

        .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;
            opacity: 0.8;
        }

        .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%;
        }

        .daterangepicker .table>thead>tr>td.active,
        .daterangepicker .table>tbody>tr>td.active,
        .daterangepicker .table>tfoot>tr>td.active,
        .daterangepicker .table>thead>tr>th.active,
        .daterangepicker .table>tbody>tr>th.active,
        .daterangepicker .table>tfoot>tr>th.active,
        .daterangepicker .table>thead>tr.active>td,
        .daterangepicker .table>tbody>tr.active>td,
        .daterangepicker .table>tfoot>tr.active>td,
        .daterangepicker .table>thead>tr.active>th,
        .daterangepicker .table>tbody>tr.active>th,
        .daterangepicker .table>tfoot>tr.active>th {
            background-color: #f0f0f0;
        }

        .daterangepicker .table-hover>tbody>tr>td.active:hover,
        .daterangepicker .table-hover>tbody>tr>th.active:hover,
        .daterangepicker .table-hover>tbody>tr.active:hover>td,
        .daterangepicker .table-hover>tbody>tr:hover>.active,
        .daterangepicker .table-hover>tbody>tr.active:hover>th {
            background-color: #f0f0f0;
        }
    </style>
    <header class="col-md-12 header">
        <h1 class="col-md-6">
            Angular Date Range Picker
        </h1>
        <div class="text-right col-md-6 header-right">
            <a class="col-md-2 float-right" href="https://www.npmjs.com/package/angular-2-daterangepicker?activeTab=readme">
                <img src="https://img.shields.io/badge/dynamic/json.svg?label=npm&uri=https%3A%2F%2Fraw.githubusercontent.com%2Fnikhil-001mehta%2Fangular-2-daterangepicker%2Fmaster%2Fpackage.json&query=%24.version&prefix=v"
                    width: "100%">
            </a>
            <a href="https://github.com/nikhil-001mehta/angular-2-daterangepicker">
                <span class="github-ribbon">
                    Fork on GitHub
                </span>
            </a>
        </div>
    </header>
    <div class="main">
        <h3>You can play around with the code on stackblitz
            <a href="https://stackblitz.com/edit/angular-daterangepicker">here</a>
        </h3>
        <my-datepicker-demo>Loading AppComponent content here ...</my-datepicker-demo>
    </div>
    <div class="footer"> &copy; Nikhil Mehta</div>
</body>

</html>

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'moment': 'npm:moment/moment.js',
            'moment-range': 'npm:moment-range/dist/moment-range.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            '/': {
                main: './app-main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);