Skip to content

Instantly share code, notes, and snippets.

@technikhil314

technikhil314/app-component.ts

Created January 8, 2019 14:04
Show Gist options
  • Save technikhil314/85e7d8a38ab459b3aa2117fe4d713e5b to your computer and use it in GitHub Desktop.
Save technikhil314/85e7d8a38ab459b3aa2117fe4d713e5b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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, ' ')
}
}
Raw
app-main.ts
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app-module';
platformBrowserDynamic().bootstrapModule(AppModule)
Raw
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 {
}
Raw
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/[email protected]/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/[email protected]/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>
Raw
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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment