plugins updates part 2

- added .editorconfig
- updated package.json & build/npm/Plugins.js according to the following changes
- updated dev dependencies to clear audits
- updated daterangepicker
- updated overlayScrollbars
- moved flot (0.8.2) to flot-old for plugins
- updated flot
- updated fullcalendar
- replaced icheck with icheck-bootstrap & updated demo files
- added icheck-bootstrap color overrides
- updated inputmask
- updated ion-rangeslider
- updated jquery-ui
- updated bootstrap-slider tweaks & demo files
- replaced jvectormap with jqvmap & updated demo files
- added jquery-mapael & replaced in index2 jvectormap
- updated jquery-knob
- replaced pace with pace-progress
- updated select2 & demo files
- replaced jquery.sparkline with sparklines & updated demo files and removed jquery.sparkline demo section
This commit is contained in:
REJack 2019-06-14 09:33:43 +02:00
parent 91434f4215
commit f70483a806
No known key found for this signature in database
GPG key ID: 9F3976CC630CC888
805 changed files with 107414 additions and 43921 deletions

View file

@ -1,7 +1,7 @@
{
"presets": [
[
"env",
"@babel/preset-env",
{
"loose": true,
"modules": false
@ -9,6 +9,6 @@
]
],
"plugins": [
"external-helpers"
"@babel/plugin-external-helpers"
]
}

9
.editorconfig Normal file
View file

@ -0,0 +1,9 @@
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2

View file

@ -37,6 +37,16 @@ const Plugins = [
from: 'node_modules/chart.js/dist/',
to : 'plugins/chart.js'
},
// jQuery UI
{
from: 'node_modules/jquery-ui-dist/',
to : 'plugins/jquery-ui'
},
// Flot
{
from: 'node_modules/flot/dist/es5/',
to : 'plugins/flot'
},
// Summernote
{
from: 'node_modules/summernote/dist/',
@ -83,7 +93,11 @@ const Plugins = [
from: 'node_modules/fastclick/lib',
to : 'plugins/fastclick'
},
// Date Range Picker
{
from: 'node_modules/daterangepicker/',
to : 'plugins/daterangepicker'
},
// DataTables
{
from: 'node_modules/datatables.net/js',
@ -97,6 +111,83 @@ const Plugins = [
from: 'node_modules/datatables.net-bs4/css',
to: 'plugins/datatables'
},
// Fullcalendar
{
from: 'node_modules/@fullcalendar/core/',
to : 'plugins/fullcalendar'
},
{
from: 'node_modules/@fullcalendar/bootstrap/',
to : 'plugins/fullcalendar-bootstrap'
},
{
from: 'node_modules/@fullcalendar/daygrid/',
to : 'plugins/fullcalendar-daygrid'
},
{
from: 'node_modules/@fullcalendar/timegrid/',
to : 'plugins/fullcalendar-timegrid'
},
{
from: 'node_modules/@fullcalendar/interaction/',
to : 'plugins/fullcalendar-interaction'
},
// icheck bootstrap
{
from: 'node_modules/icheck-bootstrap/',
to : 'plugins/icheck-bootstrap'
},
// inputmask
{
from: 'node_modules/inputmask/dist/',
to : 'plugins/inputmask'
},
// ion-rangeslider
{
from: 'node_modules/ion-rangeslider/',
to : 'plugins/ion-rangeslider'
},
// JQVMap
{
from: 'node_modules/jqvmap/dist/',
to : 'plugins/jqvmap'
},
// jQuery Mapael
{
from: 'node_modules/jquery-mapael/js/',
to : 'plugins/jquery-mapael'
},
// Raphael
{
from: 'node_modules/raphael/',
to : 'plugins/raphael'
},
// jQuery Mousewheel
{
from: 'node_modules/jquery-mousewheel/',
to : 'plugins/jquery-mousewheel'
},
// jQuery Knob
{
from: 'node_modules/jquery-knob-chif/dist/',
to : 'plugins/jquery-knob'
},
// pace-progress
{
from: 'node_modules/@lgaitan/pace-progress/dist/',
to : 'plugins/pace-progress'
},
// Select2
{
from: 'node_modules/select2/dist/',
to : 'plugins/select2'
},
// Select2
{
from: 'node_modules/sparklines/source/',
to : 'plugins/sparklines'
},
// // Doc Assets
// // AdminLTE Dist

View file

@ -41,6 +41,7 @@
@import "users-list";
@import "carousel";
@import "social-widgets";
@import "modals";
// PAGES
// ---------------------------------------------------
@import "mailbox";
@ -51,8 +52,12 @@
@import "profile";
// Plugins
// ---------------------------------------------------
@import "fullcalendar";
@import "select2";
@import "plugins/fullcalendar";
@import "plugins/select2";
@import "plugins/bootstrap-slider";
@import "plugins/icheck-bootstrap";
@import "plugins/mapael";
@import "plugins/jqvmap";
// Miscellaneous
// ---------------------------------------------------
@import "miscellaneous";

View file

@ -34,14 +34,14 @@
// Button color variations
.btn-default {
background-color: #f4f4f4;
color: #444;
border-color: #ddd;
background-color: $button-default-background-color;
color: $button-default-color;
border-color: $button-default-border-color;
&:hover,
&:active,
&.hover {
color: #222;
background-color: darken(#f4f4f4, 5%);
color: darken($button-default-color, 10%);
background-color: darken($button-default-background-color, 5%);
}
}
@ -55,8 +55,8 @@
height: 60px;
text-align: center;
color: #666;
border: 1px solid #ddd;
background-color: #f4f4f4;
border: 1px solid $button-default-border-color;
background-color: $button-default-background-color;
font-size: 12px;
// Icons within the btn
> .fa,
@ -70,9 +70,9 @@
}
&:hover {
background: #f4f4f4;
color: #444;
border-color: #aaa;
background: $button-default-background-color;
color: $button-default-color;
border-color: darken($button-default-border-color, 20%);
}
&:active,

View file

@ -361,46 +361,3 @@ a.text-muted:hover {
.flex-1 {
flex: 1;
}
// Modals
.modal-dialog {
.overlay {
display: block;
position: absolute;
z-index: ($zindex-modal + 2);
background: rgba(255, 255, 255, 0.7);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.modal-content {
&.bg-warning {
.modal-header,
.modal-footer {
border-color: $gray-800;
}
}
}
.modal-content {
&.bg-primary,
&.bg-secondary,
&.bg-info,
&.bg-danger,
&.bg-success, {
.close{
color: $white;
}
}
}
// Background colors (colors)
@each $name, $color in $colors {
##{$name}.slider {
.slider-selection {
background: $color;
}
}
}

39
build/scss/_modals.scss Normal file
View file

@ -0,0 +1,39 @@
/*
* General: Modals
* ----------------------
*/
// Overlay
.modal-dialog {
.overlay {
display: block;
position: absolute;
z-index: ($zindex-modal + 2);
background: rgba(255, 255, 255, 0.7);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
// BG Color Variations Fixes
.modal-content {
&.bg-warning {
.modal-header,
.modal-footer {
border-color: $gray-800;
}
}
}
.modal-content {
&.bg-primary,
&.bg-secondary,
&.bg-info,
&.bg-danger,
&.bg-success, {
.close{
color: $white;
}
}
}

View file

@ -151,3 +151,11 @@ $transition-fn: ease-in-out !default;
// TEXT
// --------------------------------------------------------
$font-size-xl: ($font-size-base * 2);
// BUTTON
// --------------------------------------------------------
$button-default-background-color: #f4f4f4 !default;
$button-default-color: #444 !default;
$button-default-border-color: #ddd !default;

View file

@ -0,0 +1,25 @@
/*
* Plugin: Bootstrap Slider
* ---------------------
*/
// Style override
.slider {
&.slider-vertical {
height: 100%;
}
&.slider-horizontal {
width: 100%;
}
}
// Colors
@each $name, $color in $colors {
.slider-#{$name} .slider {
.slider-selection {
background: $color;
}
}
}

View file

@ -2,7 +2,8 @@
* Plugin: Full Calendar
* ---------------------
*/
//Fullcalendar buttons
// Buttons
.fc-button {
background: #f4f4f4;
background-image: none;

View file

@ -0,0 +1,32 @@
/*
* Plugin: iCheck Bootstrap
* ---------------------
*/
// iCheck colors (theme colors)
@each $name, $color in $theme-colors {
.icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #{$color};
}
.icheck-#{$name} > input:first-child:checked + label::before,
.icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #{$color};
border-color: #{$color};
}
}
// iCheck colors (colors)
@each $name, $color in $colors {
.icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-#{$name} > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #{$color};
}
.icheck-#{$name} > input:first-child:checked + label::before,
.icheck-#{$name} > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #{$color};
border-color: #{$color};
}
}

View file

@ -0,0 +1,23 @@
/*
* Plugins: JQVMap
* ---------------
*/
// Zoom Button size fixes
.jqvmap-zoomin,
.jqvmap-zoomout {
background-color: $button-default-background-color;
color: $button-default-color;
border: 1px solid $button-default-border-color;
border-radius: $btn-border-radius;
width: 15px;
height: 15px;
&:hover,
&:active,
&.hover {
color: darken($button-default-color, 10%);
background-color: darken($button-default-background-color, 5%);
}
}

View file

@ -0,0 +1,75 @@
/*
* Plugins: jQuery Mapael
* ----------------------
*/
.mapael {
.map {
position: relative;
}
.mapTooltip {
@include reset-text();
background-color: $tooltip-bg;
color: $tooltip-color;
display: block;
max-width: $tooltip-max-width;
padding: $tooltip-padding-y $tooltip-padding-x;
position: absolute;
text-align: center;
word-wrap: break-word;
z-index: $zindex-tooltip;
@include border-radius($tooltip-border-radius);
@include font-size($tooltip-font-size);
}
.myLegend {
background-color: #f4f4e8;
border: 1px solid #bebeb4;
padding: 10px;
width: 600px;
}
.zoomButton {
border-radius: $btn-border-radius;
background-color: $button-default-background-color;
color: $button-default-color;
border: 1px solid $button-default-border-color;
padding-left: 1px;
width: 16px;
height: 16px;
line-height: 14px;
text-align: center;
cursor: pointer;
position: absolute;
top: 0;
font-weight: bold;
left: 10px;
-webkit-user-select: none;
-khtml-user-select : none;
-moz-user-select: none;
-o-user-select : none;
user-select: none;
&:hover,
&:active,
&.hover {
color: darken($button-default-color, 10%);
background-color: darken($button-default-background-color, 5%);
}
}
.zoomReset {
top: 10px;
line-height: 12px;
}
.zoomIn {
top: 30px;
}
.zoomOut {
top: 50px;
}
}

View file

@ -91,6 +91,14 @@
&:focus {
border-color: theme-color("primary");
}
.select2-selection__rendered li:first-child.select2-search.select2-search--inline {
width: 100%;
.select2-search__field {
width: 100% !important;
}
}
}
&.select2-container--focus .select2-selection--multiple {
border-color: $gray-x-light;
@ -112,6 +120,6 @@
}
}
.select2-container .select2-selection--single .select2-selection__rendered {
.select2-container .select2-selection--single .select2-selection__rendered li {
padding-right: 10px;
}

518
dist/css/adminlte.css vendored
View file

@ -13739,7 +13739,7 @@ textarea.form-control.is-warning {
}
.btn-default:hover, .btn-default:active, .btn-default.hover {
color: #222;
color: #2b2b2b;
background-color: #e7e7e7;
}
@ -13770,7 +13770,7 @@ textarea.form-control.is-warning {
.btn-app:hover {
background: #f4f4f4;
color: #444;
border-color: #aaa;
border-color: #aaaaaa;
}
.btn-app:active, .btn-app:focus {
@ -14415,6 +14415,32 @@ textarea.form-control.is-warning {
float: left;
}
/*
* General: Modals
* ----------------------
*/
.modal-dialog .overlay {
display: block;
position: absolute;
z-index: 1052;
background: rgba(255, 255, 255, 0.7);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal-content.bg-warning .modal-header, .modal-content.alert-warning .modal-header, .modal-content.label-warning .modal-header,
.modal-content.bg-warning .modal-footer,
.modal-content.alert-warning .modal-footer,
.modal-content.label-warning .modal-footer {
border-color: #343a40;
}
.modal-content.bg-primary .close, .modal-content.label-primary .close, .modal-content.bg-primary .mailbox-attachment-close, .modal-content.label-primary .mailbox-attachment-close, .modal-content.bg-secondary .close, .modal-content.bg-secondary .mailbox-attachment-close, .modal-content.bg-info .close, .modal-content.alert-info .close, .modal-content.label-info .close, .modal-content.bg-info .mailbox-attachment-close, .modal-content.alert-info .mailbox-attachment-close, .modal-content.label-info .mailbox-attachment-close, .modal-content.bg-danger .close, .modal-content.alert-danger .close, .modal-content.alert-error .close, .modal-content.label-danger .close, .modal-content.bg-danger .mailbox-attachment-close, .modal-content.alert-danger .mailbox-attachment-close, .modal-content.alert-error .mailbox-attachment-close, .modal-content.label-danger .mailbox-attachment-close, .modal-content.bg-success .close, .modal-content.alert-success .close, .modal-content.label-success .close, .modal-content.bg-success .mailbox-attachment-close, .modal-content.alert-success .mailbox-attachment-close, .modal-content.label-success .mailbox-attachment-close {
color: #ffffff;
}
/*
* Page: Mailbox
* -------------
@ -14975,6 +15001,14 @@ textarea.form-control.is-warning {
border-color: #007bff;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li:first-child.select2-search.select2-search--inline {
width: 100%;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered li:first-child.select2-search.select2-search--inline .select2-search__field {
width: 100% !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: #d2d6de;
}
@ -14995,10 +15029,414 @@ textarea.form-control.is-warning {
color: #ffffff;
}
.select2-container .select2-selection--single .select2-selection__rendered {
.select2-container .select2-selection--single .select2-selection__rendered li {
padding-right: 10px;
}
/*
* Plugin: Bootstrap Slider
* ---------------------
*/
.slider.slider-vertical {
height: 100%;
}
.slider.slider-horizontal {
width: 100%;
}
.slider-blue .slider .slider-selection {
background: #007bff;
}
.slider-indigo .slider .slider-selection {
background: #6610f2;
}
.slider-purple .slider .slider-selection {
background: #6f42c1;
}
.slider-pink .slider .slider-selection {
background: #e83e8c;
}
.slider-red .slider .slider-selection {
background: #dc3545;
}
.slider-orange .slider .slider-selection {
background: #fd7e14;
}
.slider-yellow .slider .slider-selection {
background: #ffc107;
}
.slider-green .slider .slider-selection {
background: #28a745;
}
.slider-teal .slider .slider-selection {
background: #20c997;
}
.slider-cyan .slider .slider-selection {
background: #17a2b8;
}
.slider-white .slider .slider-selection {
background: #ffffff;
}
.slider-gray .slider .slider-selection {
background: #6c757d;
}
.slider-gray-dark .slider .slider-selection {
background: #343a40;
}
/*
* Plugin: iCheck Bootstrap
* ---------------------
*/
.icheck-primary > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-primary > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #007bff;
}
.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #007bff;
border-color: #007bff;
}
.icheck-secondary > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-secondary > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #6c757d;
}
.icheck-secondary > input:first-child:checked + label::before,
.icheck-secondary > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #6c757d;
border-color: #6c757d;
}
.icheck-success > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-success > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #28a745;
}
.icheck-success > input:first-child:checked + label::before,
.icheck-success > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #28a745;
border-color: #28a745;
}
.icheck-info > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-info > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #17a2b8;
}
.icheck-info > input:first-child:checked + label::before,
.icheck-info > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #17a2b8;
border-color: #17a2b8;
}
.icheck-warning > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-warning > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #ffc107;
}
.icheck-warning > input:first-child:checked + label::before,
.icheck-warning > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #ffc107;
border-color: #ffc107;
}
.icheck-danger > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-danger > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #dc3545;
}
.icheck-danger > input:first-child:checked + label::before,
.icheck-danger > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #dc3545;
border-color: #dc3545;
}
.icheck-light > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-light > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #f8f9fa;
}
.icheck-light > input:first-child:checked + label::before,
.icheck-light > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #f8f9fa;
border-color: #f8f9fa;
}
.icheck-dark > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-dark > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #343a40;
}
.icheck-dark > input:first-child:checked + label::before,
.icheck-dark > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #343a40;
border-color: #343a40;
}
.icheck-blue > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-blue > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #007bff;
}
.icheck-blue > input:first-child:checked + label::before,
.icheck-blue > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #007bff;
border-color: #007bff;
}
.icheck-indigo > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-indigo > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #6610f2;
}
.icheck-indigo > input:first-child:checked + label::before,
.icheck-indigo > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #6610f2;
border-color: #6610f2;
}
.icheck-purple > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-purple > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #6f42c1;
}
.icheck-purple > input:first-child:checked + label::before,
.icheck-purple > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #6f42c1;
border-color: #6f42c1;
}
.icheck-pink > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-pink > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #e83e8c;
}
.icheck-pink > input:first-child:checked + label::before,
.icheck-pink > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #e83e8c;
border-color: #e83e8c;
}
.icheck-red > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-red > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #dc3545;
}
.icheck-red > input:first-child:checked + label::before,
.icheck-red > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #dc3545;
border-color: #dc3545;
}
.icheck-orange > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-orange > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #fd7e14;
}
.icheck-orange > input:first-child:checked + label::before,
.icheck-orange > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #fd7e14;
border-color: #fd7e14;
}
.icheck-yellow > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-yellow > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #ffc107;
}
.icheck-yellow > input:first-child:checked + label::before,
.icheck-yellow > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #ffc107;
border-color: #ffc107;
}
.icheck-green > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-green > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #28a745;
}
.icheck-green > input:first-child:checked + label::before,
.icheck-green > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #28a745;
border-color: #28a745;
}
.icheck-teal > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-teal > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #20c997;
}
.icheck-teal > input:first-child:checked + label::before,
.icheck-teal > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #20c997;
border-color: #20c997;
}
.icheck-cyan > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-cyan > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #17a2b8;
}
.icheck-cyan > input:first-child:checked + label::before,
.icheck-cyan > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #17a2b8;
border-color: #17a2b8;
}
.icheck-white > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-white > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #ffffff;
}
.icheck-white > input:first-child:checked + label::before,
.icheck-white > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #ffffff;
border-color: #ffffff;
}
.icheck-gray > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-gray > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #6c757d;
}
.icheck-gray > input:first-child:checked + label::before,
.icheck-gray > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #6c757d;
border-color: #6c757d;
}
.icheck-gray-dark > input:first-child:not(:checked):not(:disabled):hover + label::before,
.icheck-gray-dark > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
border-color: #343a40;
}
.icheck-gray-dark > input:first-child:checked + label::before,
.icheck-gray-dark > input:first-child:checked + input[type="hidden"] + label::before {
background-color: #343a40;
border-color: #343a40;
}
/*
* Plugins: jQuery Mapael
* ----------------------
*/
.mapael .map {
position: relative;
}
.mapael .mapTooltip {
font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
background-color: #000;
color: #ffffff;
display: block;
max-width: 200px;
padding: 0.25rem 0.5rem;
position: absolute;
text-align: center;
word-wrap: break-word;
z-index: 1070;
border-radius: 0.25rem;
font-size: 0.875rem;
}
.mapael .myLegend {
background-color: #f4f4e8;
border: 1px solid #bebeb4;
padding: 10px;
width: 600px;
}
.mapael .zoomButton {
border-radius: 0.25rem;
background-color: #f4f4f4;
color: #444;
border: 1px solid #ddd;
padding-left: 1px;
width: 16px;
height: 16px;
line-height: 14px;
text-align: center;
cursor: pointer;
position: absolute;
top: 0;
font-weight: bold;
left: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mapael .zoomButton:hover, .mapael .zoomButton:active, .mapael .zoomButton.hover {
color: #2b2b2b;
background-color: #e7e7e7;
}
.mapael .zoomReset {
top: 10px;
line-height: 12px;
}
.mapael .zoomIn {
top: 30px;
}
.mapael .zoomOut {
top: 50px;
}
/*
* Plugins: JQVMap
* ---------------
*/
.jqvmap-zoomin,
.jqvmap-zoomout {
background-color: #f4f4f4;
color: #444;
border: 1px solid #ddd;
border-radius: 0.25rem;
width: 15px;
height: 15px;
}
.jqvmap-zoomin:hover, .jqvmap-zoomin:active, .jqvmap-zoomin.hover,
.jqvmap-zoomout:hover,
.jqvmap-zoomout:active,
.jqvmap-zoomout.hover {
color: #2b2b2b;
background-color: #e7e7e7;
}
/*
* General: Miscellaneous
* ----------------------
@ -15539,80 +15977,6 @@ a.text-muted:hover {
flex: 1;
}
.modal-dialog .overlay {
display: block;
position: absolute;
z-index: 1052;
background: rgba(255, 255, 255, 0.7);
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal-content.bg-warning .modal-header, .modal-content.alert-warning .modal-header, .modal-content.label-warning .modal-header,
.modal-content.bg-warning .modal-footer,
.modal-content.alert-warning .modal-footer,
.modal-content.label-warning .modal-footer {
border-color: #343a40;
}
.modal-content.bg-primary .close, .modal-content.label-primary .close, .modal-content.bg-primary .mailbox-attachment-close, .modal-content.label-primary .mailbox-attachment-close, .modal-content.bg-secondary .close, .modal-content.bg-secondary .mailbox-attachment-close, .modal-content.bg-info .close, .modal-content.alert-info .close, .modal-content.label-info .close, .modal-content.bg-info .mailbox-attachment-close, .modal-content.alert-info .mailbox-attachment-close, .modal-content.label-info .mailbox-attachment-close, .modal-content.bg-danger .close, .modal-content.alert-danger .close, .modal-content.alert-error .close, .modal-content.label-danger .close, .modal-content.bg-danger .mailbox-attachment-close, .modal-content.alert-danger .mailbox-attachment-close, .modal-content.alert-error .mailbox-attachment-close, .modal-content.label-danger .mailbox-attachment-close, .modal-content.bg-success .close, .modal-content.alert-success .close, .modal-content.label-success .close, .modal-content.bg-success .mailbox-attachment-close, .modal-content.alert-success .mailbox-attachment-close, .modal-content.label-success .mailbox-attachment-close {
color: #ffffff;
}
#blue.slider .slider-selection {
background: #007bff;
}
#indigo.slider .slider-selection {
background: #6610f2;
}
#purple.slider .slider-selection {
background: #6f42c1;
}
#pink.slider .slider-selection {
background: #e83e8c;
}
#red.slider .slider-selection {
background: #dc3545;
}
#orange.slider .slider-selection {
background: #fd7e14;
}
#yellow.slider .slider-selection {
background: #ffc107;
}
#green.slider .slider-selection {
background: #28a745;
}
#teal.slider .slider-selection {
background: #20c997;
}
#cyan.slider .slider-selection {
background: #17a2b8;
}
#white.slider .slider-selection {
background: #ffffff;
}
#gray.slider .slider-selection {
background: #6c757d;
}
#gray-dark.slider .slider-selection {
background: #343a40;
}
/*
* Misc: print
* -----------

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

1573
dist/js/adminlte.js vendored

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -64,7 +64,7 @@ $(function () {
}
// World map by jvectormap
$('#world-map').vectorMap({
map : 'world_mill_en',
map : 'world_en',
backgroundColor : 'transparent',
regionStyle : {
initial: {
@ -89,30 +89,13 @@ $(function () {
})
// Sparkline charts
var myvalues = [1000, 1200, 920, 927, 931, 1027, 819, 930, 1021]
$('#sparkline-1').sparkline(myvalues, {
type : 'line',
lineColor: '#92c1dc',
fillColor: '#ebf4f9',
height : '50',
width : '80'
})
myvalues = [515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921]
$('#sparkline-2').sparkline(myvalues, {
type : 'line',
lineColor: '#92c1dc',
fillColor: '#ebf4f9',
height : '50',
width : '80'
})
myvalues = [15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21]
$('#sparkline-3').sparkline(myvalues, {
type : 'line',
lineColor: '#92c1dc',
fillColor: '#ebf4f9',
height : '50',
width : '80'
})
var sparkline1 = new Sparkline($("#sparkline-1")[0], {width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9'});
var sparkline2 = new Sparkline($("#sparkline-2")[0], {width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9'});
var sparkline3 = new Sparkline($("#sparkline-3")[0], {width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9'});
sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021]);
sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921]);
sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21]);
// The Calender
$('#calendar').datetimepicker({
@ -125,76 +108,157 @@ $(function () {
height: '250px'
})
/* Morris.js Charts */
/* Chart.js Charts */
// Sales chart
var area = new Morris.Area({
element : 'revenue-chart',
resize : true,
data : [
{ y: '2011 Q1', item1: 2666, item2: 2666 },
{ y: '2011 Q2', item1: 2778, item2: 2294 },
{ y: '2011 Q3', item1: 4912, item2: 1969 },
{ y: '2011 Q4', item1: 3767, item2: 3597 },
{ y: '2012 Q1', item1: 6810, item2: 1914 },
{ y: '2012 Q2', item1: 5670, item2: 4293 },
{ y: '2012 Q3', item1: 4820, item2: 3795 },
{ y: '2012 Q4', item1: 15073, item2: 5967 },
{ y: '2013 Q1', item1: 10687, item2: 4460 },
{ y: '2013 Q2', item1: 8432, item2: 5713 }
],
xkey : 'y',
ykeys : ['item1', 'item2'],
labels : ['Item 1', 'Item 2'],
lineColors: ['#495057', '#007cff'],
hideHover : 'auto'
})
var line = new Morris.Line({
element : 'line-chart',
resize : true,
data : [
{ y: '2011 Q1', item1: 2666 },
{ y: '2011 Q2', item1: 2778 },
{ y: '2011 Q3', item1: 4912 },
{ y: '2011 Q4', item1: 3767 },
{ y: '2012 Q1', item1: 6810 },
{ y: '2012 Q2', item1: 5670 },
{ y: '2012 Q3', item1: 4820 },
{ y: '2012 Q4', item1: 15073 },
{ y: '2013 Q1', item1: 10687 },
{ y: '2013 Q2', item1: 8432 }
],
xkey : 'y',
ykeys : ['item1'],
labels : ['Item 1'],
lineColors : ['#efefef'],
lineWidth : 2,
hideHover : 'auto',
gridTextColor : '#fff',
gridStrokeWidth : 0.4,
pointSize : 4,
pointStrokeColors: ['#efefef'],
gridLineColor : '#efefef',
gridTextFamily : 'Open Sans',
gridTextSize : 10
})
var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d');
//$('#revenue-chart').get(0).getContext('2d');
var salesChartData = {
labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label : 'Digital Goods',
backgroundColor : 'rgba(60,141,188,0.9)',
borderColor : 'rgba(60,141,188,0.8)',
pointRadius : false,
pointColor : '#3b8bba',
pointStrokeColor : 'rgba(60,141,188,1)',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data : [28, 48, 40, 19, 86, 27, 90]
},
{
label : 'Electronics',
backgroundColor : 'rgba(210, 214, 222, 1)',
borderColor : 'rgba(210, 214, 222, 1)',
pointRadius : false,
pointColor : 'rgba(210, 214, 222, 1)',
pointStrokeColor : '#c1c7d1',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(220,220,220,1)',
data : [65, 59, 80, 81, 56, 55, 40]
},
]
}
var salesChartOptions = {
maintainAspectRatio : false,
responsive : true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines : {
display : false,
}
}],
yAxes: [{
gridLines : {
display : false,
}
}]
}
}
// This will get the first returned node in the jQuery collection.
var salesChart = new Chart(salesChartCanvas, {
type: 'line',
data: salesChartData,
options: salesChartOptions
}
)
// Donut Chart
var donut = new Morris.Donut({
element : 'sales-chart',
resize : true,
colors : ['#007bff', '#dc3545', '#28a745'],
data : [
{ label: 'Download Sales', value: 12 },
{ label: 'In-Store Sales', value: 30 },
{ label: 'Mail-Order Sales', value: 20 }
var pieChartCanvas = $('#sales-chart-canvas').get(0).getContext('2d')
var pieData = {
labels: [
'Instore Sales',
'Download Sales',
'Mail-Order Sales',
],
hideHover: 'auto'
})
datasets: [
{
data: [30,12,20],
backgroundColor : ['#f56954', '#00a65a', '#f39c12'],
}
]
}
var pieOptions = {
legend: {
display: false
},
maintainAspectRatio : false,
responsive : true,
}
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
var pieChart = new Chart(pieChartCanvas, {
type: 'doughnut',
data: pieData,
options: pieOptions
});
// Sales graph chart
var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d');
//$('#revenue-chart').get(0).getContext('2d');
var salesGraphChartData = {
labels : ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4', '2013 Q1', '2013 Q2'],
datasets: [
{
label : 'Digital Goods',
fill : false,
borderWidth : 2,
lineTension : 0,
spanGaps : true,
borderColor : '#efefef',
pointRadius : 3,
pointHoverRadius : 7,
pointColor : '#efefef',
pointBackgroundColor: '#efefef',
data : [2666, 2778, 4912, 3767, 6810, 5670, 4820, 15073, 10687, 8432]
}
]
}
var salesGraphChartOptions = {
maintainAspectRatio : false,
responsive : true,
legend: {
display: false,
},
scales: {
xAxes: [{
ticks : {
fontColor: '#efefef',
},
gridLines : {
display : false,
color: '#efefef',
drawBorder: false,
}
}],
yAxes: [{
ticks : {
stepSize: 5000,
fontColor: '#efefef',
},
gridLines : {
display : true,
color: '#efefef',
drawBorder: false,
}
}]
}
}
// This will get the first returned node in the jQuery collection.
var salesGraphChart = new Chart(salesGraphChartCanvas, {
type: 'line',
data: salesGraphChartData,
options: salesGraphChartOptions
}
)
// Fix for charts under tabs
$('.box ul.nav a').on('shown.bs.tab', function () {
area.redraw()
donut.redraw()
line.redraw()
})
})

