Add statistic selection options with updated date range picker

application-manager-new
charithag 10 years ago
parent 62467ac564
commit e2eafa1320

@ -24,16 +24,22 @@
<hr>
</div>
</div>
<div class="row float-right margin-top">
<div class="right margin-right">
<p style="color:#000;float:left;margin-top:25px">Date Range:</p>
<input class="right margin-right" id="date-range1" size="60" value="" style="margin-top: 20px">
<button type="button" id="btn-draw-graphs" class="btn btn-primary" style="margin-top: 20px">
Draw Graphs
</button>
<div id="rangeSliderWrapper" class="pull-right" style="width: 550px;">
<div class="row-fluid">
<div class="span12">
<div id="dateRangePickerContainer">
<div class="btn-group" role="group">
<button id="hour-btn" type="button" class="btn btn-default date-range">Hour</button>
<button id="today-btn" type="button" class="btn btn-default date-range">Day</button>
<button id="week-btn" type="button" class="btn btn-default date-range">Week</button>
<button id="month-btn" type="button" class="btn btn-default date-range">Month</button>
<button id="date-range" type="button" class="btn btn-default date-range last-child" data-toggle="popup" title="Click to set custom date range"></button>
</div>
<span class="add-on-cal"><i style="margin-right:0px;" class="icon-calendar"></i></span>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="row margin-double">
<div>