View file

@ -116,142 +116,376 @@ $(function () {
* ------------
* Create a world map with markers
*/
$('#world-map-markers').vectorMap({
map : 'world_mill_en',
normalizeFunction: 'polynomial',
hoverOpacity : 0.7,
hoverColor : false,
backgroundColor : 'transparent',
regionStyle : {
initial : {
fill : 'rgba(210, 214, 222, 1)',
'fill-opacity' : 1,
stroke : 'none',
'stroke-width' : 0,
'stroke-opacity': 1
$('#world-map-markers').mapael({
map: {
name : "world_countries",
zoom: {
enabled: true,
maxLevel: 10
},
defaultPlot: {
size: 12,
attrs: {
"stroke-width": 0,
"stroke-linejoin": "round"
},
attrsHover: {
size: 15,
"fill": '#28a745',
"stroke-width": 0,
animDuration: 0
},
}
},
hover : {
'fill-opacity': 0.7,
cursor : 'pointer'
},
selected : {
fill: 'yellow'
},
selectedHover: {}
},
markerStyle : {
initial: {
fill : '#00a65a',
stroke: '#111'
plots: {
"marker1": {
latitude: 41.90,
longitude: 12.45,
href: '#',
tooltip: {
content: 'Vatican City'
}
},
"marker2": {
latitude: 43.73,
longitude: 7.41,
href: '#',
tooltip: {
content: 'Monaco'
}
},
"marker3": {
latitude: -0.52,
longitude: 166.93,
href: '#',
tooltip: {
content: 'Nauru'
}
},
"marker4": {
latitude: -8.51,
longitude: 179.21,
href: '#',
tooltip: {
content: 'Tuvalu'
}
},
"marker5": {
latitude: 43.93,
longitude: 12.46,
href: '#',
tooltip: {
content: 'San Marino'
}
},
"marker6": {
latitude: 47.14,
longitude: 9.52,
href: '#',
tooltip: {
content: 'Liechtenstein'
}
},
"marker7": {
latitude: 7.11,
longitude: 171.06,
href: '#',
tooltip: {
content: 'Marshall Islands'
}
},
"marker8": {
latitude: 17.3,
longitude: -62.73,
href: '#',
tooltip: {
content: 'Saint Kitts and Nevis'
}
},
"marker9": {
latitude: 3.2,
longitude: 73.22,
href: '#',
tooltip: {
content: 'Maldives'
}
},
"marker10": {
latitude: 35.88,
longitude: 14.5,
href: '#',
tooltip: {
content: 'Malta'
}
},
"marker11": {
latitude: 12.05,
longitude: -61.75,
href: '#',
tooltip: {
content: 'Grenada'
}
},
"marker12": {
latitude: 13.16,
longitude: -61.23,
href: '#',
tooltip: {
content: 'Saint Vincent and the Grenadines'
}
},
"marker13": {
latitude: 13.16,
longitude: -59.55,
href: '#',
tooltip: {
content: 'Barbados'
}
},
"marker14": {
latitude: 17.11,
longitude: -61.85,
href: '#',
tooltip: {
content: 'Antigua and Barbuda'
}
},
"marker15": {
latitude: -4.61,
longitude: 55.45,
href: '#',
tooltip: {
content: 'Seychelles'
}
},
"marker16": {
latitude: 7.35,
longitude: 134.46,
href: '#',
tooltip: {
content: 'Palau'
}
},
"marker17": {
latitude: 42.5,
longitude: 1.51,
href: '#',
tooltip: {
content: 'Andorra'
}
},
"marker18": {
latitude: 14.01,
longitude: -60.98,
href: '#',
tooltip: {
content: 'Saint Lucia'
}
},
"marker19": {
latitude: 6.91,
longitude: 158.18,
href: '#',
tooltip: {
content: 'Federated States of Micronesia'
}
},
"marker20": {
latitude: 1.3,
longitude: 103.8,
href: '#',
tooltip: {
content: 'Singapore'
}
},
"marker21": {
latitude: 1.46,
longitude: 173.03,
href: '#',
tooltip: {
content: 'Kiribati'
}
},
"marker22": {
latitude: -21.13,
longitude: -175.2,
href: '#',
tooltip: {
content: 'Tonga'
}
},
"marker23": {
latitude: 15.3,
longitude: -61.38,
href: '#',
tooltip: {
content: 'Dominica'
}
},
"marker24": {
latitude: -20.2,
longitude: 57.5,
href: '#',
tooltip: {
content: 'Mauritius'
}
},
"marker25": {
latitude: 26.02,
longitude: 50.55,
href: '#',
tooltip: {
content: 'Bahrain'
}
},
"marker26": {
latitude: 0.33,
longitude: 6.73,
href: '#',
tooltip: {
content: 'São Tomé and Príncipe'
}
}
}
},
markers : [
{
latLng: [41.90, 12.45],
name : 'Vatican City'
},
{
latLng: [43.73, 7.41],
name : 'Monaco'
},
{
latLng: [-0.52, 166.93],
name : 'Nauru'
},
{
latLng: [-8.51, 179.21],
name : 'Tuvalu'
},
{
latLng: [43.93, 12.46],
name : 'San Marino'
},
{
latLng: [47.14, 9.52],
name : 'Liechtenstein'
},
{
latLng: [7.11, 171.06],
name : 'Marshall Islands'
},
{
latLng: [17.3, -62.73],
name : 'Saint Kitts and Nevis'
},
{
latLng: [3.2, 73.22],
name : 'Maldives'
},
{
latLng: [35.88, 14.5],
name : 'Malta'
},
{
latLng: [12.05, -61.75],
name : 'Grenada'
},
{
latLng: [13.16, -61.23],
name : 'Saint Vincent and the Grenadines'
},
{
latLng: [13.16, -59.55],
name : 'Barbados'
},
{
latLng: [17.11, -61.85],
name : 'Antigua and Barbuda'
},
{
latLng: [-4.61, 55.45],
name : 'Seychelles'
},
{
latLng: [7.35, 134.46],
name : 'Palau'
},
{
latLng: [42.5, 1.51],
name : 'Andorra'
},
{
latLng: [14.01, -60.98],
name : 'Saint Lucia'
},
{
latLng: [6.91, 158.18],
name : 'Federated States of Micronesia'
},
{
latLng: [1.3, 103.8],
name : 'Singapore'
},
{
latLng: [1.46, 173.03],
name : 'Kiribati'
},
{
latLng: [-21.13, -175.2],
name : 'Tonga'
},
{
latLng: [15.3, -61.38],
name : 'Dominica'
},
{
latLng: [-20.2, 57.5],
name : 'Mauritius'
},
{
latLng: [26.02, 50.55],
name : 'Bahrain'
},
{
latLng: [0.33, 6.73],
name : 'São Tomé and Príncipe'
}
]
})
}
);
// $('#world-map-markers').vectorMap({
// map : 'world_en',
// normalizeFunction: 'polynomial',
// hoverOpacity : 0.7,
// hoverColor : false,
// backgroundColor : 'transparent',
// regionStyle : {
// initial : {
// fill : 'rgba(210, 214, 222, 1)',
// 'fill-opacity' : 1,
// stroke : 'none',
// 'stroke-width' : 0,
// 'stroke-opacity': 1
// },
// hover : {
// 'fill-opacity': 0.7,
// cursor : 'pointer'
// },
// selected : {
// fill: 'yellow'
// },
// selectedHover: {}
// },
// markerStyle : {
// initial: {
// fill : '#00a65a',
// stroke: '#111'
// }
// },
// markers : [
// {
// latLng: [41.90, 12.45],
// name : 'Vatican City'
// },
// {
// latLng: [43.73, 7.41],
// name : 'Monaco'
// },
// {
// latLng: [-0.52, 166.93],
// name : 'Nauru'
// },
// {
// latLng: [-8.51, 179.21],
// name : 'Tuvalu'
// },
// {
// latLng: [43.93, 12.46],
// name : 'San Marino'
// },
// {
// latLng: [47.14, 9.52],
// name : 'Liechtenstein'
// },
// {
// latLng: [7.11, 171.06],
// name : 'Marshall Islands'
// },
// {
// latLng: [17.3, -62.73],
// name : 'Saint Kitts and Nevis'
// },
// {
// latLng: [3.2, 73.22],
// name : 'Maldives'
// },
// {
// latLng: [35.88, 14.5],
// name : 'Malta'
// },
// {
// latLng: [12.05, -61.75],
// name : 'Grenada'
// },
// {
// latLng: [13.16, -61.23],
// name : 'Saint Vincent and the Grenadines'
// },
// {
// latLng: [13.16, -59.55],
// name : 'Barbados'
// },
// {
// latLng: [17.11, -61.85],
// name : 'Antigua and Barbuda'
// },
// {
// latLng: [-4.61, 55.45],
// name : 'Seychelles'
// },
// {
// latLng: [7.35, 134.46],
// name : 'Palau'
// },
// {
// latLng: [42.5, 1.51],
// name : 'Andorra'
// },
// {
// latLng: [14.01, -60.98],
// name : 'Saint Lucia'
// },
// {
// latLng: [6.91, 158.18],
// name : 'Federated States of Micronesia'
// },
// {
// latLng: [1.3, 103.8],
// name : 'Singapore'
// },
// {
// latLng: [1.46, 173.03],
// name : 'Kiribati'
// },
// {
// latLng: [-21.13, -175.2],
// name : 'Tonga'
// },
// {
// latLng: [15.3, -61.38],
// name : 'Dominica'
// },
// {
// latLng: [-20.2, 57.5],
// name : 'Mauritius'
// },
// {
// latLng: [26.02, 50.55],
// name : 'Bahrain'
// },
// {
// latLng: [0.33, 6.73],
// name : 'São Tomé and Príncipe'
// }
// ]
// })
/* SPARKLINE CHARTS
* ----------------

View file

@ -12,18 +12,16 @@
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Tempusdominus Bbootstrap 4 -->
<link rel="stylesheet" href="plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- JQVMap -->
<link rel="stylesheet" href="plugins/jqvmap/jqvmap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/adminlte.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
<!-- Morris chart -->
<link rel="stylesheet" href="plugins/morris/morris.css">
<!-- jvectormap -->
<link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">
<link rel="stylesheet" href="plugins/daterangepicker/daterangepicker.css">
<!-- summernote -->
<link rel="stylesheet" href="plugins/summernote/summernote-bs4.css">
<!-- Google Font: Source Sans Pro -->
@ -654,8 +652,12 @@
<div class="tab-content p-0">
<!-- Morris chart - Sales -->
<div class="chart tab-pane active" id="revenue-chart"
style="position: relative; height: 300px;"></div>
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
style="position: relative; height: 300px;">
<canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
</div>
<div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
<canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
</div>
</div>
</div><!-- /.card-body -->
</div>
@ -891,7 +893,10 @@
<i class="fas fa-ellipsis-v"></i>
</span>
<!-- checkbox -->
<input type="checkbox" value="" name="">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" value="" name="todo1" id="todoCheck1">
<label for="todoCheck1"></label>
</div>
<!-- todo text -->
<span class="text">Design a nice theme</span>
<!-- Emphasis label -->
@ -907,7 +912,10 @@
<i class="fas fa-ellipsis-v"></i>
<i class="fas fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="" name="">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" value="" name="todo2" id="todoCheck2">
<label for="todoCheck2"></label>
</div>
<span class="text">Make the theme responsive</span>
<small class="badge badge-info"><i class="far fa-clock"></i> 4 hours</small>
<div class="tools">
@ -920,7 +928,10 @@
<i class="fas fa-ellipsis-v"></i>
<i class="fas fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="" name="">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" value="" name="todo3" id="todoCheck3">
<label for="todoCheck3"></label>
</div>
<span class="text">Let theme shine like a star</span>
<small class="badge badge-warning"><i class="far fa-clock"></i> 1 day</small>
<div class="tools">
@ -933,7 +944,10 @@
<i class="fas fa-ellipsis-v"></i>
<i class="fas fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="" name="">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" value="" name="todo4" id="todoCheck4">
<label for="todoCheck4"></label>
</div>
<span class="text">Let theme shine like a star</span>
<small class="badge badge-success"><i class="far fa-clock"></i> 3 days</small>
<div class="tools">
@ -946,7 +960,10 @@
<i class="fas fa-ellipsis-v"></i>
<i class="fas fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="" name="">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" value="" name="todo5" id="todoCheck5">
<label for="todoCheck5"></label>
</div>
<span class="text">Check your messages and notifications</span>
<small class="badge badge-primary"><i class="far fa-clock"></i> 1 week</small>
<div class="tools">
@ -959,7 +976,10 @@
<i class="fas fa-ellipsis-v"></i>
<i class="fas fa-ellipsis-v"></i>
</span>
<input type="checkbox" value="" name="">
<div class="icheck-primary d-inline ml-2">
<input type="checkbox" value="" name="todo6" id="todoCheck6">
<label for="todoCheck6"></label>
</div>
<span class="text">Let theme shine like a star</span>
<small class="badge badge-secondary"><i class="far fa-clock"></i> 1 month</small>
<div class="tools">
@ -1050,7 +1070,7 @@
</div>
</div>
<div class="card-body">
<div class="chart" id="line-chart" style="height: 250px;"></div>
<canvas class="chart" id="line-chart" style="height: 250px;"></canvas>
</div>
<!-- /.card-body -->
<div class="card-footer bg-transparent">
@ -1149,28 +1169,26 @@
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Morris.js charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="plugins/morris/morris.min.js"></script>
<!-- ChartJS -->
<script src="plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script src="plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="plugins/jqvmap/maps/jquery.vmap.world.js"></script>
<!-- jQuery Knob Chart -->
<script src="plugins/knob/jquery.knob.js"></script>
<script src="plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="plugins/moment/moment.min.js"></script>
<script src="plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="plugins/moment/moment.min.js"></script>
<script src="plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="plugins/summernote/summernote-bs4.min.js"></script>

View file

@ -588,7 +588,7 @@
<div class="col-12 col-sm-6 col-md-3">
<div class="info-box mb-3">
<span class="info-box-icon bg-success elevation-1"><i class="float-sm-left fa-shopping-cart"></i></span>
<span class="info-box-icon bg-success elevation-1"><i class="fas fa-shopping-cart"></i></span>
<div class="info-box-content">
<span class="info-box-text">Sales</span>
@ -774,7 +774,9 @@
<div class="d-md-flex">
<div class="p-1 flex-1" style="overflow: hidden">
<!-- Map will be created here -->
<div id="world-map-markers" style="height: 325px; overflow: hidden"></div>
<div id="world-map-markers" style="height: 325px; overflow: hidden">
<div class="map"></div>
</div>
</div>
<div class="card-pane-right bg-success pt-2 pb-2 pl-4 pr-4">
<div class="description-block mb-4">
@ -1409,11 +1411,11 @@
<script src="dist/js/demo.js"></script>
<!-- PAGE PLUGINS -->
<!-- SparkLine -->
<script src="plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jVectorMap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Mapael -->
<script src="plugins/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="plugins/raphael/raphael.min.js"></script>
<script src="plugins/jquery-mapael/jquery.mapael.min.js"></script>
<script src="plugins/jquery-mapael/maps/world_countries.min.js"></script>
<!-- ChartJS -->
<script src="plugins/chart.js/Chart.min.js"></script>

6152
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -46,32 +46,49 @@
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^12.2.0",
"@fortawesome/fontawesome-free": "^5.9.0",
"@fullcalendar/bootstrap": "^4.2.0",
"@fullcalendar/core": "^4.2.0",
"@fullcalendar/daygrid": "^4.2.0",
"@fullcalendar/interaction": "^4.2.0",
"@fullcalendar/timegrid": "^4.2.0",
"@lgaitan/pace-progress": "^1.0.7",
"bootstrap": "^4.3.1",
"bootstrap-colorpicker": "^3.1.2",
"bootstrap-slider": "^10.6.1",
"chart.js": "^2.8.0",
"datatables.net": "^1.10.19",
"datatables.net-bs4": "^1.10.19",
"daterangepicker": "^3.0.5",
"fastclick": "^1.0.6",
"flot": "^3.1.1",
"icheck-bootstrap": "^3.0.1",
"inputmask": "^4.0.8",
"ion-rangeslider": "^2.3.0",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"jquery-knob-chif": "^1.2.13",
"jquery-mapael": "^2.2.0",
"jquery-mousewheel": "^3.1.13",
"jquery-ui-dist": "^1.12.1",
"jqvmap": "github:CivilError/jqvmap",
"moment": "^2.24.0",
"overlayscrollbars": "^1.7.1",
"overlayscrollbars": "^1.7.2",
"popper.js": "^1.15.0",
"raphael": "^2.2.8",
"select2": "^4.0.7",
"sparklines": "^1.2.0",
"summernote": "^0.8.12",
"tempusdominus-bootstrap-4": "^5.1.2"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.5",
"@babel/plugin-external-helpers": "^7.2.0",
"@babel/preset-env": "^7.4.5",
"autoprefixer": "^8.6.5",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.6",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-env": "^1.7.0",
"browser-sync": "^2.26.7",
"clean-css-cli": "^4.3.0",
"css-loader": "^0.28.11",
"css-loader": "^3.0.0",
"eslint": "^4.19.1",
"eslint-plugin-compat": "^2.7.0",
"extract-text-webpack-plugin": "^3.0.2",
@ -82,8 +99,8 @@
"npm-run-all": "^4.1.5",
"path": "^0.12.7",
"postcss-cli": "^5.0.1",
"rollup": "^0.55.5",
"rollup-plugin-babel": "^3.0.7",
"rollup": "^1.15.1",
"rollup-plugin-babel": "^4.3.2",
"style-loader": "^0.19.1",
"uglify-js": "^3.6.0"
}

View file

@ -12,9 +12,7 @@
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Ion Slider -->
<link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.css">
<!-- ion slider Nice -->
<link rel="stylesheet" href="../../plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet" href="../../plugins/ion-rangeslider/css/ion.rangeSlider.min.css">
<!-- bootstrap slider -->
<link rel="stylesheet" href="../../plugins/bootstrap-slider/css/bootstrap-slider.min.css">
<!-- Theme style -->
@ -609,56 +607,80 @@
<div class="card-body">
<div class="row margin">
<div class="col-sm-6">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
<div class="slider-red">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
data-slider-selection="before" data-slider-tooltip="show" data-slider-id="red">
data-slider-selection="before" data-slider-tooltip="show">
</div>
<p>data-slider-id="red"</p>
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
<p>.slider-red input.slider</p>
<div class="slider-blue">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
data-slider-selection="before" data-slider-tooltip="show" data-slider-id="blue">
data-slider-selection="before" data-slider-tooltip="show">
</div>
<p>data-slider-id="blue"</p>
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
<p>.slider-blue input.slider</p>
<div class="slider-green">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
data-slider-selection="before" data-slider-tooltip="show" data-slider-id="green">
data-slider-selection="before" data-slider-tooltip="show">
</div>
<p>data-slider-id="green"</p>
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
<p>.slider-green input.slider</p>
<div class="slider-yellow">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
data-slider-selection="before" data-slider-tooltip="show" data-slider-id="yellow">
data-slider-selection="before" data-slider-tooltip="show">
</div>
<p>data-slider-id="yellow"</p>
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
<p>.slider-yellow input.slider</p>
<div class="slider-teal">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
data-slider-selection="before" data-slider-tooltip="show" data-slider-id="teal">
data-slider-selection="before" data-slider-tooltip="show">
</div>
<p>data-slider-id="teal"</p>
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
<p>.slider-teal input.slider</p>
<div class="slider-purple">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="horizontal"
data-slider-selection="before" data-slider-tooltip="show" data-slider-id="purple">
data-slider-selection="before" data-slider-tooltip="show">
</div>
<p style="margin-top: 10px">data-slider-id="purple"</p>
<p>.slider-purple input.slider</p>
</div>
<div class="col-sm-6 text-center">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
<div class="col-sm-6 d-flex justify-content-center">
<div class="slider-red mx-3">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
data-slider-selection="before" data-slider-tooltip="show" data-slider-id="red">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-selection="before" data-slider-tooltip="show">
</div>
<div class="slider-blue mx-3">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
data-slider-selection="before" data-slider-tooltip="show" data-slider-id="blue">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-selection="before" data-slider-tooltip="show">
</div>
<div class="slider-green mx-3">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
data-slider-selection="before" data-slider-tooltip="show" data-slider-id="green">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-selection="before" data-slider-tooltip="show">
</div>
<div class="slider-yellow mx-3">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
data-slider-selection="before" data-slider-tooltip="show" data-slider-id="yellow">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-selection="before" data-slider-tooltip="show">
</div>
<div class="slider-teal mx-3">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
data-slider-selection="before" data-slider-tooltip="show" data-slider-id="teal">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-selection="before" data-slider-tooltip="show">
</div>
<div class="slider-purple mx-3">
<input type="text" value="" class="slider form-control" data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-value="[-100,100]" data-slider-orientation="vertical"
data-slider-selection="before" data-slider-tooltip="show" data-slider-id="purple">
data-slider-selection="before" data-slider-tooltip="show">
</div>
</div>
</div>
</div>
@ -702,7 +724,7 @@
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- Ion Slider -->
<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../../plugins/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
<!-- Bootstrap slider -->
<script src="../../plugins/bootstrap-slider/bootstrap-slider.min.js"></script>
<script>

View file

@ -10,9 +10,12 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- fullCalendar 2.2.5-->
<link rel="stylesheet" href="../plugins/fullcalendar/fullcalendar.min.css">
<link rel="stylesheet" href="../plugins/fullcalendar/fullcalendar.print.css" media="print">
<!-- fullCalendar -->
<link rel="stylesheet" href="../plugins/fullcalendar/main.min.css">
<link rel="stylesheet" href="../plugins/fullcalendar-interaction/main.min.css">
<link rel="stylesheet" href="../plugins/fullcalendar-daygrid/main.min.css">
<link rel="stylesheet" href="../plugins/fullcalendar-timegrid/main.min.css">
<link rel="stylesheet" href="../plugins/fullcalendar-bootstrap/main.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
@ -646,10 +649,10 @@
<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<!-- Bootstrap -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- jQuery UI -->
<script src="../plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- FastClick -->
<script src="../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
@ -657,8 +660,12 @@
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script src="../plugins/fullcalendar/fullcalendar.min.js"></script>
<script src="../plugins/moment/moment.min.js"></script>
<script src="../plugins/fullcalendar/main.min.js"></script>
<script src="../plugins/fullcalendar-daygrid/main.min.js"></script>
<script src="../plugins/fullcalendar-timegrid/main.min.js"></script>
<script src="../plugins/fullcalendar-interaction/main.min.js"></script>
<script src="../plugins/fullcalendar-bootstrap/main.min.js"></script>
<!-- Page specific script -->
<script>
$(function () {
@ -696,17 +703,36 @@
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear()
$('#calendar').fullCalendar({
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendarInteraction.Draggable;
var containerEl = document.getElementById('external-events');
var checkbox = document.getElementById('drop-remove');
var calendarEl = document.getElementById('calendar');
// initialize the external events
// -----------------------------------------------------------------
new Draggable(containerEl, {
itemSelector: '.external-event',
eventData: function(eventEl) {
console.log(eventEl);
return {
title: eventEl.innerText,
backgroundColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
borderColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
textColor: window.getComputedStyle( eventEl ,null).getPropertyValue('color'),
};
}
});
var calendar = new Calendar(calendarEl, {
plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid' ],
header : {
left : 'prev,next today',
center: 'title',
right : 'month,agendaWeek,agendaDay'
},
buttonText: {
today: 'today',
month: 'month',
week : 'week',
day : 'day'
right : 'dayGridMonth,timeGridWeek,timeGridDay'
},
//Random default events
events : [
@ -757,32 +783,17 @@
],
editable : true,
droppable : true, // this allows things to be dropped onto the calendar !!!
drop : function (date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject')
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject)
// assign it the date that was reported
copiedEventObject.start = date
copiedEventObject.allDay = allDay
copiedEventObject.backgroundColor = $(this).css('background-color')
copiedEventObject.borderColor = $(this).css('border-color')
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true)
drop : function(info) {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
if (checkbox.checked) {
// if so, remove the element from the "Draggable Events" list
$(this).remove()
info.draggedEl.parentNode.removeChild(info.draggedEl);
}
}
});
}
})
calendar.render();
// $('#calendar').fullCalendar()
/* ADDING EVENTS */
var currColor = '#3c8dbc' //Red by default

View file

@ -706,6 +706,8 @@
<!-- jQuery -->
<script src="../../plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI -->
<script src="../../plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- FastClick -->
@ -715,13 +717,11 @@
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- FLOT CHARTS -->
<script src="../../plugins/flot/jquery.flot.min.js"></script>
<script src="../../plugins/flot/jquery.flot.js"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="../../plugins/flot/jquery.flot.resize.min.js"></script>
<script src="../../plugins/flot-old/jquery.flot.resize.min.js"></script>
<!-- FLOT PIE PLUGIN - also used to draw donut charts -->
<script src="../../plugins/flot/jquery.flot.pie.min.js"></script>
<!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
<script src="../../plugins/flot/jquery.flot.categories.min.js"></script>
<script src="../../plugins/flot-old/jquery.flot.pie.min.js"></script>
<!-- Page script -->
<script>
$(function () {
@ -764,29 +764,35 @@
return res
}
var interactive_plot = $.plot('#interactive', [getRandomData()], {
grid : {
borderColor: '#f3f3f3',
borderWidth: 1,
tickColor : '#f3f3f3'
},
series: {
shadowSize: 0, // Drawing is faster without shadows
color : '#3c8dbc'
},
lines : {
fill : true, //Converts the line chart to area chart
color: '#3c8dbc'
},
yaxis : {
min : 0,
max : 100,
show: true
},
xaxis : {
show: true
var interactive_plot = $.plot('#interactive', [
{
data: getRandomData(),
}
],
{
grid: {
borderColor: '#f3f3f3',
borderWidth: 1,
tickColor: '#f3f3f3'
},
series: {
color: '#3c8dbc',
lines: {
lineWidth: 2,
show: true,
fill: true,
},
},
yaxis: {
min: 0,
max: 100,
show: true
},
xaxis: {
show: true
}
}
})
)
var updateInterval = 500 //Fetch data ever x milliseconds
var realtime = 'on' //If == to on then fetch data every x seconds. else stop fetching
@ -905,10 +911,10 @@
},
series: {
shadowSize: 0, // Drawing is faster without shadows
color : '#00c0ef'
},
lines : {
fill: true //Converts the line chart to area chart
color : '#00c0ef',
lines : {
fill: true //Converts the line chart to area chart
},
},
yaxis : {
show: false
@ -926,8 +932,8 @@
*/
var bar_data = {
data : [['January', 10], ['February', 8], ['March', 4], ['April', 13], ['May', 17], ['June', 9]],
color: '#3c8dbc'
data : [[1,10], [2,8], [3,4], [4,13], [5,17], [6,9]],
bars: { show: true }
}
$.plot('#bar-chart', [bar_data], {
grid : {
@ -936,15 +942,13 @@
tickColor : '#f3f3f3'
},
series: {
bars: {
show : true,
barWidth: 0.5,
align : 'center'
}
bars: {
show: true, barWidth: 0.5, align: 'center',
},
},
colors: ['#3c8dbc'],
xaxis : {
mode : 'categories',
tickLength: 0
ticks: [[1,'January'], [2,'February'], [3,'March'], [4,'April'], [5,'May'], [6,'June']]
}
})
/* END BAR CHART */

View file

@ -747,189 +747,6 @@
</div>
<!-- /.row -->
<!-- callout -->
<div class="callout callout-info">
<h5>The following was created using data tags</h5>
<p>The following three inline (sparkline) chart have been initialized to read and interpret data tags</p>
</div>
<!-- /.callout -->
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title text-danger">Sparkline Pie</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool"><i class="fas fa-refresh"></i></button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body text-center">
<div class="sparkline" data-type="pie" data-offset="90" data-width="100px" data-height="100px">
6,4,8
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title text-primary">Sparkline line</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool"><i class="fas fa-refresh"></i></button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body text-center">
<div class="sparkline" data-type="line" data-spot-Radius="3" data-highlight-Spot-Color="#f39c12"
data-highlight-Line-Color="#222" data-min-Spot-Color="#f56954" data-max-Spot-Color="#00a65a"
data-spot-Color="#39CCCC" data-offset="90" data-width="100%" data-height="100px"
data-line-Width="2" data-line-Color="#39CCCC" data-fill-Color="rgba(57, 204, 204, 0.08)">
6,4,7,8,4,3,2,2,5,6,7,4,1,5,7,9,9,8,7,6
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h3 class="card-title text-warning">Sparkline Bar</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool"><i class="fas fa-refresh"></i></button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body text-center">
<div class="sparkline" data-type="bar" data-width="97%" data-height="100px" data-bar-Width="14"
data-bar-Spacing="7" data-bar-Color="#f39c12">
6,4,8, 9, 10, 5, 13, 18, 21, 7, 9
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Sparkline examples</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i
class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- /.card-header -->
<div id="myBody" class="card-body">
<div class="row">
<div class="col-sm-6">
<p>
Mouse speed <span id="mousespeed">Loading..</span>
</p>
<p>
Inline <span class="sparkline-1">10,8,9,3,5,8,5</span>
line graphs
<span class="sparkline-1">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
</p>
<p>
Bar charts <span class="sparkbar">10,8,9,3,5,8,5</span>
negative values: <span class="sparkbar">-3,1,2,0,3,-1</span>
stacked: <span class="sparkbar">0:2,2:4,4:2,4:1</span>
</p>
<p>
Composite inline
<span id="compositeline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
</p>
<p>
Inline with normal range
<span id="normalline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
</p>
<p>
Composite bar
<span id="compositebar">4,6,7,7,4,3,2,1,4</span>
</p>
<p>
Discrete
<span class="discrete1">4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5</span><br>
Discrete with threshold
<span id="discrete2">4,6,7,7,4,3,2,1,4</span>
</p>
<p>
Bullet charts<br>
<span class="sparkbullet">10,12,12,9,7</span><br>
<span class="sparkbullet">14,12,12,9,7</span><br>
<span class="sparkbullet">10,12,14,9,7</span><br>
</p>
</div>
<!-- /.col -->
<div class="col-sm-6">
<p>
Customize size and colours
<span id="linecustom">10,8,9,3,5,8,5,7</span>
</p>
<p>
Tristate charts
<span class="sparktristate">1,1,0,1,-1,-1,1,-1,0,0,1,1</span><br>
(think games won, lost or drawn)
</p>
<p>
Tristate chart using a colour map:
<span class="sparktristatecols">1,2,0,2,-1,-2,1,-2,0,0,1,1</span>
</p>
<p>
Box Plot: <span class="sparkboxplot">4,27,34,52,54,59,61,68,78,82,85,87,91,93,100</span><br>
Pre-computed box plot <span class="sparkboxplotraw">Loading..</span>
</p>
<p>
Pie charts
<span class="sparkpie">1,1,2</span>
<span class="sparkpie">1,5</span>
<span class="sparkpie">20,50,80</span>
</p>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
@ -962,7 +779,7 @@
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- jQuery Knob -->
<script src="../../plugins/knob/jquery.knob.js"></script>
<script src="../../plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- Sparkline -->
<script src="../../plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- page script -->

View file

@ -11,10 +11,10 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
@ -43,9 +43,10 @@
</div>
<div class="row">
<div class="col-8">
<div class="checkbox icheck">
<label>
<input type="checkbox"> Remember Me
<div class="icheck-primary">
<input type="checkbox" id="remember">
<label for="remember">
Remember Me
</label>
</div>
</div>
@ -84,16 +85,6 @@
<script src="../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- iCheck -->
<script src="../../plugins/iCheck/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass : 'iradio_square-blue',
increaseArea : '20%' // optional
})
})
</script>
</body>
</html>

View file

@ -11,10 +11,10 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
@ -55,9 +55,10 @@
</div>
<div class="row">
<div class="col-8">
<div class="checkbox icheck">
<label>
<input type="checkbox"> I agree to the <a href="#">terms</a>
<div class="icheck-primary">
<input type="checkbox" id="agreeTerms" name="terms" value="agree">
<label for="agreeTerms">
I agree to the <a href="#">terms</a>
</label>
</div>
</div>
@ -92,16 +93,5 @@
<script src="../../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- iCheck -->
<script src="../../plugins/iCheck/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass : 'iradio_square-blue',
increaseArea : '20%' // optional
})
})
</script>
</body>
</html>

View file

@ -12,15 +12,15 @@
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- daterange picker -->
<link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker-bs3.css">
<link rel="stylesheet" href="../../plugins/daterangepicker/daterangepicker.css">
<!-- iCheck for checkboxes and radio inputs -->
<link rel="stylesheet" href="../../plugins/iCheck/all.css">
<link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Bootstrap Color Picker -->
<link rel="stylesheet" href="../../plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
<!-- Tempusdominus Bbootstrap 4 -->
<link rel="stylesheet" href="../../plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- Select2 -->
<link rel="stylesheet" href="../../plugins/select2/select2.min.css">
<link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
@ -608,7 +608,7 @@
<div class="col-md-6">
<div class="form-group">
<label>Multiple</label>
<select class="form-control select2" multiple="multiple" data-placeholder="Select a State"
<select class="select2" multiple="multiple" data-placeholder="Select a State"
style="width: 100%;">
<option>Alabama</option>
<option>Alaska</option>
@ -834,97 +834,134 @@
<!-- iCheck -->
<div class="card card-success">
<div class="card-header">
<h3 class="card-title">iCheck - Checkbox &amp; Radio Inputs</h3>
<h3 class="card-title">iCheck Bootstrap - Checkbox &amp; Radio Inputs</h3>
</div>
<div class="card-body">
<!-- Minimal style -->
<!-- checkbox -->
<div class="form-group">
<label>
<input type="checkbox" class="minimal" checked>
</label>
<label>
<input type="checkbox" class="minimal">
</label>
<label>
<input type="checkbox" class="minimal" disabled>
Minimal skin checkbox
</label>
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="checkbox" checked>
<label>
</label>
</div>
<div class="icheck-primary d-inline">
<input type="checkbox">
<label>
</label>
</div>
<div class="icheck-primary d-inline">
<input type="checkbox" disabled>
<label>
Primary checkbox
</label>
</div>
</div>
<!-- radio -->
<div class="form-group">
<label>
<input type="radio" name="r1" class="minimal" checked>
</label>
<label>
<input type="radio" name="r1" class="minimal">
</label>
<label>
<input type="radio" name="r1" class="minimal" disabled>
Minimal skin radio
</label>
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="radio" name="r1" checked>
<label>
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" name="r1">
<label>
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" name="r1" disabled>
<label>
Primary radio
</label>
</div>
</div>
<!-- Minimal red style -->
<!-- checkbox -->
<div class="form-group">
<label>
<input type="checkbox" class="minimal-red" checked>
</label>
<label>
<input type="checkbox" class="minimal-red">
</label>
<label>
<input type="checkbox" class="minimal-red" disabled>
Minimal red skin checkbox
</label>
<div class="form-group clearfix">
<div class="icheck-danger d-inline">
<input type="checkbox" checked>
<label>
</label>
</div>
<div class="icheck-danger d-inline">
<input type="checkbox">
<label>
</label>
</div>
<div class="icheck-danger d-inline">
<input type="checkbox" disabled>
<label>
Danger checkbox
</label>
</div>
</div>
<!-- radio -->
<div class="form-group">
<label>
<input type="radio" name="r2" class="minimal-red" checked>
</label>
<label>
<input type="radio" name="r2" class="minimal-red">
</label>
<label>
<input type="radio" name="r2" class="minimal-red" disabled>
Minimal red skin radio
</label>
<div class="form-group clearfix">
<div class="icheck-danger d-inline">
<input type="radio" name="r2" checked>
<label>
</label>
</div>
<div class="icheck-danger d-inline">
<input type="radio" name="r2">
<label>
</label>
</div>
<div class="icheck-danger d-inline">
<input type="radio" name="r2" disabled>
<label>
Danger radio
</label>
</div>
</div>
<!-- Minimal red style -->
<!-- checkbox -->
<div class="form-group">
<label>
<input type="checkbox" class="flat-red" checked>
</label>
<label>
<input type="checkbox" class="flat-red">
</label>
<label>
<input type="checkbox" class="flat-red" disabled>
Flat green skin checkbox
</label>
<div class="form-group clearfix">
<div class="icheck-success d-inline">
<input type="checkbox" checked>
<label>
</label>
</div>
<div class="icheck-success d-inline">
<input type="checkbox">
<label>
</label>
</div>
<div class="icheck-success d-inline">
<input type="checkbox" disabled>
<label>
Success checkbox
</label>
</div>
</div>
<!-- radio -->
<div class="form-group">
<label>
<input type="radio" name="r3" class="flat-red" checked>
</label>
<label>
<input type="radio" name="r3" class="flat-red">
</label>
<label>
<input type="radio" name="r3" class="flat-red" disabled>
Flat green skin radio
</label>
<div class="form-group clearfix">
<div class="icheck-success d-inline">
<input type="radio" name="r2" checked>
<label>
</label>
</div>
<div class="icheck-success d-inline">
<input type="radio" name="r2">
<label>
</label>
</div>
<div class="icheck-success d-inline">
<input type="radio" name="r2" disabled>
<label>
Success radio
</label>
</div>
</div>
</div>
<!-- /.card-body -->
@ -963,11 +1000,9 @@
<!-- Bootstrap 4 -->
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Select2 -->
<script src="../../plugins/select2/select2.full.min.js"></script>
<script src="../../plugins/select2/js/select2.full.min.js"></script>
<!-- InputMask -->
<script src="../../plugins/input-mask/jquery.inputmask.js"></script>
<script src="../../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="../../plugins/input-mask/jquery.inputmask.extensions.js"></script>
<script src="../../plugins/inputmask/jquery.inputmask.bundle.js"></script>
<script src="../../plugins/moment/moment.min.js"></script>
<!-- date-range-picker -->
<script src="../../plugins/daterangepicker/daterangepicker.js"></script>
@ -975,8 +1010,6 @@
<script src="../../plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="../../plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="../../plugins/iCheck/icheck.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
@ -1000,9 +1033,11 @@
$('#reservation').daterangepicker()
//Date range picker with time picker
$('#reservationtime').daterangepicker({
timePicker : true,
timePicker: true,
timePickerIncrement: 30,
format : 'MM/DD/YYYY h:mm A'
locale: {
format: 'MM/DD/YYYY hh:mm A'
}
})
//Date range as a button
$('#daterange-btn').daterangepicker(
@ -1023,22 +1058,6 @@
}
)
//iCheck for checkbox and radio inputs
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass : 'iradio_minimal-blue'
})
//Red color scheme for iCheck
$('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
checkboxClass: 'icheckbox_minimal-red',
radioClass : 'iradio_minimal-red'
})
//Flat red color scheme for iCheck
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
checkboxClass: 'icheckbox_flat-green',
radioClass : 'iradio_flat-green'
})
//Timepicker
$('#timepicker').datetimepicker({
format: 'LT'

View file

@ -13,8 +13,6 @@
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<!-- Google Font: Source Sans Pro -->
@ -726,8 +724,6 @@
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- iCheck -->
<script src="../../plugins/iCheck/icheck.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Page Script -->

View file

@ -10,10 +10,10 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- icheck bootstrap -->
<link rel="stylesheet" href="../../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
@ -679,7 +679,12 @@
<table class="table table-hover table-striped">
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check1">
<label for="check1"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -688,7 +693,12 @@
<td class="mailbox-date">5 mins ago</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check2">
<label for="check2"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -697,7 +707,12 @@
<td class="mailbox-date">28 mins ago</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check3">
<label for="check3"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -706,7 +721,12 @@
<td class="mailbox-date">11 hours ago</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check4">
<label for="check4"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -715,7 +735,12 @@
<td class="mailbox-date">15 hours ago</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check5">
<label for="check5"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -724,7 +749,12 @@
<td class="mailbox-date">Yesterday</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check6">
<label for="check6"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -733,7 +763,12 @@
<td class="mailbox-date">2 days ago</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check7">
<label for="check7"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -742,7 +777,12 @@
<td class="mailbox-date">2 days ago</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check8">
<label for="check8"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -751,7 +791,12 @@
<td class="mailbox-date">2 days ago</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check9">
<label for="check9"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -760,7 +805,12 @@
<td class="mailbox-date">2 days ago</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check10">
<label for="check10"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -769,7 +819,12 @@
<td class="mailbox-date">2 days ago</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check11">
<label for="check11"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -778,7 +833,12 @@
<td class="mailbox-date">4 days ago</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check12">
<label for="check12"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -787,7 +847,12 @@
<td class="mailbox-date">12 days ago</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check13">
<label for="check13"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star-o text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -796,7 +861,12 @@
<td class="mailbox-date">12 days ago</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check14">
<label for="check14"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -805,7 +875,12 @@
<td class="mailbox-date">14 days ago</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<div class="icheck-primary">
<input type="checkbox" value="" id="check15">
<label for="check15"></label>
</div>
</td>
<td class="mailbox-star"><a href="#"><i class="fas fa-star text-warning"></i></a></td>
<td class="mailbox-name"><a href="read-mail.html">Alexander Pierce</a></td>
<td class="mailbox-subject"><b>AdminLTE 3.0 Issue</b> - Trying to find a solution to this problem...
@ -877,28 +952,19 @@
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- iCheck -->
<script src="../../plugins/iCheck/icheck.min.js"></script>
<!-- Page Script -->
<script>
$(function () {
//Enable iCheck plugin for checkboxes
//iCheck for checkbox and radio inputs
$('.mailbox-messages input[type="checkbox"]').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass : 'iradio_flat-blue'
})
//Enable check and uncheck all functionality
$('.checkbox-toggle').click(function () {
var clicks = $(this).data('clicks')
if (clicks) {
//Uncheck all checkboxes
$('.mailbox-messages input[type=\'checkbox\']').iCheck('uncheck')
$('.mailbox-messages input[type=\'checkbox\']').prop('checked', false)
$('.checkbox-toggle .far.fa-check-square').removeClass('fa-check-square').addClass('fa-square')
} else {
//Check all checkboxes
$('.mailbox-messages input[type=\'checkbox\']').iCheck('check')
$('.mailbox-messages input[type=\'checkbox\']').prop('checked', true)
$('.checkbox-toggle .far.fa-square').removeClass('fa-square').addClass('fa-check-square')
}
$(this).data('clicks', !clicks)

View file

@ -13,8 +13,6 @@
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="../../plugins/iCheck/square/blue.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>

View file

@ -0,0 +1,38 @@
# Date Range Picker
![Improvely.com](https://i.imgur.com/UTRlaar.png)
This date range picker component creates a dropdown menu from which a user can
select a range of dates. I created it while building the UI for [Improvely](http://www.improvely.com),
which needed a way to select date ranges for reports.
Features include limiting the selectable date range, localizable strings and date formats,
a single date picker mode, a time picker, and predefined date ranges.
## [Documentation and Live Usage Examples](http://www.daterangepicker.com)
## [See It In a Live Application](https://awio.iljmp.com/5/drpdemogh)
## License
The MIT License (MIT)
Copyright (c) 2012-2019 Dan Grossman
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

View file

@ -0,0 +1,20 @@
{
"name": "daterangepicker",
"main": [
"daterangepicker.js",
"daterangepicker.css"
],
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"moment.js",
"moment.min.js"
],
"dependencies": {
"jquery": "1.9.1 - 3",
"moment": ">=2.9.0"
}
}

View file

@ -1,335 +0,0 @@
/*!
* Stylesheet for the Date Range Picker, for use with Bootstrap 3.x
*
* Copyright 2013-2015 Dan Grossman ( http://www.dangrossman.info )
* Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
*
* Built for http://www.improvely.com
*/
.daterangepicker.dropdown-menu {
max-width: none;
z-index: 3000;
}
.daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar {
float: left;
margin: 4px;
}
.daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar,
.daterangepicker.openscenter .ranges, .daterangepicker.openscenter .calendar {
float: right;
margin: 4px;
}
.daterangepicker.single .ranges, .daterangepicker.single .calendar {
float: none;
}
.daterangepicker .ranges {
width: 160px;
text-align: left;
}
.daterangepicker .ranges .range_inputs>div {
float: left;
}
.daterangepicker .ranges .range_inputs>div:nth-child(2) {
padding-left: 11px;
}
.daterangepicker .calendar {
display: none;
max-width: 270px;
}
.daterangepicker.show-calendar .calendar {
display: block;
}
.daterangepicker .calendar.single .calendar-date {
border: none;
}
.daterangepicker .calendar th, .daterangepicker .calendar td {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
white-space: nowrap;
text-align: center;
min-width: 32px;
}
.daterangepicker .daterangepicker_start_input label,
.daterangepicker .daterangepicker_end_input label {
color: #333;
display: block;
font-size: 11px;
font-weight: normal;
height: 20px;
line-height: 20px;
margin-bottom: 2px;
text-shadow: #fff 1px 1px 0px;
text-transform: uppercase;
width: 74px;
}
.daterangepicker .ranges input {
font-size: 11px;
}
.daterangepicker .ranges .input-mini {
border: 1px solid #ccc;
border-radius: 4px;
color: #555;
display: block;
font-size: 11px;
height: 30px;
line-height: 30px;
vertical-align: middle;
margin: 0 0 10px 0;
padding: 0 6px;
width: 74px;
}
.daterangepicker .ranges ul {
list-style: none;
margin: 0;
padding: 0;
}
.daterangepicker .ranges li {
font-size: 13px;
background: #f5f5f5;
border: 1px solid #f5f5f5;
color: #08c;
padding: 3px 12px;
margin-bottom: 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
}
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
background: #08c;
border: 1px solid #08c;
color: #fff;
}
.daterangepicker .calendar-date {
border: 1px solid #ddd;
padding: 4px;
border-radius: 4px;
background: #fff;
}
.daterangepicker .calendar-time {
text-align: center;
margin: 8px auto 0 auto;
line-height: 30px;
}
.daterangepicker {
position: absolute;
background: #fff;
top: 100px;
left: 20px;
padding: 4px;
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.daterangepicker.opensleft:before {
position: absolute;
top: -7px;
right: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.daterangepicker.opensleft:after {
position: absolute;
top: -6px;
right: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
content: '';
}
.daterangepicker.openscenter:before {
position: absolute;
top: -7px;
left: 0;
right: 0;
width: 0;
margin-left: auto;
margin-right: auto;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.daterangepicker.openscenter:after {
position: absolute;
top: -6px;
left: 0;
right: 0;
width: 0;
margin-left: auto;
margin-right: auto;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
content: '';
}
.daterangepicker.opensright:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.daterangepicker.opensright:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
content: '';
}
.daterangepicker.dropup{
margin-top: -5px;
}
.daterangepicker.dropup:before{
top: initial;
bottom:-7px;
border-bottom: initial;
border-top: 7px solid #ccc;
}
.daterangepicker.dropup:after{
top: initial;
bottom:-6px;
border-bottom: initial;
border-top: 6px solid #fff;
}
.daterangepicker table {
width: 100%;
margin: 0;
}
.daterangepicker td, .daterangepicker th {
text-align: center;
width: 20px;
height: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
}
.daterangepicker td.off {
color: #999;
}
.daterangepicker td.disabled, .daterangepicker option.disabled {
color: #999;
}
.daterangepicker td.available:hover, .daterangepicker th.available:hover {
background: #eee;
}
.daterangepicker td.in-range {
background: #ebf4f8;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.daterangepicker td.start-date {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.daterangepicker td.end-date {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.daterangepicker td.start-date.end-date {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #357ebd;
border-color: #3071a9;
color: #fff;
}
.daterangepicker td.week, .daterangepicker th.week {
font-size: 80%;
color: #ccc;
}
.daterangepicker select.monthselect, .daterangepicker select.yearselect {
font-size: 12px;
padding: 1px;
height: auto;
margin: 0;
cursor: default;
}
.daterangepicker select.monthselect {
margin-right: 2%;
width: 56%;
}
.daterangepicker select.yearselect {
width: 40%;
}
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
width: 50px;
margin-bottom: 0;
}
.daterangepicker_start_input {
float: left;
}
.daterangepicker_end_input {
float: left;
padding-left: 11px
}
.daterangepicker th.month {
width: auto;
}

View file

@ -0,0 +1,410 @@
.daterangepicker {
position: absolute;
color: inherit;
background-color: #fff;
border-radius: 4px;
border: 1px solid #ddd;
width: 278px;
max-width: none;
padding: 0;
margin-top: 7px;
top: 100px;
left: 20px;
z-index: 3001;
display: none;
font-family: arial;
font-size: 15px;
line-height: 1em;
}
.daterangepicker:before, .daterangepicker:after {
position: absolute;
display: inline-block;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.daterangepicker:before {
top: -7px;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom: 7px solid #ccc;
}
.daterangepicker:after {
top: -6px;
border-right: 6px solid transparent;
border-bottom: 6px solid #fff;
border-left: 6px solid transparent;
}
.daterangepicker.opensleft:before {
right: 9px;
}
.daterangepicker.opensleft:after {
right: 10px;
}
.daterangepicker.openscenter:before {
left: 0;
right: 0;
width: 0;
margin-left: auto;
margin-right: auto;
}
.daterangepicker.openscenter:after {
left: 0;
right: 0;
width: 0;
margin-left: auto;
margin-right: auto;
}
.daterangepicker.opensright:before {
left: 9px;
}
.daterangepicker.opensright:after {
left: 10px;
}
.daterangepicker.drop-up {
margin-top: -7px;
}
.daterangepicker.drop-up:before {
top: initial;
bottom: -7px;
border-bottom: initial;
border-top: 7px solid #ccc;
}
.daterangepicker.drop-up:after {
top: initial;
bottom: -6px;
border-bottom: initial;
border-top: 6px solid #fff;
}
.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
float: none;
}
.daterangepicker.single .drp-selected {
display: none;
}
.daterangepicker.show-calendar .drp-calendar {
display: block;
}
.daterangepicker.show-calendar .drp-buttons {
display: block;
}
.daterangepicker.auto-apply .drp-buttons {
display: none;
}
.daterangepicker .drp-calendar {
display: none;
max-width: 270px;
}
.daterangepicker .drp-calendar.left {
padding: 8px 0 8px 8px;
}
.daterangepicker .drp-calendar.right {
padding: 8px;
}
.daterangepicker .drp-calendar.single .calendar-table {
border: none;
}
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
color: #fff;
border: solid black;
border-width: 0 2px 2px 0;
border-radius: 0;
display: inline-block;
padding: 3px;
}
.daterangepicker .calendar-table .next span {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.daterangepicker .calendar-table .prev span {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
white-space: nowrap;
text-align: center;
vertical-align: middle;
min-width: 32px;
width: 32px;
height: 24px;
line-height: 24px;
font-size: 12px;
border-radius: 4px;
border: 1px solid transparent;
white-space: nowrap;
cursor: pointer;
}
.daterangepicker .calendar-table {
border: 1px solid #fff;
border-radius: 4px;
background-color: #fff;
}
.daterangepicker .calendar-table table {
width: 100%;
margin: 0;
border-spacing: 0;
border-collapse: collapse;
}
.daterangepicker td.available:hover, .daterangepicker th.available:hover {
background-color: #eee;
border-color: transparent;
color: inherit;
}
.daterangepicker td.week, .daterangepicker th.week {
font-size: 80%;
color: #ccc;
}
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
background-color: #fff;
border-color: transparent;
color: #999;
}
.daterangepicker td.in-range {
background-color: #ebf4f8;
border-color: transparent;
color: #000;
border-radius: 0;
}
.daterangepicker td.start-date {
border-radius: 4px 0 0 4px;
}
.daterangepicker td.end-date {
border-radius: 0 4px 4px 0;
}
.daterangepicker td.start-date.end-date {
border-radius: 4px;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #357ebd;
border-color: transparent;
color: #fff;
}
.daterangepicker th.month {
width: auto;
}
.daterangepicker td.disabled, .daterangepicker option.disabled {
color: #999;
cursor: not-allowed;
text-decoration: line-through;
}
.daterangepicker select.monthselect, .daterangepicker select.yearselect {
font-size: 12px;
padding: 1px;
height: auto;
margin: 0;
cursor: default;
}
.daterangepicker select.monthselect {
margin-right: 2%;
width: 56%;
}
.daterangepicker select.yearselect {
width: 40%;
}
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
width: 50px;
margin: 0 auto;
background: #eee;
border: 1px solid #eee;
padding: 2px;
outline: 0;
font-size: 12px;
}
.daterangepicker .calendar-time {
text-align: center;
margin: 4px auto 0 auto;
line-height: 30px;
position: relative;
}
.daterangepicker .calendar-time select.disabled {
color: #ccc;
cursor: not-allowed;
}
.daterangepicker .drp-buttons {
clear: both;
text-align: right;
padding: 8px;
border-top: 1px solid #ddd;
display: none;
line-height: 12px;
vertical-align: middle;
}
.daterangepicker .drp-selected {
display: inline-block;
font-size: 12px;
padding-right: 8px;
}
.daterangepicker .drp-buttons .btn {
margin-left: 8px;
font-size: 12px;
font-weight: bold;
padding: 4px 8px;
}
.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
border-right: 1px solid #ddd;
}
.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
border-left: 1px solid #ddd;
}
.daterangepicker.show-ranges.rtl .drp-calendar.right {
border-right: 1px solid #ddd;
}
.daterangepicker.show-ranges.ltr .drp-calendar.left {
border-left: 1px solid #ddd;
}
.daterangepicker .ranges {
float: none;
text-align: left;
margin: 0;
}
.daterangepicker.show-calendar .ranges {
margin-top: 8px;
}
.daterangepicker .ranges ul {
list-style: none;
margin: 0 auto;
padding: 0;
width: 100%;
}
.daterangepicker .ranges li {
font-size: 12px;
padding: 8px 12px;
cursor: pointer;
}
.daterangepicker .ranges li:hover {
background-color: #eee;
}
.daterangepicker .ranges li.active {
background-color: #08c;
color: #fff;
}
/* Larger Screen Styling */
@media (min-width: 564px) {
.daterangepicker {
width: auto;
}
.daterangepicker .ranges ul {
width: 140px;
}
.daterangepicker.single .ranges ul {
width: 100%;
}
.daterangepicker.single .drp-calendar.left {
clear: none;
}
.daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
float: left;
}
.daterangepicker {
direction: ltr;
text-align: left;
}
.daterangepicker .drp-calendar.left {
clear: left;
margin-right: 0;
}
.daterangepicker .drp-calendar.left .calendar-table {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.daterangepicker .drp-calendar.right {
margin-left: 0;
}
.daterangepicker .drp-calendar.right .calendar-table {
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.daterangepicker .drp-calendar.left .calendar-table {
padding-right: 8px;
}
.daterangepicker .ranges, .daterangepicker .drp-calendar {
float: left;
}
}
@media (min-width: 730px) {
.daterangepicker .ranges {
width: auto;
}
.daterangepicker .ranges {
float: left;
}
.daterangepicker.rtl .ranges {
float: right;
}
.daterangepicker .drp-calendar.left {
clear: none !important;
}
}

2869
plugins/daterangepicker/daterangepicker.js Executable file → Normal file

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,374 @@
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>A date range picker for Bootstrap</title>
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />-->
<link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="margin: 60px 0">
<div class="container">
<h1 style="margin: 0 0 20px 0">Configuration Builder</h1>
<div class="well configurator">
<form>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="parentEl">parentEl</label>
<input type="text" class="form-control" id="parentEl" value="" placeholder="body">
</div>
<div class="form-group">
<label for="startDate">startDate</label>
<input type="text" class="form-control" id="startDate" value="07/01/2015">
</div>
<div class="form-group">
<label for="endDate">endDate</label>
<input type="text" class="form-control" id="endDate" value="07/15/2015">
</div>
<div class="form-group">
<label for="minDate">minDate</label>
<input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
</div>
<div class="form-group">
<label for="maxDate">maxDate</label>
<input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" id="autoApply"> autoApply
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="singleDatePicker"> singleDatePicker
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showDropdowns"> showDropdowns
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showWeekNumbers"> showWeekNumbers
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePicker" checked="checked"> timePicker
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePicker24Hour"> timePicker24Hour
</label>
</div>
<div class="form-group">
<label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
<input type="text" class="form-control" id="timePickerIncrement" value="1">
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePickerSeconds"> timePickerSeconds
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="ranges" checked="checked"> ranges (with example predefined ranges)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="locale"> locale (with example settings)
</label>
<label id="rtl-wrap">
<input type="checkbox" id="rtl"> RTL (right-to-left)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
</label>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showCustomRangeLabel" checked="checked"> showCustomRangeLabel
</label>
</div>
<div class="form-group">
<label for="opens">opens</label>
<select id="opens" class="form-control">
<option value="right" selected>right</option>
<option value="left">left</option>
<option value="center">center</option>
</select>
</div>
<div class="form-group">
<label for="drops">drops</label>
<select id="drops" class="form-control">
<option value="down" selected>down</option>
<option value="up">up</option>
</select>
</div>
<div class="form-group">
<label for="buttonClasses">buttonClasses</label>
<input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
</div>
<div class="form-group">
<label for="applyClass">applyClass</label>
<input type="text" class="form-control" id="applyClass" value="btn-success">
</div>
<div class="form-group">
<label for="cancelClass">cancelClass</label>
<input type="text" class="form-control" id="cancelClass" value="btn-default">
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2 demo">
<h4>Your Date Range Picker</h4>
<center>
<input type="text" id="config-demo" class="form-control">
</center>
</div>
<div class="col-md-6">
<h4>Configuration</h4>
<div class="well">
<textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
</div>
</div>
</div>
</div>
<style type="text/css">
.demo { position: relative; }
.demo i {
position: absolute; bottom: 10px; right: 24px; top: auto; cursor: pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#config-text').keyup(function() {
eval($(this).val());
});
$('.configurator input, .configurator select').change(function() {
updateConfig();
});
$('.demo i').click(function() {
$(this).parent().find('input').click();
});
$('#startDate').daterangepicker({
singleDatePicker: true,
startDate: moment().subtract(6, 'days')
});
$('#endDate').daterangepicker({
singleDatePicker: true,
startDate: moment()
});
updateConfig();
function updateConfig() {
var options = {};
if ($('#singleDatePicker').is(':checked'))
options.singleDatePicker = true;
if ($('#showDropdowns').is(':checked'))
options.showDropdowns = true;
if ($('#showWeekNumbers').is(':checked'))
options.showWeekNumbers = true;
if ($('#showISOWeekNumbers').is(':checked'))
options.showISOWeekNumbers = true;
if ($('#timePicker').is(':checked'))
options.timePicker = true;
if ($('#timePicker24Hour').is(':checked'))
options.timePicker24Hour = true;
if ($('#timePickerIncrement').val().length && $('#timePickerIncrement').val() != 1)
options.timePickerIncrement = parseInt($('#timePickerIncrement').val(), 10);
if ($('#timePickerSeconds').is(':checked'))
options.timePickerSeconds = true;
if ($('#autoApply').is(':checked'))
options.autoApply = true;
if ($('#dateLimit').is(':checked'))
options.dateLimit = { days: 7 };
if ($('#ranges').is(':checked')) {
options.ranges = {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
};
}
if ($('#locale').is(':checked')) {
$('#rtl-wrap').show();
options.locale = {
direction: $('#rtl').is(':checked') ? 'rtl' : 'ltr',
format: 'MM/DD/YYYY HH:mm',
separator: ' - ',
applyLabel: 'Apply',
cancelLabel: 'Cancel',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
};
} else {
$('#rtl-wrap').hide();
}
if (!$('#linkedCalendars').is(':checked'))
options.linkedCalendars = false;
if (!$('#autoUpdateInput').is(':checked'))
options.autoUpdateInput = false;
if (!$('#showCustomRangeLabel').is(':checked'))
options.showCustomRangeLabel = false;
if ($('#alwaysShowCalendars').is(':checked'))
options.alwaysShowCalendars = true;
if ($('#parentEl').val().length)
options.parentEl = $('#parentEl').val();
if ($('#startDate').val().length)
options.startDate = $('#startDate').val();
if ($('#endDate').val().length)
options.endDate = $('#endDate').val();
if ($('#minDate').val().length)
options.minDate = $('#minDate').val();
if ($('#maxDate').val().length)
options.maxDate = $('#maxDate').val();
if ($('#opens').val().length && $('#opens').val() != 'right')
options.opens = $('#opens').val();
if ($('#drops').val().length && $('#drops').val() != 'down')
options.drops = $('#drops').val();
if ($('#buttonClasses').val().length && $('#buttonClasses').val() != 'btn btn-sm')
options.buttonClasses = $('#buttonClasses').val();
if ($('#applyClass').val().length && $('#applyClass').val() != 'btn-success')
options.applyClass = $('#applyClass').val();
if ($('#cancelClass').val().length && $('#cancelClass').val() != 'btn-default')
options.cancelClass = $('#cancelClass').val();
$('#config-text').val("$('#demo').daterangepicker(" + JSON.stringify(options, null, ' ') + ", function(start, end, label) {\n console.log(\"New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')\");\n});");
$('#config-demo').daterangepicker(options, function(start, end, label) { console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')'); }).click();;
}
});
</script>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