@ -1,191 +1,264 @@
.date-picker
{
width:170px;
height:25px;
padding:0;
border:0;
line-height:25px;
padding-left:10px;
font-size:12px;
font-family:Arial;
font-weight:bold;
cursor:pointer;
color:#303030;
position:relative;
z-index:2;
}
.date-picker-wrapper
{
position:absolute;
z-index:1;
border:1px solid #bfbfbf;
background-color:#efefef;
width:428px;
.date-picker {
width: 170px;
height: 25px;
padding: 0;
border: 0;
line-height: 25px;
padding-left: 10px;
font-size: 12px;
font-family: Arial;
font-weight: bold;
cursor: pointer;
color: #303030;
position: relative;
z-index: 2;
}
.date-picker-wrapper {
position: absolute;
z-index: 1;
border: 1px solid #bfbfbf;
background-color: #efefef;
width: 448px;
padding: 5px 12px;
font-size:12px;
line-height:20px;
color:#aaa;
font-family:Arial;
box-shadow:3px 3px 10px rgba(0,0,0,0.5);
font-size: 12px;
line-height: 20px;
color: #aaa;
font-family: Arial;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}
.date-picker-wrapper.single-date {
width:auto;
width: auto;
}
.date-picker-wrapper.no-shortcuts { padding-bottom:12px;}
.date-picker-wrapper .footer
{
font-size:11px;
.date-picker-wrapper.no-shortcuts {
padding-bottom: 12px;
}
.date-picker-wrapper .footer {
display: none;
font-size: 11px;
padding-top: 3px;
}
.date-picker-wrapper b
{
color:#666;
font-weight:700;
.date-picker-wrapper b {
color: #666;
font-weight: 700;
}
.date-picker-wrapper a
{
.date-picker-wrapper a {
color: rgb(107, 180, 214);
text-decoration:underline;
}
.date-picker-wrapper .month-name
{
text-transform: uppercase;
}
.date-picker-wrapper .month-wrapper
{
border:1px solid #bfbfbf;
border-radius:3px;
background-color:#fff;
padding:5px;
cursor:default;
position:relative;
_overflow:hidden;
}
.date-picker-wrapper .month-wrapper table
{
width:190px;
float:left;
}
.date-picker-wrapper .month-wrapper table.month2
{
width:190px;
float:right;
text-decoration: underline;
}
.date-picker-wrapper .month-wrapper {
border: 1px solid #bfbfbf;
border-radius: 3px;
background-color: #fff;
padding: 5px;
cursor: default;
position: relative;
_overflow: hidden;
}
.date-picker-wrapper .month-wrapper table {
width: 190px;
float: left;
}
.date-picker-wrapper .month-wrapper table.month2 {
width: 190px;
float: right;
}
.date-picker-wrapper .month-wrapper table th,
.date-picker-wrapper .month-wrapper table td
{
vertical-align:middle;
text-align:center;
line-height:14px;
margin : 0px;
padding : 0px;
}
.date-picker-wrapper .month-wrapper table .day
{
height:19px;
line-height:19px;
font-size:12px;
margin-bottom:1px;
color:#999;
cursor:default;
.date-picker-wrapper .month-wrapper table td {
vertical-align: middle;
text-align: center;
line-height: 14px;
margin: 0px;
padding: 0px;
}
.date-picker-wrapper .month-wrapper table .day {
height: 19px;
line-height: 19px;
font-size: 12px;
margin-bottom: 1px;
color: #999;
cursor: default;
}
.date-picker-wrapper .month-wrapper table div.day.lastMonth,
.date-picker-wrapper .month-wrapper table div.day.nextMonth
{
color:#999;
cursor:default;
.date-picker-wrapper .month-wrapper table div.day.nextMonth {
color: #999;
cursor: default;
}
.date-picker-wrapper .month-wrapper table .day.checked
{
background-color: rgba(156, 219, 247, 0.5);
.date-picker-wrapper .month-wrapper table .day.checked {
background-color: rgb(156, 219, 247);
}
.date-picker-wrapper .month-wrapper table .week-name
{
height:20px;
line-height:20px;
font-weight:100;
text-transform: uppercase;
.date-picker-wrapper .month-wrapper table .week-name {
height: 20px;
line-height: 20px;
font-weight: 100;
}
.date-picker-wrapper .month-wrapper table .day.has-tooltip { cursor:help !important;}
.date-picker-wrapper .month-wrapper table .day.has-tooltip {
cursor: help !important;
}
.date-picker-wrapper .month-wrapper table .day.toMonth.valid
{
color:#333;
cursor:pointer;
.date-picker-wrapper .month-wrapper table .day.toMonth.valid {
color: #333;
cursor: pointer;
}
.date-picker-wrapper .month-wrapper table .day.real-today { background-color: rgb(255, 230, 132); }
.date-picker-wrapper .month-wrapper table .day.real-today.checked { background-color: rgb(112, 204, 213); }
.date-picker-wrapper .month-wrapper table .day.real-today {
background-color: rgb(255, 230, 132);
}
.date-picker-wrapper .month-wrapper table .day.real-today.checked {
background-color: rgb(112, 204, 213);
}
.date-picker-wrapper table .caption
{
height:40px;
.date-picker-wrapper table .caption {
height: 40px;
}
.date-picker-wrapper table .caption .next,
.date-picker-wrapper table .caption .prev
{
padding:0 5px;
cursor:pointer;
.date-picker-wrapper table .caption .prev {
padding: 0 5px;
cursor: pointer;
}
.date-picker-wrapper table .caption .next:hover,
.date-picker-wrapper table .caption .prev:hover
{
background-color:#ccc;
color:white;
}
.date-picker-wrapper .gap
{
position:absolute;
display:none;
top:0px;
left:204px;
.date-picker-wrapper table .caption .prev:hover {
background-color: #ccc;
color: white;
}
.date-picker-wrapper .gap {
position: absolute;
display: none;
top: 0px;
left: 204px;
z-index: 1;
width:15px;
width: 15px;
height: 100%;
background-color: red;
font-size: 0;
line-height: 0;
}
.date-picker-wrapper .gap .gap-lines {
height: 100%;
background-color:red;
font-size:0;
line-height:0;
}
.date-picker-wrapper .gap .gap-lines { height: 100%; overflow:hidden; }
.date-picker-wrapper .gap .gap-line { height:15px;width:15px; position:relative; }
.date-picker-wrapper .gap .gap-line .gap-1 { z-index:1; height:0; border-left:8px solid white; border-top:8px solid #eee;border-bottom:8px solid #eee; }
.date-picker-wrapper .gap .gap-line .gap-2 { position:absolute; right:0; top:0px; z-index:2; height:0; border-left:8px solid transparent; border-top:8px solid white; }
.date-picker-wrapper .gap .gap-line .gap-3 { position:absolute; right:0; top:8px; z-index:2; height:0; border-left:8px solid transparent; border-bottom:8px solid white; }
.date-picker-wrapper .gap .gap-top-mask { width: 6px; height:1px; position:absolute; top: -1px; left: 1px; background-color: #eee; z-index:3; }
.date-picker-wrapper .gap .gap-bottom-mask { width: 6px; height:1px; position:absolute; bottom: -1px; left: 7px; background-color: #eee; z-index:3; }
.date-picker-wrapper .selected-days
{
display:none;
}
.date-picker-wrapper .drp_top-bar
{
line-height:40px;
height:40px;
position:relative;
}
.date-picker-wrapper .drp_top-bar .error-top { display:none; }
.date-picker-wrapper .drp_top-bar .normal-top { display:none; }
.date-picker-wrapper .drp_top-bar .default-top { display:block; }
.date-picker-wrapper .drp_top-bar.error .default-top { display:none; }
.date-picker-wrapper .drp_top-bar.error .error-top { display:block; color:red; }
.date-picker-wrapper .drp_top-bar.normal .default-top { display:none; }
.date-picker-wrapper .drp_top-bar.normal .normal-top { display:block; }
.date-picker-wrapper .drp_top-bar .apply-btn
{
position:absolute;
overflow: hidden;
}
.date-picker-wrapper .gap .gap-line {
height: 15px;
width: 15px;
position: relative;
}
.date-picker-wrapper .gap .gap-line .gap-1 {
z-index: 1;
height: 0;
border-left: 8px solid white;
border-top: 8px solid #eee;
border-bottom: 8px solid #eee;
}
.date-picker-wrapper .gap .gap-line .gap-2 {
position: absolute;
right: 0;
top: 0px;
z-index: 2;
height: 0;
border-left: 8px solid transparent;
border-top: 8px solid white;
}
.date-picker-wrapper .gap .gap-line .gap-3 {
position: absolute;
right: 0;
top: 8px;
z-index: 2;
height: 0;
border-left: 8px solid transparent;
border-bottom: 8px solid white;
}
.date-picker-wrapper .gap .gap-top-mask {
width: 6px;
height: 1px;
position: absolute;
top: -1px;
left: 1px;
background-color: #eee;
z-index: 3;
}
.date-picker-wrapper .gap .gap-bottom-mask {
width: 6px;
height: 1px;
position: absolute;
bottom: -1px;
left: 7px;
background-color: #eee;
z-index: 3;
}
.date-picker-wrapper .selected-days {
display: none;
}
.date-picker-wrapper .drp_top-bar {
line-height: 40px;
height: 40px;
position: relative;
}
.date-picker-wrapper .drp_top-bar .error-top {
display: none;
}
.date-picker-wrapper .drp_top-bar .normal-top {
display: none;
}
.date-picker-wrapper .drp_top-bar .default-top {
display: block;
}
.date-picker-wrapper .drp_top-bar.error .default-top {
display: none;
}
.date-picker-wrapper .drp_top-bar.error .error-top {
display: block;
color: red;
}
.date-picker-wrapper .drp_top-bar.normal .default-top {
display: none;
}
.date-picker-wrapper .drp_top-bar.normal .normal-top {
display: block;
}
.date-picker-wrapper .drp_top-bar .apply-btn {
position: absolute;
right: 0px;
top: 6px;
padding:3px 5px;
margin:0;
font-size:12px;
border-radius:4px;
cursor:pointer;
padding: 3px 5px;
margin: 0;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
color: #d9eef7;
border: solid 1px #0076a3;
@ -193,12 +266,11 @@
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top, #00adee, #0078a5);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
color:white;
color: white;
}
.date-picker-wrapper .drp_top-bar .apply-btn.disabled
{
cursor: pointer;
.date-picker-wrapper .drp_top-bar .apply-btn.disabled {
pointer-events: none;
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
@ -206,27 +278,54 @@
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
/*time styling*/
.time {
position: relative;
}
.time input[type=range] {
vertical-align: middle;
}
.time1, .time2 {
width: 180px;
padding: 0 5px;
text-align: center;
}
.time1 {
float: left;
}
.time2 {
float: right;
}
.hour, .minute {
text-align: right;
text-align: left;
}
.hide {
display: none;
}
input.hour-range, input.minute-range {
width: 150px;
}
#dateRangePickerContainer .date-range, #dateRangePickerContainer .input-append {
background: none !important;
}
#date-range{
padding-right:30px;
width:300px;
height:100%;
display:inline-block;
}
#dateRangePickerContainer{
float:right;
margin-top:-6px;
}

@ -11,76 +11,96 @@ Rickshaw.Graph.Renderer.BarNoGap = Rickshaw.Class.create(Rickshaw.Graph.Renderer
}
});
var configObject = {
format: 'DD.MM.YYYY HH:mm',
var currentDay = new Date();
var startDate = new Date(currentDay.getTime() - (60 * 60 * 24 * 100));
var endDate = new Date(currentDay.getTime());
var configObject = {
startOfWeek: 'monday',
separator: ' to ',
language: 'auto',
startOfWeek: 'sunday',// or sunday
format: 'YYYY-MM-DD HH:mm',
autoClose: false,
time: {
enabled: true
},
shortcuts: 'hide',
endDate: currentDay,
getValue: function () {
return this.value;
},
setValue: function (s) {
this.value = s;
},
startDate: false,
endDate: false,
minDays: 0,
maxDays: 0,
showShortcuts: true,
time: {
enabled: true
},
shortcuts: {
//'prev-days': [1,3,5,7],
'next-days': [3, 5, 7],
//'prev' : ['week','month','year'],
'next': ['week', 'month', 'year']
},
customShortcuts: [],
inline: false,
container: 'body',
alwaysOpen: false,
singleDate: false,
batchMode: false,
stickyMonths: false
}
};
$('#date-range1').dateRangePicker(configObject)
var DateRange = convertDate(startDate) + " " + configObject.separator + " " + convertDate(endDate);
$('#date-range').dateRangePicker(configObject)
.bind('datepicker-apply', function (event, dateRange) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
fromDate = dateRange.date1 != "Invalid Date" ? dateRange.date1.getTime() / 1000 : null;
toDate = dateRange.date2 != "Invalid Date" ? dateRange.date2.getTime() / 1000 : null;
});
var now = new Date();
var startDate = new Date(now.getTime() - (60*60*24*100));
var endDate = new Date(now.getTime());
var DateRange = customFormatDate(startDate,configObject.format) +" "+ configObject.separator +" "+ customFormatDate(endDate,configObject.format);
console.log(DateRange);
getStats(fromDate, toDate);
}
);
$( document ).ready(function() {
$('#date-range1').val(DateRange);
$('#date-range1').trigger('datepicker-apply',
$(document).ready(function () {
$('#date-range').html(DateRange);
$('#date-range').trigger('datepicker-apply',
{
'value': DateRange,
'date1' : startDate,
'date2' : endDate
'date1': startDate,
'date2': endDate
});
});
$('#btn-draw-graphs').trigger("click");
//day picker
$('#today-btn').on('click', function () {
getDateTime(currentDay.getTime() - 86400000, currentDay.getTime());
});
//26.04.2015 08:46 to 22.07.2015 08:46
//hour picker
$('#hour-btn').on('click', function () {
getDateTime(currentDay.getTime() - 3600000, currentDay.getTime());
})
$('#btn-draw-graphs').on('click', function () {
var deviceId = getUrlParameter('deviceId');
var deviceType = getUrlParameter('deviceType');
console.log("device id:"+deviceId);
getStats(deviceId, deviceType, fromDate, toDate);
//week picker
$('#week-btn').on('click', function () {
getDateTime(currentDay.getTime() - 604800000, currentDay.getTime());
})
//month picker
$('#month-btn').on('click', function () {
getDateTime(currentDay.getTime() - (604800000 * 4), currentDay.getTime());
});
$('body').on('click', '.btn-group button', function (e) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
function getStats(deviceId, deviceType, from, to) {
function getDateTime(from, to) {
startDate = new Date(from);
endDate = new Date(to);
DateRange = convertDate(startDate) + " " + configObject.separator + " " + convertDate(endDate);
console.log(DateRange);
$('#date-range').html(DateRange);
$('#date-range').trigger('datepicker-apply',
{
'value': DateRange,
'date1': startDate,
'date2': endDate
}
);
getStats(from / 1000, to / 1000);
}
function getStats(from, to) {
var deviceId = getUrlParameter('deviceId');
var deviceType = getUrlParameter('deviceType');
var requestData = new Object();
@ -148,7 +168,7 @@ function updateGraphs(stats) {
function scaleGraphs() {
var sliders = $('.right_handle');
if (sliders.length == 0){
if (sliders.length == 0) {
return;
}
@ -179,7 +199,9 @@ function scaleGraphs() {
function convertStatsToGraphData(stats) {
var graphData = new Array();
if(!stats){return graphData;}
if (!stats) {
return graphData;
}
for (var i = 0; i < stats.length; i++) {
graphData.push({x: parseInt(stats[i]['time']) * 1000, y: stats[i]['value']})
}
@ -188,18 +210,19 @@ function convertStatsToGraphData(stats) {
}
function convertStateStatsToGraphData(stats){
function convertStateStatsToGraphData(stats) {
var graphData = new Array();
if(!stats){return graphData;}
if (!stats) {
return graphData;
}
var yValue;
for(var i = 0; i < stats.length; i++){
for (var i = 0; i < stats.length; i++) {
yValue = -1;
if(stats[i]['value'].toUpperCase() == 'ON'){
if (stats[i]['value'].toUpperCase() == 'ON') {
yValue = 1;
}else if(stats[i]['value'].toUpperCase() == 'OFF'){
} else if (stats[i]['value'].toUpperCase() == 'OFF') {
yValue = 0;
}
@ -209,44 +232,12 @@ function convertStateStatsToGraphData(stats){
return graphData;
}
function arrayMin(arr) {
var len = arr.length, min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
}
}
return min;
};
function arrayMax(arr) {
var len = arr.length, max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
};
function customFormatDate(timeStamp, formatString){
console.log("came"+formatString);
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
YYYY=timeStamp.getFullYear();
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
DD = (D=timeStamp.getDate())<10?('0'+D):D;
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
formatString = formatString.replace("YYYY",YYYY).replace("MM",MM).replace("DD",DD).replace("D",D);
console.log(formatString);
h=(hhh=timeStamp.getHours());
if (h==0) h=24;
if (h>12) h-=12;
hh = h<10?('0'+h):h;
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
return formatString.replace("hhh",hhh).replace("HH",hh).replace("h",h).replace("mm",mm).replace("m",m).replace("ss",ss).replace("s",s).replace("ampm",ampm).replace("AMPM",AMPM);
function convertDate(date) {
var month = date.getMonth() + 1;
var day = date.getDate();
var hour=date.getHours();
var minute=date.getMinutes();
return date.getFullYear() + '-' + (('' + month).length < 2 ? '0' : '')
+ month + '-' + (('' + day).length < 2 ? '0' : '') + day +" "+ (('' + hour).length < 2 ? '0' : '')
+ hour +":"+(('' + minute).length < 2 ? '0' : '')+ minute;
}

@ -5,55 +5,11 @@
// license : MIT
// www.jszen.com
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery', 'moment'], factory);
} else if (typeof exports === 'object' && typeof module !== 'undefined') {
// CommonJS. Register as a module
module.exports = factory(require('jquery'), require('moment'));
} else {
// Browser globals
factory(jQuery, moment);
}
}(function ($, moment)
(function($)
{
$.dateRangePickerLanguages =
{
'az':
{
'selected': 'Seçildi:',
'day':' gün',
'days': ' gün',
'apply': 'tətbiq',
'week-1' : '1',
'week-2' : '2',
'week-3' : '3',
'week-4' : '4',
'week-5' : '5',
'week-6' : '6',
'week-7' : '7',
'month-name': ['yanvar','fevral','mart','aprel','may','iyun','iyul','avqust','sentyabr','oktyabr','noyabr','dekabr'],
'shortcuts' : 'Qısayollar',
'past': 'Keçmiş',
'following':'Növbəti',
'previous' : '&nbsp;&nbsp;&nbsp;',
'prev-week' : 'Öncəki həftə',
'prev-month' : 'Öncəki ay',
'prev-year' : 'Öncəki il',
'next': '&nbsp;&nbsp;&nbsp;',
'next-week':'Növbəti həftə',
'next-month':'Növbəti ay',
'next-year':'Növbəti il',
'less-than' : 'Tarix aralığı %d gündən çox olmamalıdır',
'more-than' : 'Tarix aralığı %d gündən az olmamalıdır',
'default-more' : '%d gündən çox bir tarix seçin',
'default-single' : 'Tarix seçin',
'default-less' : '%d gündən az bir tarix seçin',
'default-range' : '%d və %d gün aralığında tarixlər seçin',
'default-default': 'Tarix aralığı seçin'
},
'cn':
{
'selected': '已选择:',
@ -93,14 +49,14 @@
'day':'Den',
'days': 'Dny',
'apply': 'Zavřít',
'week-1' : 'po',
'week-2' : 'út',
'week-3' : 'st',
'week-4' : 'čt',
'week-5' : 'pá',
'week-6' : 'so',
'week-7' : 'ne',
'month-name': ['leden','únor','březen','duben','květen','červen','červenec','srpen','září','říjen','listopad','prosinec'],
'week-1' : 'Po',
'week-2' : 'Út',
'week-3' : 'St',
'week-4' : 'Čt',
'week-5' : 'Pá',
'week-6' : 'So',
'week-7' : 'Ne',
'month-name': ['Leden','Únor','Březen','Duben','Květen','Červen','Červenec','Srpen','Září','Říjen','Listopad','Prosinec'],
'shortcuts' : 'Zkratky',
'past': 'po',
'following':'následující',
@ -126,16 +82,15 @@
'day':'Day',
'days': 'Days',
'apply': 'Apply',
'week-1' : 'mo',
'week-2' : 'tu',
'week-3' : 'we',
'week-4' : 'th',
'week-5' : 'fr',
'week-6' : 'sa',
'week-7' : 'su',
'month-name': ['january','february','march','april','may','june','july','august','september','october','november','december'],
'week-1' : 'MO',
'week-2' : 'TU',
'week-3' : 'WE',
'week-4' : 'TH',
'week-5' : 'FR',
'week-6' : 'SA',
'week-7' : 'SU',
'month-name': ['JANUARY','FEBRUARY','MARCH','APRIL','MAY','JUNE','JULY','AUGUST','SEPTEMBER','OCTOBER','NOVEMBER','DECEMBER'],
'shortcuts' : 'Shortcuts',
'custom-values': 'Custom Values',
'past': 'Past',
'following':'Following',
'previous' : 'Previous',
@ -160,14 +115,14 @@
'day':'Giorno',
'days': 'Giorni',
'apply': 'Chiudi',
'week-1' : 'lu',
'week-2' : 'ma',
'week-3' : 'me',
'week-4' : 'gi',
'week-5' : 've',
'week-6' : 'sa',
'week-7' : 'do',
'month-name': ['gennaio','febbraio','marzo','aprile','maggio','giugno','luglio','agosto','settembre','ottobre','novembre','dicembre'],
'week-1' : 'LU',
'week-2' : 'MA',
'week-3' : 'ME',
'week-4' : 'GI',
'week-5' : 'VE',
'week-6' : 'SA',
'week-7' : 'DO',
'month-name': ['GENNAIO','FEBBRAIO','MARZO','APRILE','MAGGIO','GIUGNO','LUGLIO','AGOSTO','SETTEMBRE','OTTOBRE','NOVEMBRE','DICEMBRE'],
'shortcuts' : 'Scorciatoie',
'past': 'Scorso',
'following':'Successivo',
@ -193,14 +148,14 @@
'day':'Dia',
'days': 'Dias',
'apply': 'Cerrar',
'week-1' : 'lu',
'week-2' : 'ma',
'week-3' : 'mi',
'week-4' : 'ju',
'week-5' : 'vi',
'week-6' : 'sa',
'week-7' : 'do',
'month-name': ['enero','febrero','marzo','abril','mayo','junio','julio','agosto','septiembre','octubre','noviembre','diciembre'],
'week-1' : 'LU',
'week-2' : 'MA',
'week-3' : 'MI',
'week-4' : 'JU',
'week-5' : 'VI',
'week-6' : 'SA',
'week-7' : 'DO',
'month-name': ['ENERO','FEBRERO','MARZO','ABRIL','MAYO','JUNIO','JULIO','AGOSTO','SEPTIEMBRE','OCTUBRE','NOVIEMBRE','DICIEMBRE'],
'shortcuts' : 'Accesos directos',
'past': 'Pasado',
'following':'Siguiente',
@ -226,14 +181,14 @@
'day':'Tag',
'days': 'Tage',
'apply': 'Schließen',
'week-1' : 'mo',
'week-2' : 'di',
'week-3' : 'mi',
'week-4' : 'do',
'week-5' : 'fr',
'week-6' : 'sa',
'week-7' : 'so',
'month-name': ['januar','februar','märz','april','mai','juni','juli','august','september','oktober','november','dezember'],
'week-1' : 'MO',
'week-2' : 'DI',
'week-3' : 'MI',
'week-4' : 'DO',
'week-5' : 'FR',
'week-6' : 'SA',
'week-7' : 'SO',
'month-name': ['JANUAR','FEBRUAR','MÄRZ','APRIL','MAI','JUNI','JULI','AUGUST','SEPTEMBER','OKTOBER','NOVEMBER','DEZEMBER'],
'shortcuts' : 'Schnellwahl',
'past': 'Vorherige',
'following':'Folgende',
@ -259,14 +214,14 @@
'day': 'День',
'days': 'Дней',
'apply': 'Закрыть',
'week-1': 'пн',
'week-2': 'вт',
'week-3': 'ср',
'week-4': 'чт',
'week-5': 'пт',
'week-6': 'сб',
'week-7': 'вс',
'month-name': ['январь','февраль','март','апрель','май','июнь','июль','август','сентябрь','октябрь','ноябрь','декабрь'],
'week-1': 'ПН',
'week-2': 'ВТ',
'week-3': 'СР',
'week-4': 'ЧТ',
'week-5': 'ПТ',
'week-6': 'СБ',
'week-7': 'ВС',
'month-name': ['ЯНВАРЬ','ФЕВРАЛЬ','МАРТ','АПРЕЛЬ','МАЙ','ИЮНЬ','ИЮЛЬ','АВГУСТ','СЕНТЯБРЬ','ОКТЯБРЬ','НОЯБРЬ','ДЕКАБРЬ'],
'shortcuts': 'Быстрый выбор',
'past': 'Прошедшие',
'following': 'Следующие',
@ -292,14 +247,14 @@
'day':'Jour',
'days': 'Jours',
'apply': 'Fermer',
'week-1' : 'lu',
'week-2' : 'ma',
'week-3' : 'me',
'week-4' : 'je',
'week-5' : 've',
'week-6' : 'sa',
'week-7' : 'di',
'month-name': ['janvier','février','mars','avril','mai','juin','juillet','août','septembre','octobre','novembre','décembre'],
'week-1' : 'LU',
'week-2' : 'MA',
'week-3' : 'ME',
'week-4' : 'JE',
'week-5' : 'VE',
'week-6' : 'SA',
'week-7' : 'DI',
'month-name': ['JANVIER','FÉVRIER','MARS','AVRIL','MAI','JUIN','JUILLET','AOÛT','SEPTEMBRE','OCTOBRE','NOVEMBRE','DÉCEMBRE'],
'shortcuts' : 'Raccourcis',
'past': 'Passé',
'following':'Suivant',
@ -318,42 +273,16 @@
'default-less' : 'Merci de choisir une intervalle inférieure %d jours',
'default-range' : 'Merci de choisir une intervalle comprise entre %d et %d jours',
'default-default': 'Merci de choisir une date'
},
'hu':
{
'selected': 'Kiválasztva:',
'day':'Nap',
'days': 'Nap',
'apply': 'Ok',
'week-1' : 'h',
'week-2' : 'k',
'week-3' : 'sz',
'week-4' : 'cs',
'week-5' : 'p',
'week-6' : 'sz',
'week-7' : 'v',
'month-name': ['január','február','március','április','május','június','július','augusztus','szeptember','október','november','december'],
'shortcuts' : 'Gyorsválasztó',
'past': 'Múlt',
'following':'Következő',
'previous' : 'Előző',
'prev-week' : 'Hét',
'prev-month' : 'Hónap',
'prev-year' : 'Év',
'next':'Következő',
'next-week':'Hét',
'next-month':'Hónap',
'next-year':'Év',
'less-than' : 'A kiválasztás nem lehet több %d napnál',
'more-than' : 'A kiválasztás nem lehet több %d napnál',
'default-more' : 'Válassz ki egy időszakot ami hosszabb mint %d nap',
'default-single' : 'Válassz egy napot',
'default-less' : 'Válassz ki egy időszakot ami rövidebb mint %d nap',
'default-range' : 'Válassz ki egy %d - %d nap hosszú időszakot',
'default-default': 'Válassz ki egy időszakot'
}
};
if (window['moment'] === undefined)
{
if (window['console'] && console['warn']) console.warn('Please import moment.js before daterangepicker.js');
return;
}
$.fn.dateRangePicker = function(opt)
{
if (!opt) opt = {};
@ -394,13 +323,8 @@
container:'body',
alwaysOpen:false,
singleDate:false,
lookBehind: false,
batchMode: false,
duration: 200,
stickyMonths: false,
dayDivAttrs: [],
dayTdAttrs: [],
applyBtnClass: ''
duration: 200
},opt);
opt.start = false;
@ -433,14 +357,14 @@
// expose some api
$(this).data('dateRangePicker',
{
setDateRange : function(d1,d2,silent)
setDateRange : function(d1,d2)
{
if (typeof d1 == 'string' && typeof d2 == 'string')
{
d1 = moment(d1,opt.format).toDate();
d2 = moment(d2,opt.format).toDate();
}
setDateRange(d1,d2,silent);
setDateRange(d1,d2);
},
clear: clearSelection,
close: closeDatePicker,
@ -461,6 +385,15 @@
return this;
function init_datepicker()
{
var self = this;
@ -473,6 +406,9 @@
$(this).data('date-picker-opened',true);
box = createDom().hide();
$(opt.container).append(box);
@ -491,20 +427,12 @@
}
var defaultTime = opt.defaultTime ? opt.defaultTime : new Date();
if (opt.lookBehind) {
if (opt.startDate && compare_month(defaultTime, opt.startDate) < 0 ) defaultTime = nextMonth(moment(opt.startDate).toDate());
if (opt.endDate && compare_month(defaultTime,opt.endDate) > 0 ) defaultTime = moment(opt.endDate).toDate();
showMonth(prevMonth(defaultTime),'month1');
showMonth(defaultTime,'month2');
} else {
if (opt.startDate && compare_month(defaultTime,opt.startDate) < 0 ) defaultTime = moment(opt.startDate).toDate();
if (opt.endDate && compare_month(nextMonth(defaultTime),opt.endDate) > 0 ) defaultTime = prevMonth(moment(opt.endDate).toDate());
showMonth(defaultTime,'month1');
showMonth(nextMonth(defaultTime),'month2');
}
if (opt.time.enabled) {
if ((opt.startDate && opt.endDate) || (opt.start && opt.end)) {
@ -519,6 +447,8 @@
//showSelectedInfo();
var defaultTopText = '';
if (opt.singleDate)
defaultTopText = lang('default-single');
@ -534,6 +464,8 @@
box.find('.default-top').html( defaultTopText.replace(/\%d/,opt.minDays).replace(/\%d/,opt.maxDays));
setTimeout(function()
{
initiated = true;
@ -548,57 +480,24 @@
box.find('.next').click(function()
{
if(!opt.stickyMonths) gotoNextMonth(this);
else gotoNextMonth_stickily(this)
});
function gotoNextMonth(self) {
var isMonth2 = $(self).parents('table').hasClass('month2');
var isMonth2 = $(this).parents('table').hasClass('month2');
var month = isMonth2 ? opt.month2 : opt.month1;
month = nextMonth(month);
if (!opt.singleDate && !isMonth2 && compare_month(month,opt.month2) >= 0 || isMonthOutOfBounds(month)) return;
showMonth(month,isMonth2 ? 'month2' : 'month1');
showGap();
}
function gotoNextMonth_stickily(self) {
var nextMonth1 = nextMonth(opt.month1);
var nextMonth2 = nextMonth(opt.month2);
if(isMonthOutOfBounds(nextMonth2)) return;
if (!opt.singleDate && compare_month(nextMonth1,nextMonth2) >= 0) return;
showMonth(nextMonth1, 'month1');
showMonth(nextMonth2, 'month2');
}
});
box.find('.prev').click(function()
{
if(!opt.stickyMonths) gotoPrevMonth(this);
else gotoPrevMonth_stickily(this);
});
function gotoPrevMonth(self) {
var isMonth2 = $(self).parents('table').hasClass('month2');
var isMonth2 = $(this).parents('table').hasClass('month2');
var month = isMonth2 ? opt.month2 : opt.month1;
month = prevMonth(month);
//if (isMonth2 && month.getFullYear()+''+month.getMonth() <= opt.month1.getFullYear()+''+opt.month1.getMonth()) return;
if (isMonth2 && compare_month(month,opt.month1) <= 0 || isMonthOutOfBounds(month)) return;
showMonth(month,isMonth2 ? 'month2' : 'month1');
showGap();
}
function gotoPrevMonth_stickily(self) {
var prevMonth1 = prevMonth(opt.month1);
var prevMonth2 = prevMonth(opt.month2);
if(isMonthOutOfBounds(prevMonth1)) return;
if(!opt.singleDate && compare_month(prevMonth2,prevMonth1) <= 0) return;
showMonth(prevMonth2, 'month2');
showMonth(prevMonth1, 'month1');
}
});
box.bind('click',function(evt)
@ -628,19 +527,6 @@
});
});
box.find('[custom]').click(function()
{
var valueName = $(this).attr('custom');
opt.start = false;
opt.end = false;
box.find('.day.checked').removeClass('checked');
opt.setValue.call(selfDom, valueName);
checkSelectionValid();
showSelectedInfo(true);
showSelectedDays();
if (opt.autoClose) closeDatePicker();
});
box.find('[shortcut]').click(function()
{
var shortcut = $(this).attr('shortcut');
@ -810,21 +696,19 @@
// set initiated to avoid triggerring datepicker-change event
initiated = false;
if(defaults.length >= 2){
setDateRange(moment(defaults[0], ___format, moment.locale(opt.language)).toDate(),moment(defaults[1], ___format, moment.locale(opt.language)).toDate());
setDateRange(moment(defaults[0], ___format).toDate(),moment(defaults[1], ___format).toDate());
}
else if(defaults.length==1 && opt.singleDate){
setSingleDate(moment(defaults[0], ___format, moment.locale(opt.language)).toDate());
setSingleDate(moment(defaults[0], ___format).toDate());
}
initiated = true;
}
box.slideDown(animationTime, function(){
$(self).trigger('datepicker-opened', {relatedTarget: box});
});
$(self).trigger('datepicker-open', {relatedTarget: box});
box.slideDown(animationTime);
}
function renderTime (name, date) {
box.find("." + name + " input[type=range].hour-range").val(moment(date).hours());
box.find("." + name + " input[type=range].minute-range").val(moment(date).minutes());
@ -835,8 +719,8 @@
opt[name] = parseInt(
moment(parseInt(date))
.startOf('day')
.add(moment(opt[name + "Time"]).format("HH"), 'h')
.add(moment(opt[name + "Time"]).format("mm"), 'm').valueOf()
.add('h', moment(opt[name + "Time"]).format("HH"))
.add('m', moment(opt[name + "Time"]).format("mm")).valueOf()
);
}
@ -867,8 +751,8 @@
m = timePoint.format("mm");
opt[name] = timePoint
.startOf('day')
.add(hour || h, "h")
.add(minute || m, "m")
.add("h", hour || h)
.add("m", minute || m)
.valueOf();
}
checkSelectionValid();
@ -1049,7 +933,7 @@
}
}
function showSelectedInfo(forceValid,silent)
function showSelectedInfo()
{
box.find('.start-day').html('...');
box.find('.end-day').html('...');
@ -1084,7 +968,7 @@
box.find('.apply-btn').removeClass('disabled');
var dateRange = getDateString(new Date(opt.start))+ opt.separator +getDateString(new Date(opt.end));
opt.setValue.call(selfDom,dateRange, getDateString(new Date(opt.start)), getDateString(new Date(opt.end)));
if (initiated && !silent)
if (initiated)
{
$(self).trigger('datepicker-change',
{
@ -1094,17 +978,13 @@
});
}
}
else if (forceValid)
{
box.find('.apply-btn').removeClass('disabled');
}
else
{
box.find('.apply-btn').addClass('disabled');
}
}
function setDateRange(date1,date2,silent)
function setDateRange(date1,date2)
{
if (date1.getTime() > date2.getTime())
{
@ -1126,31 +1006,10 @@
opt.start = date1.getTime();
opt.end = date2.getTime();
if (opt.stickyMonths || (compare_day(date1,date2) > 0 && compare_month(date1,date2) == 0))
if (compare_day(date1,date2) > 0 && compare_month(date1,date2) == 0)
{
if (opt.lookBehind) {
date1 = prevMonth(date2);
} else {
date2 = nextMonth(date1);
}
}
if(opt.stickyMonths && compare_month(date2,opt.endDate) > 0) {
date1 = prevMonth(date1);
date2 = prevMonth(date2);
}
if (!opt.stickyMonths) {
if (compare_month(date1,date2) == 0)
{
if (opt.lookBehind) {
date1 = prevMonth(date2);
} else {
date2 = nextMonth(date1);
}
}
}
if (opt.time.enabled) {
renderTime("time1", date1);
renderTime("time2", date2);
@ -1158,7 +1017,7 @@
showMonth(date1,'month1');
showMonth(date2,'month2');
showGap();
showSelectedInfo(false,silent);
showSelectedInfo();
autoclose();
}
@ -1261,10 +1120,9 @@
$(box).slideUp(opt.duration,function()
{
$(self).data('date-picker-opened',false);
$(self).trigger('datepicker-closed', {relatedTarget: box});
});
//$(document).unbind('.datepicker');
$(self).trigger('datepicker-close', {relatedTarget: box});
$(self).trigger('datepicker-close');
}
function compare_month(m1,m2)
@ -1328,13 +1186,13 @@
html += '</div>\
<div class="error-top">error</div>\
<div class="default-top">default</div>\
<input type="button" class="apply-btn disabled'+ getApplyBtnClass() +'" value="'+lang('apply')+'" />\
<input type="button" class="apply-btn disabled '+ getHideClass() +'" value="'+lang('apply')+'" />\
</div>'
+'<div class="month-wrapper">'
+'<table class="month1" cellspacing="0" border="0" cellpadding="0"><thead><tr class="caption"><th style="width:27px;"><span class="prev">&lt;</span></th><th colspan="5" class="month-name">January, 2011</th><th style="width:27px;">' + (opt.singleDate || !opt.stickyMonths ? '<span class="next">&gt;</span>': '') + '</th></tr><tr class="week-name">'+getWeekHead()+'</thead><tbody></tbody></table>'
+'<table class="month1" cellspacing="0" border="0" cellpadding="0"><thead><tr class="caption"><th style="width:27px;"><span class="prev">&lt;</span></th><th colspan="5" class="month-name">January, 2011</th><th style="width:27px;"><span class="next">&gt;</span></th></tr><tr class="week-name">'+getWeekHead()+'</thead><tbody></tbody></table>'
if ( ! opt.singleDate ) {
html += '<div class="gap">'+getGapHTML()+'</div>'
+'<table class="month2" cellspacing="0" border="0" cellpadding="0"><thead><tr class="caption"><th style="width:27px;">' + (!opt.stickyMonths ? '<span class="prev">&lt;</span>': '') + '</th><th colspan="5" class="month-name">January, 2011</th><th style="width:27px;"><span class="next">&gt;</span></th></tr><tr class="week-name">'+getWeekHead()+'</thead><tbody></tbody></table>'
+'<table class="month2" cellspacing="0" border="0" cellpadding="0"><thead><tr class="caption"><th style="width:27px;"><span class="prev">&lt;</span></th><th colspan="5" class="month-name">January, 2011</th><th style="width:27px;"><span class="next">&gt;</span></th></tr><tr class="week-name">'+getWeekHead()+'</thead><tbody></tbody></table>'
}
//+'</div>'
html += '<div style="clear:both;height:0;font-size:0;"></div>'
@ -1347,10 +1205,9 @@
+'<div style="clear:both;height:0;font-size:0;"></div>'
+'</div>';
html += '<div class="footer">';
if (opt.showShortcuts)
{
html += '<div class="shortcuts"><b>'+lang('shortcuts')+'</b>';
html += '<div class="footer"><b>'+lang('shortcuts')+'</b>';
var data = opt.shortcuts;
if (data)
@ -1410,40 +1267,21 @@
html+= '&nbsp;<span class="custom-shortcut"><a href="javascript:;" shortcut="custom">'+sh.name+'</a></span>';
}
}
html += '</div>';
}
// Add Custom Values Dom
if (opt.showCustomValues)
{
html += '<div class="customValues"><b>'+(opt.customValueLabel || lang('custom-values'))+'</b>';
if (opt.customValues)
{
for(var i=0;i<opt.customValues.length;i++)
{
var val = opt.customValues[i];
html+= '&nbsp;<span class="custom-value"><a href="javascript:;" custom="'+ val.value+'">'+val.name+'</a></span>';
}
html +='</div>';
}
}
html += '</div></div>';
html += '</div>';
return $(html);
}
function getApplyBtnClass()
function getHideClass()
{
klass = ''
if (opt.autoClose === true) {
klass += ' hide';
return 'hide';
}
if (opt.applyBtnClass !== '') {
klass += ' ' + opt.applyBtnClass;
}
return klass;
return '';
}
function getWeekHead()
@ -1498,32 +1336,6 @@
return html.join('');
}
function attributesCallbacks(initialObject,callbacksArray,today)
{
var resultObject = jQuery.extend(true, {}, initialObject);
callbacksArray.forEach(function(cbAttr,cbAttrIndex,cbAttrArray){
var addAttributes = cbAttr(this);
for(var attr in addAttributes){
if(resultObject.hasOwnProperty(attr)){
resultObject[attr] += addAttributes[attr];
}else{
resultObject[attr] = addAttributes[attr];
}
}
},today);
attrString = '';
for(var attr in resultObject){
if(resultObject.hasOwnProperty(attr)){
attrString += attr + '="' + resultObject[attr] + '" ';
}
}
return attrString;
}
function createMonthHTML(d)
{
var days = [];
@ -1551,7 +1363,7 @@
var toMonth = d.getMonth();
for(var i=0; i<40; i++)
{
var today = moment(d).add(i, 'days').toDate();
var today = moment(d).add(i,'days').toDate();
var valid = true;
if (opt.startDate && compare_day(today,opt.startDate) < 0) valid = false;
if (opt.endDate && compare_day(today,opt.endDate) > 0) valid = false;
@ -1577,14 +1389,7 @@
today.tooltip = _r[2] || '';
if (today.tooltip != '') today.extraClass += ' has-tooltip ';
}
todayDivAttr = {
time: today.time,
title: today.tooltip,
'class': 'day '+today.type+' '+today.extraClass+' '+(today.valid ? 'valid' : 'invalid')+' '+(highlightToday?'real-today':'')
};
html.push('<td ' + attributesCallbacks({},opt.dayTdAttrs,today) + '><div ' + attributesCallbacks(todayDivAttr,opt.dayDivAttrs,today) + '>'+today.day+'</div></td>');
html.push('<td><div time="'+today.time+'" title="'+today.tooltip+'" class="day '+today.type+' '+today.extraClass+' '+(today.valid ? 'valid' : 'invalid')+' '+(highlightToday?'real-today':'')+'">'+today.day+'</div></td>');
}
html.push('</tr>');
}
@ -1624,4 +1429,4 @@
};
}));
})(jQuery);

Loading…
Cancel
Save