View file

@ -0,0 +1,210 @@
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>A date range picker for Bootstrap</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="../../daterangepicker.css" />
<style type="text/css">
.demo { position: relative; }
.demo i {
position: absolute; bottom: 10px; right: 24px; top: auto; cursor: pointer;
}
</style>
</head>
<body style="margin: 60px 0">
<div class="container">
<h1 style="margin: 0 0 20px 0">Configuration Builder</h1>
<div class="well configurator">
<form>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="parentEl">parentEl</label>
<input type="text" class="form-control" id="parentEl" value="" placeholder="body">
</div>
<div class="form-group">
<label for="startDate">startDate</label>
<input type="text" class="form-control" id="startDate" value="07/01/2015">
</div>
<div class="form-group">
<label for="endDate">endDate</label>
<input type="text" class="form-control" id="endDate" value="07/15/2015">
</div>
<div class="form-group">
<label for="minDate">minDate</label>
<input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
</div>
<div class="form-group">
<label for="maxDate">maxDate</label>
<input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" id="autoApply"> autoApply
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="singleDatePicker"> singleDatePicker
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showDropdowns"> showDropdowns
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showWeekNumbers"> showWeekNumbers
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePicker"> timePicker
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePicker24Hour"> timePicker24Hour
</label>
</div>
<div class="form-group">
<label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
<input type="text" class="form-control" id="timePickerIncrement" value="1">
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePickerSeconds"> timePickerSeconds
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="ranges"> ranges (with example predefined ranges)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="locale"> locale (with example settings)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="opens">opens</label>
<select id="opens" class="form-control">
<option value="right" selected>right</option>
<option value="left">left</option>
<option value="center">center</option>
</select>
</div>
<div class="form-group">
<label for="drops">drops</label>
<select id="drops" class="form-control">
<option value="down" selected>down</option>
<option value="up">up</option>
</select>
</div>
<div class="form-group">
<label for="buttonClasses">buttonClasses</label>
<input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
</div>
<div class="form-group">
<label for="applyClass">applyClass</label>
<input type="text" class="form-control" id="applyClass" value="btn-success">
</div>
<div class="form-group">
<label for="cancelClass">cancelClass</label>
<input type="text" class="form-control" id="cancelClass" value="btn-default">
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2 demo">
<h4>Your Date Range Picker</h4>
<input type="text" id="config-demo" class="form-control">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
</div>
<div class="col-md-6">
<h4>Configuration</h4>
<div class="well">
<textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="require.js" data-main="main.js"></script>
</body>
</html>

View file

@ -0,0 +1,141 @@
requirejs.config({
"paths": {
"jquery": "https://code.jquery.com/jquery-1.11.3.min",
"moment": "../../moment",
"daterangepicker": "../../daterangepicker"
}
});
requirejs(['jquery', 'moment', 'daterangepicker'] , function ($, moment) {
$(document).ready(function() {
$('#config-text').keyup(function() {
eval($(this).val());
});
$('.configurator input, .configurator select').change(function() {
updateConfig();
});
$('.demo i').click(function() {
$(this).parent().find('input').click();
});
$('#startDate').daterangepicker({
singleDatePicker: true,
startDate: moment().subtract(6, 'days')
});
$('#endDate').daterangepicker({
singleDatePicker: true,
startDate: moment()
});
updateConfig();
function updateConfig() {
var options = {};
if ($('#singleDatePicker').is(':checked'))
options.singleDatePicker = true;
if ($('#showDropdowns').is(':checked'))
options.showDropdowns = true;
if ($('#showWeekNumbers').is(':checked'))
options.showWeekNumbers = true;
if ($('#showISOWeekNumbers').is(':checked'))
options.showISOWeekNumbers = true;
if ($('#timePicker').is(':checked'))
options.timePicker = true;
if ($('#timePicker24Hour').is(':checked'))
options.timePicker24Hour = true;
if ($('#timePickerIncrement').val().length && $('#timePickerIncrement').val() != 1)
options.timePickerIncrement = parseInt($('#timePickerIncrement').val(), 10);
if ($('#timePickerSeconds').is(':checked'))
options.timePickerSeconds = true;
if ($('#autoApply').is(':checked'))
options.autoApply = true;
if ($('#dateLimit').is(':checked'))
options.dateLimit = { days: 7 };
if ($('#ranges').is(':checked')) {
options.ranges = {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
};
}
if ($('#locale').is(':checked')) {
options.locale = {
format: 'MM/DD/YYYY HH:mm',
separator: ' - ',
applyLabel: 'Apply',
cancelLabel: 'Cancel',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
};
}
if (!$('#linkedCalendars').is(':checked'))
options.linkedCalendars = false;
if (!$('#autoUpdateInput').is(':checked'))
options.autoUpdateInput = false;
if ($('#alwaysShowCalendars').is(':checked'))
options.alwaysShowCalendars = true;
if ($('#parentEl').val().length)
options.parentEl = $('#parentEl').val();
if ($('#startDate').val().length)
options.startDate = $('#startDate').val();
if ($('#endDate').val().length)
options.endDate = $('#endDate').val();
if ($('#minDate').val().length)
options.minDate = $('#minDate').val();
if ($('#maxDate').val().length)
options.maxDate = $('#maxDate').val();
if ($('#opens').val().length && $('#opens').val() != 'right')
options.opens = $('#opens').val();
if ($('#drops').val().length && $('#drops').val() != 'down')
options.drops = $('#drops').val();
if ($('#buttonClasses').val().length && $('#buttonClasses').val() != 'btn btn-sm')
options.buttonClasses = $('#buttonClasses').val();
if ($('#applyClass').val().length && $('#applyClass').val() != 'btn-success')
options.applyClass = $('#applyClass').val();
if ($('#cancelClass').val().length && $('#cancelClass').val() != 'btn-default')
options.cancelClass = $('#cancelClass').val();
$('#config-text').val("$('#demo').daterangepicker(" + JSON.stringify(options, null, ' ') + ", function(start, end, label) {\n console.log(\"New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')\");\n});");
$('#config-demo').daterangepicker(options, function(start, end, label) { console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')'); });
}
});
});

View file

@ -0,0 +1,36 @@
/*
RequireJS 2.2.0 Copyright jQuery Foundation and other contributors.
Released under MIT license, http://github.com/requirejs/requirejs/LICENSE
*/
var requirejs,require,define;
(function(ga){function ka(b,c,d,g){return g||""}function K(b){return"[object Function]"===Q.call(b)}function L(b){return"[object Array]"===Q.call(b)}function y(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function X(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));--d);}}function x(b,c){return la.call(b,c)}function e(b,c){return x(b,c)&&b[c]}function D(b,c){for(var d in b)if(x(b,d)&&c(b[d],d))break}function Y(b,c,d,g){c&&D(c,function(c,e){if(d||!x(b,e))!g||"object"!==
typeof c||!c||L(c)||K(c)||c instanceof RegExp?b[e]=c:(b[e]||(b[e]={}),Y(b[e],c,d,g))});return b}function z(b,c){return function(){return c.apply(b,arguments)}}function ha(b){throw b;}function ia(b){if(!b)return b;var c=ga;y(b.split("."),function(b){c=c[b]});return c}function F(b,c,d,g){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=g;d&&(c.originalError=d);return c}function ma(b){function c(a,n,b){var h,k,f,c,d,l,g,r;n=n&&n.split("/");var q=p.map,m=q&&q["*"];
if(a){a=a.split("/");k=a.length-1;p.nodeIdCompat&&U.test(a[k])&&(a[k]=a[k].replace(U,""));"."===a[0].charAt(0)&&n&&(k=n.slice(0,n.length-1),a=k.concat(a));k=a;for(f=0;f<k.length;f++)c=k[f],"."===c?(k.splice(f,1),--f):".."===c&&0!==f&&(1!==f||".."!==k[2])&&".."!==k[f-1]&&0<f&&(k.splice(f-1,2),f-=2);a=a.join("/")}if(b&&q&&(n||m)){k=a.split("/");f=k.length;a:for(;0<f;--f){d=k.slice(0,f).join("/");if(n)for(c=n.length;0<c;--c)if(b=e(q,n.slice(0,c).join("/")))if(b=e(b,d)){h=b;l=f;break a}!g&&m&&e(m,d)&&
(g=e(m,d),r=f)}!h&&g&&(h=g,l=r);h&&(k.splice(0,l,h),a=k.join("/"))}return(h=e(p.pkgs,a))?h:a}function d(a){E&&y(document.getElementsByTagName("script"),function(n){if(n.getAttribute("data-requiremodule")===a&&n.getAttribute("data-requirecontext")===l.contextName)return n.parentNode.removeChild(n),!0})}function m(a){var n=e(p.paths,a);if(n&&L(n)&&1<n.length)return n.shift(),l.require.undef(a),l.makeRequire(null,{skipMap:!0})([a]),!0}function r(a){var n,b=a?a.indexOf("!"):-1;-1<b&&(n=a.substring(0,
b),a=a.substring(b+1,a.length));return[n,a]}function q(a,n,b,h){var k,f,d=null,g=n?n.name:null,p=a,q=!0,m="";a||(q=!1,a="_@r"+(Q+=1));a=r(a);d=a[0];a=a[1];d&&(d=c(d,g,h),f=e(v,d));a&&(d?m=f&&f.normalize?f.normalize(a,function(a){return c(a,g,h)}):-1===a.indexOf("!")?c(a,g,h):a:(m=c(a,g,h),a=r(m),d=a[0],m=a[1],b=!0,k=l.nameToUrl(m)));b=!d||f||b?"":"_unnormalized"+(T+=1);return{prefix:d,name:m,parentMap:n,unnormalized:!!b,url:k,originalName:p,isDefine:q,id:(d?d+"!"+m:m)+b}}function u(a){var b=a.id,
c=e(t,b);c||(c=t[b]=new l.Module(a));return c}function w(a,b,c){var h=a.id,k=e(t,h);if(!x(v,h)||k&&!k.defineEmitComplete)if(k=u(a),k.error&&"error"===b)c(k.error);else k.on(b,c);else"defined"===b&&c(v[h])}function A(a,b){var c=a.requireModules,h=!1;if(b)b(a);else if(y(c,function(b){if(b=e(t,b))b.error=a,b.events.error&&(h=!0,b.emit("error",a))}),!h)g.onError(a)}function B(){V.length&&(y(V,function(a){var b=a[0];"string"===typeof b&&(l.defQueueMap[b]=!0);G.push(a)}),V=[])}function C(a){delete t[a];
delete Z[a]}function J(a,b,c){var h=a.map.id;a.error?a.emit("error",a.error):(b[h]=!0,y(a.depMaps,function(h,f){var d=h.id,g=e(t,d);!g||a.depMatched[f]||c[d]||(e(b,d)?(a.defineDep(f,v[d]),a.check()):J(g,b,c))}),c[h]=!0)}function H(){var a,b,c=(a=1E3*p.waitSeconds)&&l.startTime+a<(new Date).getTime(),h=[],k=[],f=!1,g=!0;if(!aa){aa=!0;D(Z,function(a){var l=a.map,e=l.id;if(a.enabled&&(l.isDefine||k.push(a),!a.error))if(!a.inited&&c)m(e)?f=b=!0:(h.push(e),d(e));else if(!a.inited&&a.fetched&&l.isDefine&&
(f=!0,!l.prefix))return g=!1});if(c&&h.length)return a=F("timeout","Load timeout for modules: "+h,null,h),a.contextName=l.contextName,A(a);g&&y(k,function(a){J(a,{},{})});c&&!b||!f||!E&&!ja||ba||(ba=setTimeout(function(){ba=0;H()},50));aa=!1}}function I(a){x(v,a[0])||u(q(a[0],null,!0)).init(a[1],a[2])}function O(a){a=a.currentTarget||a.srcElement;var b=l.onScriptLoad;a.detachEvent&&!ca?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=l.onScriptError;a.detachEvent&&!ca||a.removeEventListener("error",
b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function P(){var a;for(B();G.length;){a=G.shift();if(null===a[0])return A(F("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));I(a)}l.defQueueMap={}}var aa,da,l,R,ba,p={waitSeconds:7,baseUrl:"./",paths:{},bundles:{},pkgs:{},shim:{},config:{}},t={},Z={},ea={},G=[],v={},W={},fa={},Q=1,T=1;R={require:function(a){return a.require?a.require:a.require=l.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?
v[a.map.id]=a.exports:a.exports=v[a.map.id]={}},module:function(a){return a.module?a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return e(p.config,a.map.id)||{}},exports:a.exports||(a.exports={})}}};da=function(a){this.events=e(ea,a.id)||{};this.map=a;this.shim=e(p.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};da.prototype={init:function(a,b,c,h){h=h||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&
(c=z(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=c;this.inited=!0;this.ignore=h.ignore;h.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,--this.depCount,this.depExports[a]=b)},fetch:function(){if(!this.fetched){this.fetched=!0;l.startTime=(new Date).getTime();var a=this.map;if(this.shim)l.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],z(this,function(){return a.prefix?this.callPlugin():
this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=this.map.url;W[a]||(W[a]=!0,l.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var h=this.exports,k=this.factory;if(!this.inited)x(l.defQueueMap,c)||this.fetch();else if(this.error)this.emit("error",this.error);else if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(K(k)){if(this.events.error&&this.map.isDefine||g.onError!==
ha)try{h=l.execCb(c,k,b,h)}catch(d){a=d}else h=l.execCb(c,k,b,h);this.map.isDefine&&void 0===h&&((b=this.module)?h=b.exports:this.usingExports&&(h=this.exports));if(a)return a.requireMap=this.map,a.requireModules=this.map.isDefine?[this.map.id]:null,a.requireType=this.map.isDefine?"define":"require",A(this.error=a)}else h=k;this.exports=h;if(this.map.isDefine&&!this.ignore&&(v[c]=h,g.onResourceLoad)){var f=[];y(this.depMaps,function(a){f.push(a.normalizedMap||a)});g.onResourceLoad(l,this.map,f)}C(c);
this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}},callPlugin:function(){var a=this.map,b=a.id,d=q(a.prefix);this.depMaps.push(d);w(d,"defined",z(this,function(h){var k,f,d=e(fa,this.map.id),M=this.map.name,r=this.map.parentMap?this.map.parentMap.name:null,m=l.makeRequire(a.parentMap,{enableBuildCallback:!0});if(this.map.unnormalized){if(h.normalize&&(M=h.normalize(M,function(a){return c(a,r,!0)})||
""),f=q(a.prefix+"!"+M,this.map.parentMap),w(f,"defined",z(this,function(a){this.map.normalizedMap=f;this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),h=e(t,f.id)){this.depMaps.push(f);if(this.events.error)h.on("error",z(this,function(a){this.emit("error",a)}));h.enable()}}else d?(this.map.url=l.nameToUrl(d),this.load()):(k=z(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),k.error=z(this,function(a){this.inited=!0;this.error=a;a.requireModules=[b];D(t,function(a){0===
a.map.id.indexOf(b+"_unnormalized")&&C(a.map.id)});A(a)}),k.fromText=z(this,function(h,c){var d=a.name,f=q(d),M=S;c&&(h=c);M&&(S=!1);u(f);x(p.config,b)&&(p.config[d]=p.config[b]);try{g.exec(h)}catch(e){return A(F("fromtexteval","fromText eval for "+b+" failed: "+e,e,[b]))}M&&(S=!0);this.depMaps.push(f);l.completeLoad(d);m([d],k)}),h.load(a.name,m,k,p))}));l.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){Z[this.map.id]=this;this.enabling=this.enabled=!0;y(this.depMaps,z(this,function(a,
b){var c,h;if("string"===typeof a){a=q(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=e(R,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;w(a,"defined",z(this,function(a){this.undefed||(this.defineDep(b,a),this.check())}));this.errback?w(a,"error",z(this,this.errback)):this.events.error&&w(a,"error",z(this,function(a){this.emit("error",a)}))}c=a.id;h=t[c];x(R,c)||!h||h.enabled||l.enable(a,this)}));D(this.pluginMaps,z(this,function(a){var b=e(t,a.id);
b&&!b.enabled&&l.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){y(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};l={config:p,contextName:b,registry:t,defined:v,urlFetched:W,defQueue:G,defQueueMap:{},Module:da,makeModuleMap:q,nextTick:g.nextTick,onError:A,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");if("string"===typeof a.urlArgs){var b=
a.urlArgs;a.urlArgs=function(a,c){return(-1===c.indexOf("?")?"?":"&")+b}}var c=p.shim,h={paths:!0,bundles:!0,config:!0,map:!0};D(a,function(a,b){h[b]?(p[b]||(p[b]={}),Y(p[b],a,!0,!0)):p[b]=a});a.bundles&&D(a.bundles,function(a,b){y(a,function(a){a!==b&&(fa[a]=b)})});a.shim&&(D(a.shim,function(a,b){L(a)&&(a={deps:a});!a.exports&&!a.init||a.exportsFn||(a.exportsFn=l.makeShimExports(a));c[b]=a}),p.shim=c);a.packages&&y(a.packages,function(a){var b;a="string"===typeof a?{name:a}:a;b=a.name;a.location&&
(p.paths[b]=a.location);p.pkgs[b]=a.name+"/"+(a.main||"main").replace(na,"").replace(U,"")});D(t,function(a,b){a.inited||a.map.unnormalized||(a.map=q(b,null,!0))});(a.deps||a.callback)&&l.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(ga,arguments));return b||a.exports&&ia(a.exports)}},makeRequire:function(a,n){function m(c,d,f){var e,r;n.enableBuildCallback&&d&&K(d)&&(d.__requireJsBuild=!0);if("string"===typeof c){if(K(d))return A(F("requireargs",
"Invalid require call"),f);if(a&&x(R,c))return R[c](t[a.id]);if(g.get)return g.get(l,c,a,m);e=q(c,a,!1,!0);e=e.id;return x(v,e)?v[e]:A(F("notloaded",'Module name "'+e+'" has not been loaded yet for context: '+b+(a?"":". Use require([])")))}P();l.nextTick(function(){P();r=u(q(null,a));r.skipMap=n.skipMap;r.init(c,d,f,{enabled:!0});H()});return m}n=n||{};Y(m,{isBrowser:E,toUrl:function(b){var d,f=b.lastIndexOf("."),g=b.split("/")[0];-1!==f&&("."!==g&&".."!==g||1<f)&&(d=b.substring(f,b.length),b=b.substring(0,
f));return l.nameToUrl(c(b,a&&a.id,!0),d,!0)},defined:function(b){return x(v,q(b,a,!1,!0).id)},specified:function(b){b=q(b,a,!1,!0).id;return x(v,b)||x(t,b)}});a||(m.undef=function(b){B();var c=q(b,a,!0),f=e(t,b);f.undefed=!0;d(b);delete v[b];delete W[c.url];delete ea[b];X(G,function(a,c){a[0]===b&&G.splice(c,1)});delete l.defQueueMap[b];f&&(f.events.defined&&(ea[b]=f.events),C(b))});return m},enable:function(a){e(t,a.id)&&u(a).enable()},completeLoad:function(a){var b,c,d=e(p.shim,a)||{},g=d.exports;
for(B();G.length;){c=G.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);I(c)}l.defQueueMap={};c=e(t,a);if(!b&&!x(v,a)&&c&&!c.inited)if(!p.enforceDefine||g&&ia(g))I([a,d.deps||[],d.exportsFn]);else return m(a)?void 0:A(F("nodefine","No define call for "+a,null,[a]));H()},nameToUrl:function(a,b,c){var d,k,f,m;(d=e(p.pkgs,a))&&(a=d);if(d=e(fa,a))return l.nameToUrl(d,b,c);if(g.jsExtRegExp.test(a))d=a+(b||"");else{d=p.paths;k=a.split("/");for(f=k.length;0<f;--f)if(m=k.slice(0,f).join("/"),
m=e(d,m)){L(m)&&(m=m[0]);k.splice(0,f,m);break}d=k.join("/");d+=b||(/^data\:|^blob\:|\?/.test(d)||c?"":".js");d=("/"===d.charAt(0)||d.match(/^[\w\+\.\-]+:/)?"":p.baseUrl)+d}return p.urlArgs&&!/^blob\:/.test(d)?d+p.urlArgs(a,d):d},load:function(a,b){g.load(l,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||oa.test((a.currentTarget||a.srcElement).readyState))N=null,a=O(a),l.completeLoad(a.id)},onScriptError:function(a){var b=O(a);if(!m(b.id)){var c=[];
D(t,function(a,d){0!==d.indexOf("_@r")&&y(a.depMaps,function(a){if(a.id===b.id)return c.push(d),!0})});return A(F("scripterror",'Script error for "'+b.id+(c.length?'", needed by: '+c.join(", "):'"'),a,[b.id]))}}};l.require=l.makeRequire();return l}function pa(){if(N&&"interactive"===N.readyState)return N;X(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return N=b});return N}var g,B,C,H,O,I,N,P,u,T,qa=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ra=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,
U=/\.js$/,na=/^\.\//;B=Object.prototype;var Q=B.toString,la=B.hasOwnProperty,E=!("undefined"===typeof window||"undefined"===typeof navigator||!window.document),ja=!E&&"undefined"!==typeof importScripts,oa=E&&"PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,ca="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),J={},w={},V=[],S=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(K(requirejs))return;w=requirejs;requirejs=void 0}"undefined"===typeof require||
K(require)||(w=require,require=void 0);g=requirejs=function(b,c,d,m){var r,q="_";L(b)||"string"===typeof b||(r=b,L(c)?(b=c,c=d,d=m):b=[]);r&&r.context&&(q=r.context);(m=e(J,q))||(m=J[q]=g.s.newContext(q));r&&m.configure(r);return m.require(b,c,d)};g.config=function(b){return g(b)};g.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=g);g.version="2.2.0";g.jsExtRegExp=/^\/|:|\?|\.js$/;g.isBrowser=E;B=g.s={contexts:J,newContext:ma};g({});y(["toUrl",
"undef","defined","specified"],function(b){g[b]=function(){var c=J._;return c.require[b].apply(c,arguments)}});E&&(C=B.head=document.getElementsByTagName("head")[0],H=document.getElementsByTagName("base")[0])&&(C=B.head=H.parentNode);g.onError=ha;g.createNode=function(b,c,d){c=b.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script");c.type=b.scriptType||"text/javascript";c.charset="utf-8";c.async=!0;return c};g.load=function(b,c,d){var m=b&&b.config||
{},e;if(E){e=g.createNode(m,c,d);e.setAttribute("data-requirecontext",b.contextName);e.setAttribute("data-requiremodule",c);!e.attachEvent||e.attachEvent.toString&&0>e.attachEvent.toString().indexOf("[native code")||ca?(e.addEventListener("load",b.onScriptLoad,!1),e.addEventListener("error",b.onScriptError,!1)):(S=!0,e.attachEvent("onreadystatechange",b.onScriptLoad));e.src=d;if(m.onNodeCreated)m.onNodeCreated(e,m,c,d);P=e;H?C.insertBefore(e,H):C.appendChild(e);P=null;return e}if(ja)try{setTimeout(function(){},
0),importScripts(d),b.completeLoad(c)}catch(q){b.onError(F("importscripts","importScripts failed for "+c+" at "+d,q,[c]))}};E&&!w.skipDataMain&&X(document.getElementsByTagName("script"),function(b){C||(C=b.parentNode);if(O=b.getAttribute("data-main"))return u=O,w.baseUrl||-1!==u.indexOf("!")||(I=u.split("/"),u=I.pop(),T=I.length?I.join("/")+"/":"./",w.baseUrl=T),u=u.replace(U,""),g.jsExtRegExp.test(u)&&(u=O),w.deps=w.deps?w.deps.concat(u):[u],!0});define=function(b,c,d){var e,g;"string"!==typeof b&&
(d=c,c=b,b=null);L(c)||(d=c,c=null);!c&&K(d)&&(c=[],d.length&&(d.toString().replace(qa,ka).replace(ra,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c)));S&&(e=P||pa())&&(b||(b=e.getAttribute("data-requiremodule")),g=J[e.getAttribute("data-requirecontext")]);g?(g.defQueue.push([b,c,d]),g.defQueueMap[b]=!0):V.push([b,c,d])};define.amd={jQuery:!0};g.exec=function(b){return eval(b)};g(w)}})(this);

View file

@ -0,0 +1,11 @@
# Browserify example
Two steps need to be done for this to work
In the project root
npm install
In this folder
../../node_modules/.bin/browserify main.js -o bundle.js

View file

@ -0,0 +1,209 @@
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>A date range picker for Bootstrap</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="../../daterangepicker.css" />
<style type="text/css">
.demo { position: relative; }
.demo i {
position: absolute; bottom: 10px; right: 24px; top: auto; cursor: pointer;
}
</style>
</head>
<body style="margin: 60px 0">
<div class="container">
<h1 style="margin: 0 0 20px 0">Configuration Builder</h1>
<div class="well configurator">
<form>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="parentEl">parentEl</label>
<input type="text" class="form-control" id="parentEl" value="" placeholder="body">
</div>
<div class="form-group">
<label for="startDate">startDate</label>
<input type="text" class="form-control" id="startDate" value="07/01/2015">
</div>
<div class="form-group">
<label for="endDate">endDate</label>
<input type="text" class="form-control" id="endDate" value="07/15/2015">
</div>
<div class="form-group">
<label for="minDate">minDate</label>
<input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
</div>
<div class="form-group">
<label for="maxDate">maxDate</label>
<input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" id="autoApply"> autoApply
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="singleDatePicker"> singleDatePicker
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showDropdowns"> showDropdowns
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showWeekNumbers"> showWeekNumbers
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePicker"> timePicker
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePicker24Hour"> timePicker24Hour
</label>
</div>
<div class="form-group">
<label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
<input type="text" class="form-control" id="timePickerIncrement" value="1">
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePickerSeconds"> timePickerSeconds
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="ranges"> ranges (with example predefined ranges)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="locale"> locale (with example settings)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="opens">opens</label>
<select id="opens" class="form-control">
<option value="right" selected>right</option>
<option value="left">left</option>
<option value="center">center</option>
</select>
</div>
<div class="form-group">
<label for="drops">drops</label>
<select id="drops" class="form-control">
<option value="down" selected>down</option>
<option value="up">up</option>
</select>
</div>
<div class="form-group">
<label for="buttonClasses">buttonClasses</label>
<input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
</div>
<div class="form-group">
<label for="applyClass">applyClass</label>
<input type="text" class="form-control" id="applyClass" value="btn-success">
</div>
<div class="form-group">
<label for="cancelClass">cancelClass</label>
<input type="text" class="form-control" id="cancelClass" value="btn-default">
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2 demo">
<h4>Your Date Range Picker</h4>
<input type="text" id="config-demo" class="form-control">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
</div>
<div class="col-md-6">
<h4>Configuration</h4>
<div class="well">
<textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

View file

@ -0,0 +1,135 @@
require('../../daterangepicker.js');
var $ = require('jquery'),
moment = require('moment');
$(document).ready(function() {
$('#config-text').keyup(function() {
eval($(this).val());
});
$('.configurator input, .configurator select').change(function() {
updateConfig();
});
$('.demo i').click(function() {
$(this).parent().find('input').click();
});
$('#startDate').daterangepicker({
singleDatePicker: true,
startDate: moment().subtract(6, 'days')
});
$('#endDate').daterangepicker({
singleDatePicker: true,
startDate: moment()
});
updateConfig();
function updateConfig() {
var options = {};
if ($('#singleDatePicker').is(':checked'))
options.singleDatePicker = true;
if ($('#showDropdowns').is(':checked'))
options.showDropdowns = true;
if ($('#showWeekNumbers').is(':checked'))
options.showWeekNumbers = true;
if ($('#showISOWeekNumbers').is(':checked'))
options.showISOWeekNumbers = true;
if ($('#timePicker').is(':checked'))
options.timePicker = true;
if ($('#timePicker24Hour').is(':checked'))
options.timePicker24Hour = true;
if ($('#timePickerIncrement').val().length && $('#timePickerIncrement').val() != 1)
options.timePickerIncrement = parseInt($('#timePickerIncrement').val(), 10);
if ($('#timePickerSeconds').is(':checked'))
options.timePickerSeconds = true;
if ($('#autoApply').is(':checked'))
options.autoApply = true;
if ($('#dateLimit').is(':checked'))
options.dateLimit = { days: 7 };
if ($('#ranges').is(':checked')) {
options.ranges = {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
};
}
if ($('#locale').is(':checked')) {
options.locale = {
format: 'MM/DD/YYYY HH:mm',
separator: ' - ',
applyLabel: 'Apply',
cancelLabel: 'Cancel',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
};
}
if (!$('#linkedCalendars').is(':checked'))
options.linkedCalendars = false;
if (!$('#autoUpdateInput').is(':checked'))
options.autoUpdateInput = false;
if ($('#alwaysShowCalendars').is(':checked'))
options.alwaysShowCalendars = true;
if ($('#parentEl').val().length)
options.parentEl = $('#parentEl').val();
if ($('#startDate').val().length)
options.startDate = $('#startDate').val();
if ($('#endDate').val().length)
options.endDate = $('#endDate').val();
if ($('#minDate').val().length)
options.minDate = $('#minDate').val();
if ($('#maxDate').val().length)
options.maxDate = $('#maxDate').val();
if ($('#opens').val().length && $('#opens').val() != 'right')
options.opens = $('#opens').val();
if ($('#drops').val().length && $('#drops').val() != 'down')
options.drops = $('#drops').val();
if ($('#buttonClasses').val().length && $('#buttonClasses').val() != 'btn btn-sm')
options.buttonClasses = $('#buttonClasses').val();
if ($('#applyClass').val().length && $('#applyClass').val() != 'btn-success')
options.applyClass = $('#applyClass').val();
if ($('#cancelClass').val().length && $('#cancelClass').val() != 'btn-default')
options.cancelClass = $('#cancelClass').val();
$('#config-text').val("$('#demo').daterangepicker(" + JSON.stringify(options, null, ' ') + ", function(start, end, label) {\n console.log(\"New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')\");\n});");
$('#config-demo').daterangepicker(options, function(start, end, label) { console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')'); });
}
});

View file

@ -0,0 +1,744 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Range Picker &mdash; JavaScript Date &amp; Time Picker Library</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.2.1/trianglify.min.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="daterangepicker.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<script src="website.js"></script>
<link rel="stylesheet" type="text/css" href="website.css" />
<meta name="google-site-verification" content="1fP-Eo9i1ozV4MUlqZv2vsLv1r7tvYutUb6i38v0_vg" />
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" style="padding: 0; justify-content: space-between">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item" style="padding-left: 0"><a class="nav-link" href="/" style="color: #eeeeee"><i class="fa fa-calendar"></i>&nbsp; Date Range Picker</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="https://www.improvely.com" style="color: #33beff"><i class="fa fa-chart-bar"></i>&nbsp; Improvely</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.w3counter.com" style="color: #ff9999"><i class="fa fa-chart-pie"></i>&nbsp; W3Counter</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.websitegoodies.com" style="color: #f49a16"><i class="fa fa-wrench"></i>&nbsp; Website Goodies</a></li>
</ul>
</div>
</nav>
<div id="jumbo">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<h1 style="margin: 0 0 10px 0">Date Range Picker</h1>
<p style="font-size: 18px; margin-bottom: 0">
A JavaScript component for choosing date ranges,
dates and times.
</p>
</div>
<div class="col-md-6 col-sm-12" style="text-align: right; padding-right: 0">
<div style="margin-bottom: 10px; margin-right: 15px">
<a href="https://github.com/dangrossman/daterangepicker" class="btn btn-light"><i class="fab fa-github-alt"></i>&nbsp; View on GitHub</a>
&nbsp;
<a href="https://github.com/dangrossman/daterangepicker/archive/master.zip" class="btn btn-success"><i class="fas fa-download"></i>&nbsp; Download ZIP</a>
</div>
<div style="margin-right: 0px">
<iframe src="https://ghbtns.com/github-btn.html?user=dangrossman&repo=daterangepicker&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=dangrossman&repo=daterangepicker&type=watch&count=true&size=large&v=2" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=dangrossman&repo=daterangepicker&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="padding: 0 30px" id="main">
<div class="row">
<div class="leftcol d-none d-lg-block d-xl-block">
<div id="menu" class="list-group" style="margin-bottom: 10px">
<a class="list-group-item" href="#usage">Getting Started</a>
<a class="list-group-item" href="#examples">Examples</a>
<a class="list-group-item" href="#options">Options, Methods &amp; Events</a>
<a class="list-group-item" href="#config">Configuration Generator</a>
<a class="list-group-item" href="#license">License &amp; Comments</a>
</div>
<div style="width: 300px; min-width: 300px">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- DRP Responsive -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-9095657276960731"
data-ad-slot="8963174596"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="rightcol">
<p>Originally created for reports at <a href="https://www.improvely.com">Improvely</a>, the Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates, times, or predefined ranges like "Last 30 Days".</p>
<a style="display: block; height: 300px; background: url('drp.png') top right no-repeat; background-size: cover; border: 1px solid #ccc; margin-bottom: 30px" href="https://awio.iljmp.com/5/drpdemo" title="Click for a Live Demo"></a>
<h1><a id="usage" href="#usage">Getting Started</a></h1>
<p>
To get started, include jQuery, Moment.js and Date Range Picker's files in your webpage:
</p>
<script src="https://gist.github.com/dangrossman/4879503153c6a7a0b3b6ebd64e0383b7.js"></script>
<p style="margin-bottom: 10px">
Then attach a date range picker to whatever you want to trigger it:
</p>
<div class="row">
<div class="col-8">
<label>Code:</label>
<script src="https://gist.github.com/dangrossman/f460cf1243d8ffb08c749730e89c2f3d.js"></script>
</div>
<div class="col-4">
<label>Produces:</label>
<input type="text" name="dates" class="form-control pull-right" />
<script>
$(function() {
$('input[name="dates"]').daterangepicker({ startDate: moment(), endDate: moment().add(2, 'day')});
})
</script>
</div>
</div>
<p>
You can customize Date Range Picker with options, and get notified when the user chooses new dates by providing a callback function.
</p>
<h1><a id="examples" href="#examples">Examples</a></h1>
<!-- Example 1 -->
<h2><a data-toggle="nothing" href="#example1">Simple Date Range Picker With a Callback</a></h2>
<div class="collapsable" id="example1">
<div class="row">
<div class="col-8">
<label>Code:</label>
<script src="https://gist.github.com/dangrossman/e118af4dbadc5177d7494dba9d3295d1.js"></script>
</div>
<div class="col-4">
<label>Produces:</label>
<input type="text" name="daterange" class="form-control" value="1/01/2018 - 01/15/2018" />
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
</div>
</div>
</div>
<!-- Example 2 -->
<h2><a data-toggle="nothing" href="#example2">Date Range Picker With Times</a></h2>
<div class="collapsable" id="example2">
<div class="row">
<div class="col-8">
<label>Code:</label>
<script src="https://gist.github.com/dangrossman/14db17599e24652db7401ed2448eb91a.js"></script>
</div>
<div class="col-4">
<label>Produces:</label>
<input type="text" name="datetimes" class="form-control pull-right" />
<script>
$(function() {
$('input[name="datetimes"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
</script>
</div>
</div>
</div>
<!-- Example 3 -->
<h2><a data-toggle="nothing" href="#example3">Single Date Picker</a></h2>
<div class="collapsable" id="example3">
<div class="row">
<div class="col-8">
<label>Code:</label>
<script src="https://gist.github.com/dangrossman/98d8f1c304328c191b1ad33ac21354fd.js"></script>
</div>
<div class="col-4">
<label>Produces:</label>
<input type="text" name="birthday" class="form-control pull-right" value="10/24/1984" />
<script>
$(function() {
$('input[name="birthday"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1901,
maxYear: parseInt(moment().format('YYYY'),10)
}, function(start, end, label) {
var years = moment().diff(start, 'years');
alert("You are " + years + " years old!");
});
});
</script>
</div>
</div>
</div>
<!-- Example 4 -->
<h2><a data-toggle="nothing" href="#example4">Predefined Date Ranges</a></h2>
<div class="collapsable" id="example4">
<div class="row">
<div class="col-8">
<label>Code:</label>
<script src="https://gist.github.com/dangrossman/8c6747b82572bc860364f17258004dbb.js"></script>
</div>
<div class="col-4">
<label>Produces:</label>
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>&nbsp;
<span></span> <i class="fa fa-caret-down"></i>
</div>
<script type="text/javascript">
$(function() {
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
cb(start, end);
});
</script>
</div>
</div>
</div>
<!-- Example 5 -->
<h2><a data-toggle="nothing" href="#example5">Input Initially Empty</a></h2>
<div class="collapsable" id="example5">
<div class="row">
<div class="col-8">
<label>Code:</label>
<script src="https://gist.github.com/dangrossman/d50376f3467f69e7fb5570afd07dc921.js"></script>
</div>
<div class="col-4">
<label>Produces:</label>
<input type="text" name="datefilter" class="form-control pull-right" value="" />
<script type="text/javascript">
$(function() {
$('input[name="datefilter"]').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});
</script>
</div>
</div>
</div>
<h1 style="margin-top: 30px"><a id="options" href="#options">Options</a></h1>
<ul class="nobullets">
<li>
<code>startDate</code> (Date or string) The beginning date of the initially selected date range. If you provide a string, it must match the date format string set in your <code>locale</code> setting.
</li>
<li>
<code>endDate</code>: (Date or string) The end date of the initially selected date range.
</li>
<li>
<code>minDate</code>: (Date or string) The earliest date a user may select.
</li>
<li>
<code>maxDate</code>: (Date or string) The latest date a user may select.
</li>
<li>
<code>maxSpan</code>: (object) The maximum span between the selected start and end dates. Check off <code>maxSpan</code> in the configuration generator for an example of how to use this. You can provide any object the <code>moment</code> library would let you add to a date.
</li>
<li>
<code>showDropdowns</code>: (true/false) Show year and month select boxes above calendars to jump to a specific month and year.
</li>
<li>
<code>minYear</code>: (number) The minimum year shown in the dropdowns when <code>showDropdowns</code> is set to true.
</li>
<li>
<code>maxYear</code>: (number) The maximum year shown in the dropdowns when <code>showDropdowns</code> is set to true.
</li>
<li>
<code>showWeekNumbers</code>: (true/false) Show localized week numbers at the start of each week on the calendars.
</li>
<li>
<code>showISOWeekNumbers</code>: (true/false) Show ISO week numbers at the start of each week on the calendars.
</li>
<li>
<code>timePicker</code>: (true/false) Adds select boxes to choose times in addition to dates.
</li>
<li>
<code>timePickerIncrement</code>: (number) Increment of the minutes selection list for times (i.e. 30 to allow only selection of times ending in 0 or 30).
</li>
<li>
<code>timePicker24Hour</code>: (true/false) Use 24-hour instead of 12-hour times, removing the AM/PM selection.
</li>
<li>
<code>timePickerSeconds</code>: (true/false) Show seconds in the timePicker.
</li>
<li>
<code>ranges</code>: (object) Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range. Click <code>ranges</code> in the configuration generator for examples.
</li>
<li>
<code>showCustomRangeLabel</code>: (true/false) Displays "Custom Range" at
the end of the list of predefined ranges, when the <code>ranges</code> option is used.
This option will be highlighted whenever the current date range selection does not match one of the predefined ranges. Clicking it will display the calendars to select a new range.
</li>
<li>
<code>alwaysShowCalendars</code>: (true/false) Normally, if you use the <code>ranges</code> option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks "Custom Range". When this option is set to true, the calendars for choosing a custom date range are always shown instead.
</li>
<li>
<code>opens</code>: ('left'/'right'/'center') Whether the picker appears aligned to the left, to the right, or centered under the HTML element it's attached to.
</li>
<li>
<code>drops</code>: ('down'/'up') Whether the picker appears below (default) or above the HTML element it's attached to.
</li>
<li>
<code>buttonClasses</code>: (string) CSS class names that will be added to both the apply and cancel buttons.
</li>
<li>
<code>applyButtonClasses</code>: (string) CSS class names that will be added only to the apply button.
</li>
<li>
<code>cancelButtonClasses</code>: (string) CSS class names that will be added only to the cancel button.
</li>
<li>
<code>locale</code>: (object) Allows you to provide localized strings for buttons and labels, customize the date format, and change the first day of week for the calendars.
Check off <code>locale</code> in the configuration generator to see how
to customize these options.
</li>
<li>
<code>singleDatePicker</code>: (true/false) Show only a single calendar to choose one date, instead of a range picker with two calendars. The start and end dates provided to your callback will be the same single date chosen.
</li>
<li>
<code>autoApply</code>: (true/false) Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates are clicked.
</li>
<li>
<code>linkedCalendars</code>: (true/false) When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars. When disabled, the two calendars can be individually advanced and display any month/year.
</li>
<li>
<code>isInvalidDate</code>: (function) A function that is passed each date in the two
calendars before they are displayed, and may return true or false to indicate whether
that date should be available for selection or not.
</li>
<li>
<code>isCustomDate</code>: (function) A function that is passed each date in the two
calendars before they are displayed, and may return a string or array of CSS class names
to apply to that date's calendar cell.
</li>
<li>
<code>autoUpdateInput</code>: (true/false) Indicates whether the date range picker should
automatically update the value of the <code>&lt;input&gt;</code> element it's attached to at initialization and when the selected dates change.
</li>
<li>
<code>parentEl</code>: (string) jQuery selector of the parent element that the date range picker will be added to, if not provided this will be 'body'
</li>
</ul>
<h1 style="margin-top: 30px"><a id="methods" href="#methods">Methods</a></h1>
<p>
You can programmatically update the <code>startDate</code> and <code>endDate</code>
in the picker using the <code>setStartDate</code> and <code>setEndDate</code> methods.
You can access the Date Range Picker object and its functions and properties through
data properties of the element you attached it to.
</p>
<script src="https://gist.github.com/dangrossman/8ff9b1220c9b5682e8bd.js"></script>
<br/>
<ul class="nobullets">
<li>
<code>setStartDate(Date or string)</code>: Sets the date range picker's currently selected start date to the provided date
</li>
<li>
<code>setEndDate(Date or string)</code>: Sets the date range picker's currently selected end date to the provided date
</li>
</ul>
<p style="margin: 0"><b>Example usage:</b></p>
<script src="https://gist.github.com/dangrossman/e1a8effbaeacb50a1e31.js"></script>
<h1 style="margin-top: 30px"><a id="events" href="#events">Events</a></h1>
<p>
Several events are triggered on the element you attach the picker to, which you can listen for.
</p>
<ul class="nobullets">
<li>
<code>show.daterangepicker</code>: Triggered when the picker is shown
</li>
<li>
<code>hide.daterangepicker</code>: Triggered when the picker is hidden
</li>
<li>
<code>showCalendar.daterangepicker</code>: Triggered when the calendar(s) are shown
</li>
<li>
<code>hideCalendar.daterangepicker</code>: Triggered when the calendar(s) are hidden
</li>
<li>
<code>apply.daterangepicker</code>: Triggered when the apply button is clicked,
or when a predefined range is clicked
</li>
<li>
<code>cancel.daterangepicker</code>: Triggered when the cancel button is clicked
</li>
</ul>
<p>
Some applications need a "clear" instead of a "cancel" functionality, which can be achieved by changing the button label and watching for the cancel event:
</p>
<script src="https://gist.github.com/dangrossman/1bea78da703f2896564d.js"></script>
<br/>
<p>
While passing in a callback to the constructor is the easiest way to listen for changes in the selected date range, you can also do something every time the apply button is clicked even if the selection hasn't changed:
</p>
<script src="https://gist.github.com/dangrossman/0c6c911fea1459b5fd13.js"></script>
<h1 style="margin-top: 30px"><a id="config" href="#config">Configuration Generator</a></h1>
<div class="well configurator">
<form>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="parentEl">parentEl</label>
<input type="text" class="form-control" id="parentEl" value="" placeholder="body">
</div>
<div class="form-group">
<label for="startDate">startDate</label>
<input type="text" class="form-control" id="startDate" value="07/01/2017">
</div>
<div class="form-group">
<label for="endDate">endDate</label>
<input type="text" class="form-control" id="endDate" value="07/15/2017">
</div>
<div class="form-group">
<label for="minDate">minDate</label>
<input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
</div>
<div class="form-group">
<label for="maxDate">maxDate</label>
<input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
</div>
<div class="form-group">
<label for="opens">opens</label>
<select id="opens" class="form-control">
<option value="right" selected>right</option>
<option value="left">left</option>
<option value="center">center</option>
</select>
</div>
<div class="form-group">
<label for="drops">drops</label>
<select id="drops" class="form-control">
<option value="down" selected>down</option>
<option value="up">up</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" id="showDropdowns"> showDropdowns
</label>
</div>
<div class="form-group">
<label for="minYear">minYear</label>
<input type="text" class="form-control" id="minYear" value="">
</div>
<div class="form-group">
<label for="maxYear">maxYear</label>
<input type="text" class="form-control" id="maxYear" value="">
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showWeekNumbers"> showWeekNumbers
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="singleDatePicker"> singleDatePicker
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePicker"> timePicker
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePicker24Hour"> timePicker24Hour
</label>
</div>
<div class="form-group">
<label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
<input type="text" class="form-control" id="timePickerIncrement" value="1">
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePickerSeconds"> timePickerSeconds
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="maxSpan"> maxSpan (example value)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="locale"> locale (example settings)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="autoApply"> autoApply
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="buttonClasses">buttonClasses</label>
<input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
</div>
<div class="form-group">
<label for="applyButtonClasses">applyButtonClasses</label>
<input type="text" class="form-control" id="applyButtonClasses" value="btn-primary">
</div>
<div class="form-group">
<label for="cancelButtonClasses">cancelButtonClasses</label>
<input type="text" class="form-control" id="cancelButtonClasses" value="btn-default">
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="ranges"> ranges (with example predefined ranges)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showCustomRangeLabel" checked="checked"> showCustomRangeLabel
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
</label>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-4 demo">
<div style="position: relative">
<h2 style="margin-bottom: 15px">Your Date Range Picker</h2>
<input type="text" id="config-demo" class="form-control">
</div>
</div>
<div class="col-8">
<h2 style="margin-bottom: 15px">Your Configuration to Copy</h2>
<div class="well">
<textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
</div>
</div>
</div>
<!-- License -->
<h1 style="margin-top: 30px"><a id="license" href="#license">License</a></h1>
<p>The MIT License (MIT)</p>
<p>Copyright (c) 2012-2018 <a href="http://www.dangrossman.info">Dan Grossman</a></p>
<p>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
</p>
<p>
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
</p>
<p>
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
</p>
<h1 style="margin-top: 30px"><a id="config" href="#comments">Comments</a></h1>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_url = 'http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/';
var disqus_identifier = '1045 http://www.dangrossman.info/?p=1045';
var disqus_container_id = 'disqus_thread';
var disqus_shortname = 'dangrossman';
var disqus_title = "A Date Range Picker for Bootstrap";
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</div>
</div>
<!-- Begin W3Counter Tracking Code -->
<script type="text/javascript" src="https://www.w3counter.com/tracker.js?id=90840"></script>
<!-- End W3Counter Tracking Code -->
<script type="text/javascript">
var im_domain = 'awio';
var im_project_id = 48;
(function(e,t){window._improvely=[];var n=e.getElementsByTagName("script")[0];var r=e.createElement("script");r.type="text/javascript";r.src="https://"+im_domain+".iljmp.com/improvely.js";r.async=true;n.parentNode.insertBefore(r,n);if(typeof t.init=="undefined"){t.init=function(e,t){window._improvely.push(["init",e,t])};t.goal=function(e){window._improvely.push(["goal",e])};t.conversion=function(e){window._improvely.push(["conversion",e])};t.label=function(e){window._improvely.push(["label",e])}}window.improvely=t;t.init(im_domain,im_project_id)})(document,window.improvely||[])
</script>
<div id="footer">
Copyright &copy; 2012-2019 <a href="http://www.dangrossman.info/">Dan Grossman</a>.
</div>
</body>
</html>

File diff suppressed because it is too large Load diff

8
plugins/daterangepicker/moment.min.js vendored Executable file → Normal file

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,17 @@
Package.describe({
name: 'dangrossman:bootstrap-daterangepicker',
version: '3.0.5',
summary: 'Date range picker component',
git: 'https://github.com/dangrossman/daterangepicker',
documentation: 'README.md'
});
Package.onUse(function(api) {
api.versionsFrom('METEOR@0.9.0.1');
api.use('momentjs:moment@2.22.1', ["client"]);
api.use('jquery@3.3.1', ["client"]);
api.addFiles('daterangepicker.js', ["client"]);
api.addFiles('daterangepicker.css', ["client"]);
});

View file

@ -0,0 +1,54 @@
{
"_from": "daterangepicker",
"_id": "daterangepicker@3.0.5",
"_inBundle": false,
"_integrity": "sha512-BoVV+OjVARWNE15iF+3Y2QIMioAD2UODHvJwIq+NtG0vxh61dXRmOMXlw2dsvxS8KY4n5uvIcBfIPiEiiGJcBg==",
"_location": "/daterangepicker",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "daterangepicker",
"name": "daterangepicker",
"escapedName": "daterangepicker",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/daterangepicker/-/daterangepicker-3.0.5.tgz",
"_shasum": "97180f233cf9c222cd0767b9c37c2926976d633a",
"_spec": "daterangepicker",
"_where": "/Users/rejack/Projekte/GitHub/REJack/AdminLTE",
"author": {
"name": "Dan Grossman",
"email": "dan@dangrossman.info",
"url": "http://www.dangrossman.info"
},
"bugs": {
"url": "https://github.com/dangrossman/daterangepicker/issues"
},
"bundleDependencies": false,
"dependencies": {
"jquery": ">=1.10",
"moment": "^2.9.0"
},
"deprecated": false,
"description": "Date range picker component for Bootstrap",
"homepage": "https://github.com/dangrossman/daterangepicker",
"license": "MIT",
"main": "daterangepicker.js",
"name": "daterangepicker",
"repository": {
"type": "git",
"url": "git+https://github.com/dangrossman/daterangepicker.git"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"style": "daterangepicker.css",
"version": "3.0.5"
}

View file

@ -0,0 +1,152 @@
body {
font-size: 15px;
line-height: 1.6em;
position: relative;
margin: 0;
}
.navbar .nav-item {
padding: 8px 0 8px 20px;
}
.navbar .nav-link {
font-weight: bold;
font-size: 14px;
padding: 0;
}
.navbar-expand-sm .navbar-nav .nav-link {
padding: 0;
}
.well {
background: #f5f5f5;
border-radius: 4px;
padding: 20px;
}
h1 {
font-size: 20px;
margin-bottom: 1em;
padding-bottom: 5px;
border-bottom: 1px dotted #08c;
}
h1:before {
content: '#';
color: #666;
position: relative;
padding-right: 5px;
}
h2 {
padding: 0;
margin: 20px 0 0 0;
font-size: 18px;
}
h2 a {
color: #444;
display: block;
background: #eee;
padding: 8px 12px;
margin-bottom: 0;
cursor: default;
text-decoration: none;
}
input.form-control {
font-size: 14px;
}
.collapsable {
border: 1px solid #eee;
padding: 12px;
display: block;
}
label {
font-size: 13px;
font-weight: bold;
}
.gist {
overflow: auto;
}
.gist .blob-wrapper.data {
max-height: 350px;
overflow: auto;
}
.list-group-item {
padding: 4px 0;
border: 0;
font-size: 16px;
}
.leftcol {
position: absolute;
top: 180px;
}
.rightcol {
max-width: 950px;
}
.container {
max-width: 1300px;
}
@media (min-width: 980px) {
.rightcol {
margin-left: 320px;
}
}
p, pre {
margin-bottom: 2em;
}
ul.nobullets {
margin: 0;
padding: 0;
list-style: none;
}
ul.nobullets li {
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: 1px dotted #ddd;
}
input[type="text"] {
padding: 6px;
width: 100%;
border-radius: 4px;
}
#footer {
background: #222;
margin-top: 80px;
padding: 10px;
color: #fff;
text-align: center;
}
#footer a:link, #footer a:visited {
color: #fff;
border-bottom: 1px dotted #fff;
}
#jumbo {
background: #c1deef;
color: #000;
padding: 20px 0;
margin-bottom: 20px;
}
#jumbo h1 {
font-size: 28px;
}
#jumbo .btn {
border-radius: 0;
font-size: 16px;
}

View file

@ -0,0 +1,179 @@
$(document).ready(function() {
$('#config-text').keyup(function() {
eval($(this).val());
});
$('.configurator input, .configurator select').change(function() {
updateConfig();
});
$('.demo i').click(function() {
$(this).parent().find('input').click();
});
$('#startDate').daterangepicker({
singleDatePicker: true,
startDate: moment().subtract(6, 'days')
});
$('#endDate').daterangepicker({
singleDatePicker: true,
startDate: moment()
});
//updateConfig();
function updateConfig() {
var options = {};
if ($('#singleDatePicker').is(':checked'))
options.singleDatePicker = true;
if ($('#showDropdowns').is(':checked'))
options.showDropdowns = true;
if ($('#minYear').val().length && $('#minYear').val() != 1)
options.minYear = parseInt($('#minYear').val(), 10);
if ($('#maxYear').val().length && $('#maxYear').val() != 1)
options.maxYear = parseInt($('#maxYear').val(), 10);
if ($('#showWeekNumbers').is(':checked'))
options.showWeekNumbers = true;
if ($('#showISOWeekNumbers').is(':checked'))
options.showISOWeekNumbers = true;
if ($('#timePicker').is(':checked'))
options.timePicker = true;
if ($('#timePicker24Hour').is(':checked'))
options.timePicker24Hour = true;
if ($('#timePickerIncrement').val().length && $('#timePickerIncrement').val() != 1)
options.timePickerIncrement = parseInt($('#timePickerIncrement').val(), 10);
if ($('#timePickerSeconds').is(':checked'))
options.timePickerSeconds = true;
if ($('#autoApply').is(':checked'))
options.autoApply = true;
if ($('#maxSpan').is(':checked'))
options.maxSpan = { days: 7 };
if ($('#ranges').is(':checked')) {
options.ranges = {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
};
}
if ($('#locale').is(':checked')) {
options.locale = {
format: 'MM/DD/YYYY',
separator: ' - ',
applyLabel: 'Apply',
cancelLabel: 'Cancel',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
weekLabel: 'W',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
};
}
if (!$('#linkedCalendars').is(':checked'))
options.linkedCalendars = false;
if (!$('#autoUpdateInput').is(':checked'))
options.autoUpdateInput = false;
if (!$('#showCustomRangeLabel').is(':checked'))
options.showCustomRangeLabel = false;
if ($('#alwaysShowCalendars').is(':checked'))
options.alwaysShowCalendars = true;
if ($('#parentEl').val().length)
options.parentEl = $('#parentEl').val();
if ($('#startDate').val().length)
options.startDate = $('#startDate').val();
if ($('#endDate').val().length)
options.endDate = $('#endDate').val();
if ($('#minDate').val().length)
options.minDate = $('#minDate').val();
if ($('#maxDate').val().length)
options.maxDate = $('#maxDate').val();
if ($('#opens').val().length && $('#opens').val() != 'right')
options.opens = $('#opens').val();
if ($('#drops').val().length && $('#drops').val() != 'down')
options.drops = $('#drops').val();
if ($('#buttonClasses').val().length && $('#buttonClasses').val() != 'btn btn-sm')
options.buttonClasses = $('#buttonClasses').val();
if ($('#applyButtonClasses').val().length && $('#applyButtonClasses').val() != 'btn-primary')
options.applyButtonClasses = $('#applyButtonClasses').val();
if ($('#cancelButtonClasses').val().length && $('#cancelButtonClasses').val() != 'btn-default')
options.cancelClass = $('#cancelButtonClasses').val();
$('#config-demo').daterangepicker(options, function(start, end, label) { console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')'); });
if (typeof options.ranges !== 'undefined') {
options.ranges = {};
}
var option_text = JSON.stringify(options, null, ' ');
var replacement = "ranges: {\n"
+ " 'Today': [moment(), moment()],\n"
+ " 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],\n"
+ " 'Last 7 Days': [moment().subtract(6, 'days'), moment()],\n"
+ " 'Last 30 Days': [moment().subtract(29, 'days'), moment()],\n"
+ " 'This Month': [moment().startOf('month'), moment().endOf('month')],\n"
+ " 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]\n"
+ " }";
option_text = option_text.replace(new RegExp('"ranges"\: \{\}', 'g'), replacement);
$('#config-text').val("$('#demo').daterangepicker(" + option_text + ", function(start, end, label) {\n console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');\n});");
}
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if (scroll > 180) {
$('.leftcol').css('position', 'fixed');
$('.leftcol').css('top', '10px');
} else {
$('.leftcol').css('position', 'absolute');
$('.leftcol').css('top', '180px');
}
});
var bg = new Trianglify({
x_colors: ["#e1f3fd", "#eeeeee", "#407dbf"],
y_colors: 'match_x',
width: document.body.clientWidth,
height: 150,
stroke_width: 0,
cell_size: 20
});
$('#jumbo').css('background-image', 'url(' + bg.png() + ')');
});

View file

@ -0,0 +1,744 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Range Picker &mdash; JavaScript Date &amp; Time Picker Library</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.2.1/trianglify.min.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="daterangepicker.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<script src="website.js"></script>
<link rel="stylesheet" type="text/css" href="website.css" />
<meta name="google-site-verification" content="1fP-Eo9i1ozV4MUlqZv2vsLv1r7tvYutUb6i38v0_vg" />
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" style="padding: 0; justify-content: space-between">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item" style="padding-left: 0"><a class="nav-link" href="/" style="color: #eeeeee"><i class="fa fa-calendar"></i>&nbsp; Date Range Picker</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="https://www.improvely.com" style="color: #33beff"><i class="fa fa-chart-bar"></i>&nbsp; Improvely</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.w3counter.com" style="color: #ff9999"><i class="fa fa-chart-pie"></i>&nbsp; W3Counter</a></li>
<li class="nav-item"><a class="nav-link" href="https://www.websitegoodies.com" style="color: #f49a16"><i class="fa fa-wrench"></i>&nbsp; Website Goodies</a></li>
</ul>
</div>
</nav>
<div id="jumbo">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">
<h1 style="margin: 0 0 10px 0">Date Range Picker</h1>
<p style="font-size: 18px; margin-bottom: 0">
A JavaScript component for choosing date ranges,
dates and times.
</p>
</div>
<div class="col-md-6 col-sm-12" style="text-align: right; padding-right: 0">
<div style="margin-bottom: 10px; margin-right: 15px">
<a href="https://github.com/dangrossman/daterangepicker" class="btn btn-light"><i class="fab fa-github-alt"></i>&nbsp; View on GitHub</a>
&nbsp;
<a href="https://github.com/dangrossman/daterangepicker/archive/master.zip" class="btn btn-success"><i class="fas fa-download"></i>&nbsp; Download ZIP</a>
</div>
<div style="margin-right: 0px">
<iframe src="https://ghbtns.com/github-btn.html?user=dangrossman&repo=daterangepicker&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=dangrossman&repo=daterangepicker&type=watch&count=true&size=large&v=2" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=dangrossman&repo=daterangepicker&type=fork&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="container" style="padding: 0 30px" id="main">
<div class="row">
<div class="leftcol d-none d-lg-block d-xl-block">
<div id="menu" class="list-group" style="margin-bottom: 10px">
<a class="list-group-item" href="#usage">Getting Started</a>
<a class="list-group-item" href="#examples">Examples</a>
<a class="list-group-item" href="#options">Options, Methods &amp; Events</a>
<a class="list-group-item" href="#config">Configuration Generator</a>
<a class="list-group-item" href="#license">License &amp; Comments</a>
</div>
<div style="width: 300px; min-width: 300px">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- DRP Responsive -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-9095657276960731"
data-ad-slot="8963174596"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>
<div class="rightcol">
<p>Originally created for reports at <a href="https://www.improvely.com">Improvely</a>, the Date Range Picker can be attached to any webpage element to pop up two calendars for selecting dates, times, or predefined ranges like "Last 30 Days".</p>
<a style="display: block; height: 300px; background: url('drp.png') top right no-repeat; background-size: cover; border: 1px solid #ccc; margin-bottom: 30px" href="https://awio.iljmp.com/5/drpdemo" title="Click for a Live Demo"></a>
<h1><a id="usage" href="#usage">Getting Started</a></h1>
<p>
To get started, include jQuery, Moment.js and Date Range Picker's files in your webpage:
</p>
<script src="https://gist.github.com/dangrossman/4879503153c6a7a0b3b6ebd64e0383b7.js"></script>
<p style="margin-bottom: 10px">
Then attach a date range picker to whatever you want to trigger it:
</p>
<div class="row">
<div class="col-8">
<label>Code:</label>
<script src="https://gist.github.com/dangrossman/f460cf1243d8ffb08c749730e89c2f3d.js"></script>
</div>
<div class="col-4">
<label>Produces:</label>
<input type="text" name="dates" class="form-control pull-right" />
<script>
$(function() {
$('input[name="dates"]').daterangepicker({ startDate: moment(), endDate: moment().add(2, 'day')});
})
</script>
</div>
</div>
<p>
You can customize Date Range Picker with options, and get notified when the user chooses new dates by providing a callback function.
</p>
<h1><a id="examples" href="#examples">Examples</a></h1>
<!-- Example 1 -->
<h2><a data-toggle="nothing" href="#example1">Simple Date Range Picker With a Callback</a></h2>
<div class="collapsable" id="example1">
<div class="row">
<div class="col-8">
<label>Code:</label>
<script src="https://gist.github.com/dangrossman/e118af4dbadc5177d7494dba9d3295d1.js"></script>
</div>
<div class="col-4">
<label>Produces:</label>
<input type="text" name="daterange" class="form-control" value="1/01/2018 - 01/15/2018" />
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
</div>
</div>
</div>
<!-- Example 2 -->
<h2><a data-toggle="nothing" href="#example2">Date Range Picker With Times</a></h2>
<div class="collapsable" id="example2">
<div class="row">
<div class="col-8">
<label>Code:</label>
<script src="https://gist.github.com/dangrossman/14db17599e24652db7401ed2448eb91a.js"></script>
</div>
<div class="col-4">
<label>Produces:</label>
<input type="text" name="datetimes" class="form-control pull-right" />
<script>
$(function() {
$('input[name="datetimes"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
});
</script>
</div>
</div>
</div>
<!-- Example 3 -->
<h2><a data-toggle="nothing" href="#example3">Single Date Picker</a></h2>
<div class="collapsable" id="example3">
<div class="row">
<div class="col-8">
<label>Code:</label>
<script src="https://gist.github.com/dangrossman/98d8f1c304328c191b1ad33ac21354fd.js"></script>
</div>
<div class="col-4">
<label>Produces:</label>
<input type="text" name="birthday" class="form-control pull-right" value="10/24/1984" />
<script>
$(function() {
$('input[name="birthday"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
minYear: 1901,
maxYear: parseInt(moment().format('YYYY'),10)
}, function(start, end, label) {
var years = moment().diff(start, 'years');
alert("You are " + years + " years old!");
});
});
</script>
</div>
</div>
</div>
<!-- Example 4 -->
<h2><a data-toggle="nothing" href="#example4">Predefined Date Ranges</a></h2>
<div class="collapsable" id="example4">
<div class="row">
<div class="col-8">
<label>Code:</label>
<script src="https://gist.github.com/dangrossman/8c6747b82572bc860364f17258004dbb.js"></script>
</div>
<div class="col-4">
<label>Produces:</label>
<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>&nbsp;
<span></span> <i class="fa fa-caret-down"></i>
</div>
<script type="text/javascript">
$(function() {
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
cb(start, end);
});
</script>
</div>
</div>
</div>
<!-- Example 5 -->
<h2><a data-toggle="nothing" href="#example5">Input Initially Empty</a></h2>
<div class="collapsable" id="example5">
<div class="row">
<div class="col-8">
<label>Code:</label>
<script src="https://gist.github.com/dangrossman/d50376f3467f69e7fb5570afd07dc921.js"></script>
</div>
<div class="col-4">
<label>Produces:</label>
<input type="text" name="datefilter" class="form-control pull-right" value="" />
<script type="text/javascript">
$(function() {
$('input[name="datefilter"]').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});
</script>
</div>
</div>
</div>
<h1 style="margin-top: 30px"><a id="options" href="#options">Options</a></h1>
<ul class="nobullets">
<li>
<code>startDate</code> (Date or string) The beginning date of the initially selected date range. If you provide a string, it must match the date format string set in your <code>locale</code> setting.
</li>
<li>
<code>endDate</code>: (Date or string) The end date of the initially selected date range.
</li>
<li>
<code>minDate</code>: (Date or string) The earliest date a user may select.
</li>
<li>
<code>maxDate</code>: (Date or string) The latest date a user may select.
</li>
<li>
<code>maxSpan</code>: (object) The maximum span between the selected start and end dates. Check off <code>maxSpan</code> in the configuration generator for an example of how to use this. You can provide any object the <code>moment</code> library would let you add to a date.
</li>
<li>
<code>showDropdowns</code>: (true/false) Show year and month select boxes above calendars to jump to a specific month and year.
</li>
<li>
<code>minYear</code>: (number) The minimum year shown in the dropdowns when <code>showDropdowns</code> is set to true.
</li>
<li>
<code>maxYear</code>: (number) The maximum year shown in the dropdowns when <code>showDropdowns</code> is set to true.
</li>
<li>
<code>showWeekNumbers</code>: (true/false) Show localized week numbers at the start of each week on the calendars.
</li>
<li>
<code>showISOWeekNumbers</code>: (true/false) Show ISO week numbers at the start of each week on the calendars.
</li>
<li>
<code>timePicker</code>: (true/false) Adds select boxes to choose times in addition to dates.
</li>
<li>
<code>timePickerIncrement</code>: (number) Increment of the minutes selection list for times (i.e. 30 to allow only selection of times ending in 0 or 30).
</li>
<li>
<code>timePicker24Hour</code>: (true/false) Use 24-hour instead of 12-hour times, removing the AM/PM selection.
</li>
<li>
<code>timePickerSeconds</code>: (true/false) Show seconds in the timePicker.
</li>
<li>
<code>ranges</code>: (object) Set predefined date ranges the user can select from. Each key is the label for the range, and its value an array with two dates representing the bounds of the range. Click <code>ranges</code> in the configuration generator for examples.
</li>
<li>
<code>showCustomRangeLabel</code>: (true/false) Displays "Custom Range" at
the end of the list of predefined ranges, when the <code>ranges</code> option is used.
This option will be highlighted whenever the current date range selection does not match one of the predefined ranges. Clicking it will display the calendars to select a new range.
</li>
<li>
<code>alwaysShowCalendars</code>: (true/false) Normally, if you use the <code>ranges</code> option to specify pre-defined date ranges, calendars for choosing a custom date range are not shown until the user clicks "Custom Range". When this option is set to true, the calendars for choosing a custom date range are always shown instead.
</li>
<li>
<code>opens</code>: ('left'/'right'/'center') Whether the picker appears aligned to the left, to the right, or centered under the HTML element it's attached to.
</li>
<li>
<code>drops</code>: ('down'/'up') Whether the picker appears below (default) or above the HTML element it's attached to.
</li>
<li>
<code>buttonClasses</code>: (string) CSS class names that will be added to both the apply and cancel buttons.
</li>
<li>
<code>applyButtonClasses</code>: (string) CSS class names that will be added only to the apply button.
</li>
<li>
<code>cancelButtonClasses</code>: (string) CSS class names that will be added only to the cancel button.
</li>
<li>
<code>locale</code>: (object) Allows you to provide localized strings for buttons and labels, customize the date format, and change the first day of week for the calendars.
Check off <code>locale</code> in the configuration generator to see how
to customize these options.
</li>
<li>
<code>singleDatePicker</code>: (true/false) Show only a single calendar to choose one date, instead of a range picker with two calendars. The start and end dates provided to your callback will be the same single date chosen.
</li>
<li>
<code>autoApply</code>: (true/false) Hide the apply and cancel buttons, and automatically apply a new date range as soon as two dates are clicked.
</li>
<li>
<code>linkedCalendars</code>: (true/false) When enabled, the two calendars displayed will always be for two sequential months (i.e. January and February), and both will be advanced when clicking the left or right arrows above the calendars. When disabled, the two calendars can be individually advanced and display any month/year.
</li>
<li>
<code>isInvalidDate</code>: (function) A function that is passed each date in the two
calendars before they are displayed, and may return true or false to indicate whether
that date should be available for selection or not.
</li>
<li>
<code>isCustomDate</code>: (function) A function that is passed each date in the two
calendars before they are displayed, and may return a string or array of CSS class names
to apply to that date's calendar cell.
</li>
<li>
<code>autoUpdateInput</code>: (true/false) Indicates whether the date range picker should
automatically update the value of the <code>&lt;input&gt;</code> element it's attached to at initialization and when the selected dates change.
</li>
<li>
<code>parentEl</code>: (string) jQuery selector of the parent element that the date range picker will be added to, if not provided this will be 'body'
</li>
</ul>
<h1 style="margin-top: 30px"><a id="methods" href="#methods">Methods</a></h1>
<p>
You can programmatically update the <code>startDate</code> and <code>endDate</code>
in the picker using the <code>setStartDate</code> and <code>setEndDate</code> methods.
You can access the Date Range Picker object and its functions and properties through
data properties of the element you attached it to.
</p>
<script src="https://gist.github.com/dangrossman/8ff9b1220c9b5682e8bd.js"></script>
<br/>
<ul class="nobullets">
<li>
<code>setStartDate(Date or string)</code>: Sets the date range picker's currently selected start date to the provided date
</li>
<li>
<code>setEndDate(Date or string)</code>: Sets the date range picker's currently selected end date to the provided date
</li>
</ul>
<p style="margin: 0"><b>Example usage:</b></p>
<script src="https://gist.github.com/dangrossman/e1a8effbaeacb50a1e31.js"></script>
<h1 style="margin-top: 30px"><a id="events" href="#events">Events</a></h1>
<p>
Several events are triggered on the element you attach the picker to, which you can listen for.
</p>
<ul class="nobullets">
<li>
<code>show.daterangepicker</code>: Triggered when the picker is shown
</li>
<li>
<code>hide.daterangepicker</code>: Triggered when the picker is hidden
</li>
<li>
<code>showCalendar.daterangepicker</code>: Triggered when the calendar(s) are shown
</li>
<li>
<code>hideCalendar.daterangepicker</code>: Triggered when the calendar(s) are hidden
</li>
<li>
<code>apply.daterangepicker</code>: Triggered when the apply button is clicked,
or when a predefined range is clicked
</li>
<li>
<code>cancel.daterangepicker</code>: Triggered when the cancel button is clicked
</li>
</ul>
<p>
Some applications need a "clear" instead of a "cancel" functionality, which can be achieved by changing the button label and watching for the cancel event:
</p>
<script src="https://gist.github.com/dangrossman/1bea78da703f2896564d.js"></script>
<br/>
<p>
While passing in a callback to the constructor is the easiest way to listen for changes in the selected date range, you can also do something every time the apply button is clicked even if the selection hasn't changed:
</p>
<script src="https://gist.github.com/dangrossman/0c6c911fea1459b5fd13.js"></script>
<h1 style="margin-top: 30px"><a id="config" href="#config">Configuration Generator</a></h1>
<div class="well configurator">
<form>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="parentEl">parentEl</label>
<input type="text" class="form-control" id="parentEl" value="" placeholder="body">
</div>
<div class="form-group">
<label for="startDate">startDate</label>
<input type="text" class="form-control" id="startDate" value="07/01/2017">
</div>
<div class="form-group">
<label for="endDate">endDate</label>
<input type="text" class="form-control" id="endDate" value="07/15/2017">
</div>
<div class="form-group">
<label for="minDate">minDate</label>
<input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
</div>
<div class="form-group">
<label for="maxDate">maxDate</label>
<input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
</div>
<div class="form-group">
<label for="opens">opens</label>
<select id="opens" class="form-control">
<option value="right" selected>right</option>
<option value="left">left</option>
<option value="center">center</option>
</select>
</div>
<div class="form-group">
<label for="drops">drops</label>
<select id="drops" class="form-control">
<option value="down" selected>down</option>
<option value="up">up</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="checkbox" id="showDropdowns"> showDropdowns
</label>
</div>
<div class="form-group">
<label for="minYear">minYear</label>
<input type="text" class="form-control" id="minYear" value="">
</div>
<div class="form-group">
<label for="maxYear">maxYear</label>
<input type="text" class="form-control" id="maxYear" value="">
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showWeekNumbers"> showWeekNumbers
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="singleDatePicker"> singleDatePicker
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePicker"> timePicker
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePicker24Hour"> timePicker24Hour
</label>
</div>
<div class="form-group">
<label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
<input type="text" class="form-control" id="timePickerIncrement" value="1">
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="timePickerSeconds"> timePickerSeconds
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="maxSpan"> maxSpan (example value)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="locale"> locale (example settings)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="autoApply"> autoApply
</label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="buttonClasses">buttonClasses</label>
<input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
</div>
<div class="form-group">
<label for="applyButtonClasses">applyButtonClasses</label>
<input type="text" class="form-control" id="applyButtonClasses" value="btn-primary">
</div>
<div class="form-group">
<label for="cancelButtonClasses">cancelButtonClasses</label>
<input type="text" class="form-control" id="cancelButtonClasses" value="btn-default">
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="ranges"> ranges (with example predefined ranges)
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="showCustomRangeLabel" checked="checked"> showCustomRangeLabel
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
</label>
</div>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-4 demo">
<div style="position: relative">
<h2 style="margin-bottom: 15px">Your Date Range Picker</h2>
<input type="text" id="config-demo" class="form-control">
</div>
</div>
<div class="col-8">
<h2 style="margin-bottom: 15px">Your Configuration to Copy</h2>
<div class="well">
<textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
</div>
</div>
</div>
<!-- License -->
<h1 style="margin-top: 30px"><a id="license" href="#license">License</a></h1>
<p>The MIT License (MIT)</p>
<p>Copyright (c) 2012-2019 <a href="http://www.dangrossman.info">Dan Grossman</a></p>
<p>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
</p>
<p>
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
</p>
<p>
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
</p>
<h1 style="margin-top: 30px"><a id="config" href="#comments">Comments</a></h1>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_url = 'http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/';
var disqus_identifier = '1045 http://www.dangrossman.info/?p=1045';
var disqus_container_id = 'disqus_thread';
var disqus_shortname = 'dangrossman';
var disqus_title = "A Date Range Picker for Bootstrap";
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</div>
</div>
<!-- Begin W3Counter Tracking Code -->
<script type="text/javascript" src="https://www.w3counter.com/tracker.js?id=90840"></script>
<!-- End W3Counter Tracking Code -->
<script type="text/javascript">
var im_domain = 'awio';
var im_project_id = 48;
(function(e,t){window._improvely=[];var n=e.getElementsByTagName("script")[0];var r=e.createElement("script");r.type="text/javascript";r.src="https://"+im_domain+".iljmp.com/improvely.js";r.async=true;n.parentNode.insertBefore(r,n);if(typeof t.init=="undefined"){t.init=function(e,t){window._improvely.push(["init",e,t])};t.goal=function(e){window._improvely.push(["goal",e])};t.conversion=function(e){window._improvely.push(["conversion",e])};t.label=function(e){window._improvely.push(["label",e])}}window.improvely=t;t.init(im_domain,im_project_id)})(document,window.improvely||[])
</script>
<div id="footer">
Copyright &copy; 2012-2018 <a href="http://www.dangrossman.info/">Dan Grossman</a>.
</div>
</body>
</html>

View file

@ -0,0 +1,152 @@
body {
font-size: 15px;
line-height: 1.6em;
position: relative;
margin: 0;
}
.navbar .nav-item {
padding: 8px 0 8px 20px;
}
.navbar .nav-link {
font-weight: bold;
font-size: 14px;
padding: 0;
}
.navbar-expand-sm .navbar-nav .nav-link {
padding: 0;
}
.well {
background: #f5f5f5;
border-radius: 4px;
padding: 20px;
}
h1 {
font-size: 20px;
margin-bottom: 1em;
padding-bottom: 5px;
border-bottom: 1px dotted #08c;
}
h1:before {
content: '#';
color: #666;
position: relative;
padding-right: 5px;
}
h2 {
padding: 0;
margin: 20px 0 0 0;
font-size: 18px;
}
h2 a {
color: #444;
display: block;
background: #eee;
padding: 8px 12px;
margin-bottom: 0;
cursor: default;
text-decoration: none;
}
input.form-control {
font-size: 14px;
}
.collapsable {
border: 1px solid #eee;
padding: 12px;
display: block;
}
label {
font-size: 13px;
font-weight: bold;
}
.gist {
overflow: auto;
}
.gist .blob-wrapper.data {
max-height: 350px;
overflow: auto;
}
.list-group-item {
padding: 4px 0;
border: 0;
font-size: 16px;
}
.leftcol {
position: absolute;
top: 180px;
}
.rightcol {
max-width: 950px;
}
.container {
max-width: 1300px;
}
@media (min-width: 980px) {
.rightcol {
margin-left: 320px;
}
}
p, pre {
margin-bottom: 2em;
}
ul.nobullets {
margin: 0;
padding: 0;
list-style: none;
}
ul.nobullets li {
padding-bottom: 1em;
margin-bottom: 1em;
border-bottom: 1px dotted #ddd;
}
input[type="text"] {
padding: 6px;
width: 100%;
border-radius: 4px;
}
#footer {
background: #222;
margin-top: 80px;
padding: 10px;
color: #fff;
text-align: center;
}
#footer a:link, #footer a:visited {
color: #fff;
border-bottom: 1px dotted #fff;
}
#jumbo {
background: #c1deef;
color: #000;
padding: 20px 0;
margin-bottom: 20px;
}
#jumbo h1 {
font-size: 28px;
}
#jumbo .btn {
border-radius: 0;
font-size: 16px;
}

View file

@ -0,0 +1,179 @@
$(document).ready(function() {
$('#config-text').keyup(function() {
eval($(this).val());
});
$('.configurator input, .configurator select').change(function() {
updateConfig();
});
$('.demo i').click(function() {
$(this).parent().find('input').click();
});
$('#startDate').daterangepicker({
singleDatePicker: true,
startDate: moment().subtract(6, 'days')
});
$('#endDate').daterangepicker({
singleDatePicker: true,
startDate: moment()
});
//updateConfig();
function updateConfig() {
var options = {};
if ($('#singleDatePicker').is(':checked'))
options.singleDatePicker = true;
if ($('#showDropdowns').is(':checked'))
options.showDropdowns = true;
if ($('#minYear').val().length && $('#minYear').val() != 1)
options.minYear = parseInt($('#minYear').val(), 10);
if ($('#maxYear').val().length && $('#maxYear').val() != 1)
options.maxYear = parseInt($('#maxYear').val(), 10);
if ($('#showWeekNumbers').is(':checked'))
options.showWeekNumbers = true;
if ($('#showISOWeekNumbers').is(':checked'))
options.showISOWeekNumbers = true;
if ($('#timePicker').is(':checked'))
options.timePicker = true;
if ($('#timePicker24Hour').is(':checked'))
options.timePicker24Hour = true;
if ($('#timePickerIncrement').val().length && $('#timePickerIncrement').val() != 1)
options.timePickerIncrement = parseInt($('#timePickerIncrement').val(), 10);
if ($('#timePickerSeconds').is(':checked'))
options.timePickerSeconds = true;
if ($('#autoApply').is(':checked'))
options.autoApply = true;
if ($('#maxSpan').is(':checked'))
options.maxSpan = { days: 7 };
if ($('#ranges').is(':checked')) {
options.ranges = {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
};
}
if ($('#locale').is(':checked')) {
options.locale = {
format: 'MM/DD/YYYY',
separator: ' - ',
applyLabel: 'Apply',
cancelLabel: 'Cancel',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
weekLabel: 'W',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
};
}
if (!$('#linkedCalendars').is(':checked'))
options.linkedCalendars = false;
if (!$('#autoUpdateInput').is(':checked'))
options.autoUpdateInput = false;
if (!$('#showCustomRangeLabel').is(':checked'))
options.showCustomRangeLabel = false;
if ($('#alwaysShowCalendars').is(':checked'))
options.alwaysShowCalendars = true;
if ($('#parentEl').val().length)
options.parentEl = $('#parentEl').val();
if ($('#startDate').val().length)
options.startDate = $('#startDate').val();
if ($('#endDate').val().length)
options.endDate = $('#endDate').val();
if ($('#minDate').val().length)
options.minDate = $('#minDate').val();
if ($('#maxDate').val().length)
options.maxDate = $('#maxDate').val();
if ($('#opens').val().length && $('#opens').val() != 'right')
options.opens = $('#opens').val();
if ($('#drops').val().length && $('#drops').val() != 'down')
options.drops = $('#drops').val();
if ($('#buttonClasses').val().length && $('#buttonClasses').val() != 'btn btn-sm')
options.buttonClasses = $('#buttonClasses').val();
if ($('#applyButtonClasses').val().length && $('#applyButtonClasses').val() != 'btn-primary')
options.applyButtonClasses = $('#applyButtonClasses').val();
if ($('#cancelButtonClasses').val().length && $('#cancelButtonClasses').val() != 'btn-default')
options.cancelClass = $('#cancelButtonClasses').val();
$('#config-demo').daterangepicker(options, function(start, end, label) { console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')'); });
if (typeof options.ranges !== 'undefined') {
options.ranges = {};
}
var option_text = JSON.stringify(options, null, ' ');
var replacement = "ranges: {\n"
+ " 'Today': [moment(), moment()],\n"
+ " 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],\n"
+ " 'Last 7 Days': [moment().subtract(6, 'days'), moment()],\n"
+ " 'Last 30 Days': [moment().subtract(29, 'days'), moment()],\n"
+ " 'This Month': [moment().startOf('month'), moment().endOf('month')],\n"
+ " 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]\n"
+ " }";
option_text = option_text.replace(new RegExp('"ranges"\: \{\}', 'g'), replacement);
$('#config-text').val("$('#demo').daterangepicker(" + option_text + ", function(start, end, label) {\n console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');\n});");
}
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if (scroll > 180) {
$('.leftcol').css('position', 'fixed');
$('.leftcol').css('top', '10px');
} else {
$('.leftcol').css('position', 'absolute');
$('.leftcol').css('top', '180px');
}
});
var bg = new Trianglify({
x_colors: ["#e1f3fd", "#eeeeee", "#407dbf"],
y_colors: 'match_x',
width: document.body.clientWidth,
height: 150,
stroke_width: 0,
cell_size: 20
});
$('#jumbo').css('background-image', 'url(' + bg.png() + ')');
});

View file

0
plugins/flot/excanvas.min.js → plugins/flot-old/excanvas.min.js vendored Normal file → Executable file
View file

View file

3137
plugins/flot-old/jquery.flot.js Executable file

File diff suppressed because it is too large Load diff

View file

View file

View file

View file

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,20 @@
Copyright (c) 2019 Adam Shaw
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View file

@ -0,0 +1,8 @@
# FullCalendar Bootstrap Plugin
Bootstrap 4 theming for your calendar
[View the docs &raquo;](https://fullcalendar.io/docs/bootstrap-theme)
This package was created from the [FullCalendar monorepo &raquo;](https://github.com/fullcalendar/fullcalendar)

View file

@ -0,0 +1,33 @@
/*!
FullCalendar Bootstrap Plugin v4.2.0
Docs & License: https://fullcalendar.io/
(c) 2019 Adam Shaw
*/
.fc.fc-bootstrap a {
text-decoration: none; }
.fc.fc-bootstrap a[data-goto]:hover {
text-decoration: underline; }
.fc-bootstrap hr.fc-divider {
border-color: inherit; }
.fc-bootstrap .fc-today.alert {
border-radius: 0; }
.fc-bootstrap a.fc-event:not([href]):not([tabindex]) {
color: #fff; }
.fc-bootstrap .fc-popover.card {
position: absolute; }
/* Popover
--------------------------------------------------------------------------------------------------*/
.fc-bootstrap .fc-popover .card-body {
padding: 0; }
/* TimeGrid Slats (lines that run horizontally)
--------------------------------------------------------------------------------------------------*/
.fc-bootstrap .fc-time-grid .fc-slats table {
/* some themes have background color. see through to slats */
background: none; }

Some files were not shown because too many files have changed in this diff Show more