Return-Path: X-Original-To: archive-asf-public-internal@cust-asf2.ponee.io Delivered-To: archive-asf-public-internal@cust-asf2.ponee.io Received: from cust-asf.ponee.io (cust-asf.ponee.io [163.172.22.183]) by cust-asf2.ponee.io (Postfix) with ESMTP id 54EAF200B6A for ; Mon, 22 Aug 2016 15:37:05 +0200 (CEST) Received: by cust-asf.ponee.io (Postfix) id 53FF8160A91; Mon, 22 Aug 2016 13:37:05 +0000 (UTC) Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by cust-asf.ponee.io (Postfix) with SMTP id BF7D4160AB3 for ; Mon, 22 Aug 2016 15:37:01 +0200 (CEST) Received: (qmail 90589 invoked by uid 500); 22 Aug 2016 13:37:00 -0000 Mailing-List: contact commits-help@ambari.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: ambari-dev@ambari.apache.org Delivered-To: mailing list commits@ambari.apache.org Received: (qmail 87163 invoked by uid 99); 22 Aug 2016 13:36:58 -0000 Received: from git1-us-west.apache.org (HELO git1-us-west.apache.org) (140.211.11.23) by apache.org (qpsmtpd/0.29) with ESMTP; Mon, 22 Aug 2016 13:36:58 +0000 Received: by git1-us-west.apache.org (ASF Mail Server at git1-us-west.apache.org, from userid 33) id EB81AE03E8; Mon, 22 Aug 2016 13:36:57 +0000 (UTC) Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit From: oleewere@apache.org To: commits@ambari.apache.org Date: Mon, 22 Aug 2016 13:37:41 -0000 Message-Id: <2e604c3168374d6bbcc6dbc1ba2638f5@git.apache.org> In-Reply-To: <349079adae024981a7937339769ff969@git.apache.org> References: <349079adae024981a7937339769ff969@git.apache.org> X-Mailer: ASF-Git Admin Mailer Subject: [46/55] [abbrv] ambari git commit: AMBARI-18079. Update the date range picker with the latest version i.e 2.1.24 (Dharmesh Makwana via oleewere) archived-at: Mon, 22 Aug 2016 13:37:05 -0000 AMBARI-18079. Update the date range picker with the latest version i.e 2.1.24 (Dharmesh Makwana via oleewere) Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/74b1952f Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/74b1952f Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/74b1952f Branch: refs/heads/branch-dev-logsearch Commit: 74b1952fff351943d59307518b99c160eece2ed1 Parents: 650e6c4 Author: oleewere Authored: Thu Aug 18 13:17:30 2016 +0200 Committer: oleewere Committed: Mon Aug 22 12:56:02 2016 +0200 ---------------------------------------------------------------------- .../daterangepicker/css/daterangepicker.css | 555 +++++++++++-------- .../other/daterangepicker/js/daterangepicker.js | 552 +++++++++++++----- .../scripts/views/common/DatePickerLayout.js | 23 +- .../scripts/views/graphs/GraphLayoutView.js | 3 +- .../troubleshoot/TroubleShootLayoutView.js | 2 +- .../src/main/webapp/styles/style.css | 11 +- 6 files changed, 736 insertions(+), 410 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/74b1952f/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/daterangepicker/css/daterangepicker.css ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/daterangepicker/css/daterangepicker.css b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/daterangepicker/css/daterangepicker.css index f2ff53d..7f1ef54 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/daterangepicker/css/daterangepicker.css +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/daterangepicker/css/daterangepicker.css @@ -1,336 +1,415 @@ -/** -* A stylesheet for use with Bootstrap 3.x -* @author: Dan Grossman http://www.dangrossman.info/ -* @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved. -* @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php -* @website: https://www.improvely.com/ -*/ +.daterangepicker { + position: absolute; + color: inherit; + background: #fff; + border-radius: 4px; + width: 278px; + padding: 4px; + margin-top: 1px; + top: 100px; + left: 20px; + /* Calendars */ +} + +.daterangepicker:before, +.daterangepicker:after { + position: absolute; + display: inline-block; + border-bottom-color: rgba(0, 0, 0, 0.2); + content: ''; +} -/* Container Appearance */ +.daterangepicker:before { + top: -7px; + border-right: 7px solid transparent; + border-left: 7px solid transparent; + border-bottom: 7px solid #ccc; +} -.daterangepicker { - position: absolute; - background: #fff; - top: 100px; - left: 20px; - padding: 4px; - margin-top: 1px; - border-radius: 4px; +.daterangepicker:after { + top: -6px; + border-right: 6px solid transparent; + border-bottom: 6px solid #fff; + border-left: 6px solid transparent; } .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: ''; + right: 9px; } .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: ''; + right: 10px; } .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: ''; + left: 0; + right: 0; + width: 0; + margin-left: auto; + margin-right: auto; } .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: ''; + left: 0; + right: 0; + width: 0; + margin-left: auto; + margin-right: auto; } .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: ''; + left: 9px; } .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: ''; + left: 10px; } -.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.dropup { + margin-top: -5px; } -.daterangepicker.dropdown-menu { - max-width: none; - z-index: 3000; +.daterangepicker.dropup:before { + top: initial; + bottom: -7px; + border-bottom: initial; + border-top: 7px solid #ccc; } -.daterangepicker .ranges, .daterangepicker .calendar { - float: left; +.daterangepicker.dropup:after { + top: initial; + bottom: -6px; + border-bottom: initial; + border-top: 6px solid #fff; } -.daterangepicker.single .ranges, .daterangepicker.single .calendar { - float: none; +.daterangepicker.dropdown-menu { + max-width: none; + z-index: 3001; } -.daterangepicker .ranges { - margin: 4px; - text-align: left; +.daterangepicker.single .ranges, +.daterangepicker.single .calendar { + float: none; } -.daterangepicker .calendar { - display: none; - max-width: 270px; +.daterangepicker.show-calendar .calendar { + display: block; } -.daterangepicker.show-calendar .calendar { - display: block; +.daterangepicker .calendar { + display: none; + max-width: 270px; + margin: 4px; } .daterangepicker .calendar.single .calendar-table { - border: none; + border: none; } -/* Calendars */ - -.daterangepicker .calendar th, .daterangepicker .calendar td { - white-space: nowrap; - text-align: center; - min-width: 32px; +.daterangepicker .calendar th, +.daterangepicker .calendar td { + white-space: nowrap; + text-align: center; + min-width: 32px; } .daterangepicker .calendar-table { - border: 1px solid #ddd; - padding: 4px; - border-radius: 4px; - background: #fff; -} - -.daterangepicker .calendar.left .calendar-table { - border-right: none; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} - -.daterangepicker .calendar.right .calendar-table { - border-left: none; - border-top-left-radius: 0; - border-bottom-left-radius: 0; -} - -.daterangepicker .calendar.left { - margin: 4px 0 4px 4px; -} - -.daterangepicker .calendar.right { - margin: 4px 4px 4px 0; -} - -.daterangepicker .calendar.left .calendar-table { - padding-right: 12px; + border: 1px solid #fff; + padding: 4px; + border-radius: 4px; + background: #fff; } .daterangepicker table { - width: 100%; - margin: 0; + width: 100%; + margin: 0; } -.daterangepicker td, .daterangepicker th { - text-align: center; - width: 20px; - height: 20px; - border-radius: 4px; - white-space: nowrap; - cursor: pointer; +.daterangepicker td, +.daterangepicker th { + text-align: center; + width: 20px; + height: 20px; + border-radius: 4px; + border: 1px solid transparent; + white-space: nowrap; + cursor: pointer; } -.daterangepicker td.off { - color: #999; +.daterangepicker td.available:hover, +.daterangepicker th.available:hover { + background-color: #eee; + border-color: transparent; + color: inherit; } -.daterangepicker td.disabled, .daterangepicker option.disabled { - color: #999; +.daterangepicker td.week, +.daterangepicker th.week { + font-size: 80%; + color: #ccc; } -.daterangepicker td.available:hover, .daterangepicker th.available:hover { - background: #eee; +.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: #ebf4f8; - border-radius: 0; + background-color: #ebf4f8; + border-color: transparent; + color: #000; + border-radius: 0; } .daterangepicker td.start-date { - border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; } .daterangepicker td.end-date { - border-radius: 0 4px 4px 0; + 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: #3071a9; - color: #fff; + border-radius: 4px; } -.daterangepicker td.week, .daterangepicker th.week { - font-size: 80%; - color: #ccc; +.daterangepicker td.active, +.daterangepicker td.active:hover { + background-color: #357ebd; + border-color: transparent; + color: #fff; } -.daterangepicker select.monthselect, .daterangepicker select.yearselect { - font-size: 12px; - padding: 1px; - height: auto; - margin: 0; - cursor: default; +.daterangepicker th.month { + width: auto; } -.daterangepicker select.monthselect { - margin-right: 2%; - width: 56%; +.daterangepicker td.disabled, +.daterangepicker option.disabled { + color: #999; + cursor: not-allowed; + text-decoration: line-through; } +.daterangepicker select.monthselect, .daterangepicker select.yearselect { - width: 40%; + font-size: 12px; + padding: 1px; + height: auto; + margin: 0; + cursor: default; } -.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { - width: 50px; - margin-bottom: 0; +.daterangepicker select.monthselect { + margin-right: 2%; + width: 56%; } -.daterangepicker th.month { - width: auto; +.daterangepicker select.yearselect { + width: 40%; } -/* Text Input Above Each Calendar */ - -.daterangepicker .input-mini { - border: 1px solid #ccc; - border-radius: 4px; - color: #555; - display: block; - height: 30px; - line-height: 30px; - vertical-align: middle; - margin: 0 0 5px 0; - padding: 0 6px 0 28px; - width: 100%; +.daterangepicker select.hourselect, +.daterangepicker select.minuteselect, +.daterangepicker select.secondselect, +.daterangepicker select.ampmselect { + width: 50px; + margin-bottom: 0; } -.daterangepicker .daterangepicker_input i { - position: absolute; - left: 8px; - top: 8px; +.daterangepicker .input-mini { + border: 1px solid #ccc; + border-radius: 4px; + color: #555; + height: 30px; + line-height: 30px; + display: block; + vertical-align: middle; + margin: 0 0 5px 0; + padding: 0 6px 0 28px; + width: 100%; } -.daterangepicker .left .daterangepicker_input { - padding-right: 12px; +.daterangepicker .input-mini.active { + border: 1px solid #08c; + border-radius: 4px; } .daterangepicker .daterangepicker_input { - position: relative; -} - -/* Time Picker */ - -.daterangepicker .calendar-time { - text-align: center; - margin: 5px auto; - line-height: 30px; - position: relative; - padding-left: 28px; + position: relative; } -.daterangepicker .calendar-time select.disabled { - color: #ccc; - cursor: not-allowed; +.daterangepicker .daterangepicker_input i { + position: absolute; + left: 8px; + top: 8px; } -/* Predefined Ranges */ - -.daterangepicker .ranges { - font-size: 11px; +.daterangepicker.rtl .input-mini { + padding-right: 28px; + padding-left: 6px; } -.daterangepicker .ranges ul { - list-style: none; - margin: 0; - padding: 0; - width: 160px; +.daterangepicker.rtl .daterangepicker_input i { + left: auto; + right: 8px; } -.daterangepicker .ranges li { - font-size: 13px; - background: #f5f5f5; - border: 1px solid #f5f5f5; - color: #08c; - padding: 3px 12px; - margin-bottom: 8px; - border-radius: 5px; - cursor: pointer; +.daterangepicker .calendar-time { + text-align: center; + margin: 5px auto; + line-height: 30px; + position: relative; + padding-left: 28px; } -.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { - background: #08c; - border: 1px solid #08c; - color: #fff; +.daterangepicker .calendar-time select.disabled { + color: #ccc; + cursor: not-allowed; +} + +.ranges { + font-size: 11px; + float: none; + margin: 4px; + text-align: left; +} + +.ranges ul { + list-style: none; + margin: 0 auto; + padding: 0; + width: 100%; +} + +.ranges li { + font-size: 13px; + background: #f5f5f5; + border: 1px solid #f5f5f5; + border-radius: 4px; + color: #08c; + padding: 3px 12px; + margin-bottom: 8px; + cursor: pointer; +} + +.ranges li:hover { + background: #08c; + border: 1px solid #08c; + color: #fff; +} + +.ranges li.active { + background: #08c; + border: 1px solid #08c; + color: #fff; +} + + +/* Larger Screen Styling */ + +@media (min-width: 564px) { + .daterangepicker { + width: auto; + } + .daterangepicker .ranges ul { + width: 160px; + } + .daterangepicker.single .ranges ul { + width: 100%; + } + .daterangepicker.single .calendar.left { + clear: none; + } + .daterangepicker.single.ltr .ranges, + .daterangepicker.single.ltr .calendar { + float: left; + } + .daterangepicker.single.rtl .ranges, + .daterangepicker.single.rtl .calendar { + float: right; + } + .daterangepicker.ltr { + direction: ltr; + text-align: left; + } + .daterangepicker.ltr .calendar.left { + clear: left; + margin-right: 0; + } + .daterangepicker.ltr .calendar.left .calendar-table { + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .daterangepicker.ltr .calendar.right { + margin-left: 0; + } + .daterangepicker.ltr .calendar.right .calendar-table { + border-left: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .daterangepicker.ltr .left .daterangepicker_input { + padding-right: 12px; + } + .daterangepicker.ltr .calendar.left .calendar-table { + padding-right: 12px; + } + .daterangepicker.ltr .ranges, + .daterangepicker.ltr .calendar { + float: left; + } + .daterangepicker.rtl { + direction: rtl; + text-align: right; + } + .daterangepicker.rtl .calendar.left { + clear: right; + margin-left: 0; + } + .daterangepicker.rtl .calendar.left .calendar-table { + border-left: none; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .daterangepicker.rtl .calendar.right { + margin-right: 0; + } + .daterangepicker.rtl .calendar.right .calendar-table { + border-right: none; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + .daterangepicker.rtl .left .daterangepicker_input { + padding-left: 12px; + } + .daterangepicker.rtl .calendar.left .calendar-table { + padding-left: 12px; + } + .daterangepicker.rtl .ranges, + .daterangepicker.rtl .calendar { + text-align: right; + float: right; + } +} + +@media (min-width: 730px) { + .daterangepicker .ranges { + width: auto; + } + .daterangepicker.ltr .ranges { + float: left; + } + .daterangepicker.rtl .ranges { + float: right; + } + .daterangepicker .calendar.left { + clear: none !important; + } } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ambari/blob/74b1952f/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/daterangepicker/js/daterangepicker.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/daterangepicker/js/daterangepicker.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/daterangepicker/js/daterangepicker.js index 778af8d..04798c6 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/daterangepicker/js/daterangepicker.js +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/libs/other/daterangepicker/js/daterangepicker.js @@ -1,37 +1,31 @@ /** -* @version: 2.0 +* @version: 2.1.24 * @author: Dan Grossman http://www.dangrossman.info/ -* @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved. +* @copyright: Copyright (c) 2012-2016 Dan Grossman. All rights reserved. * @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php * @website: https://www.improvely.com/ */ - -(function(root, factory) { - - if (typeof define === 'function' && define.amd) { - define(['moment', 'jquery', 'exports'], function(momentjs, $, exports) { - root.daterangepicker = factory(root, exports, momentjs, $); - }); - - } else if (typeof exports !== 'undefined') { - var momentjs = require('moment'); - var jQuery; - try { - jQuery = require('jquery'); - } catch (err) { - jQuery = window.jQuery; - if (!jQuery) throw new Error('jQuery dependnecy not found'); +// Follow the UMD template https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js +(function (root, factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Make globaly available as well + define(['moment', 'jquery'], function (moment, jquery) { + return (root.daterangepicker = factory(moment, jquery)); + }); + } else if (typeof module === 'object' && module.exports) { + // Node / Browserify + //isomorphic issue + var jQuery = (typeof window != 'undefined') ? window.jQuery : undefined; + if (!jQuery) { + jQuery = require('jquery'); + if (!jQuery.fn) jQuery.fn = {}; + } + module.exports = factory(require('moment'), jQuery); + } else { + // Browser globals + root.daterangepicker = factory(root.moment, root.jQuery); } - - factory(root, exports, momentjs, jQuery); - - // Finally, as a browser global. - } else { - root.daterangepicker = factory(root, {}, root.moment || moment, (root.jQuery || root.Zepto || root.ender || root.$)); - } - -}(this, function(root, daterangepicker, moment, $) { - +}(this, function(moment, $) { var DateRangePicker = function(element, options, cb) { //default settings for options @@ -39,7 +33,6 @@ this.element = $(element); this.startDate = moment().startOf('day'); this.endDate = moment().endOf('day'); - this.timeZone = moment().utcOffset(); this.minDate = false; this.maxDate = false; this.dateLimit = false; @@ -47,12 +40,16 @@ this.singleDatePicker = false; this.showDropdowns = false; this.showWeekNumbers = false; + this.showISOWeekNumbers = false; + this.showCustomRangeLabel = true; this.timePicker = false; this.timePicker24Hour = false; this.timePickerIncrement = 1; this.timePickerSeconds = false; + this.linkedCalendars = true; + this.autoUpdateInput = true; + this.alwaysShowCalendars = false; this.ranges = {}; - this.viewClass =""; this.opens = 'right'; if (this.element.hasClass('pull-right')) @@ -67,6 +64,7 @@ this.cancelClass = 'btn-default'; this.locale = { + direction: 'ltr', format: 'MM/DD/YYYY', separator: ' - ', applyLabel: 'Apply', @@ -75,7 +73,7 @@ customRangeLabel: 'Custom Range', daysOfWeek: moment.weekdaysMin(), monthNames: moment.monthsShort(), - firstDay: moment.localeData()._week.dow + firstDay: moment.localeData().firstDayOfWeek() }; this.callback = function() { }; @@ -94,13 +92,13 @@ options = $.extend(this.element.data(), options); //html template for the picker UI - if (typeof options.template !== 'string') - options.template = '
' + + if (typeof options.template !== 'string' && !(options.template instanceof $)) + options.template = '
' + '
' + '
' + - '' + + '' + '' + - '
' + + '
' + '
' + '' + '
' + @@ -109,9 +107,9 @@ '
' + '
' + '
' + - '' + + '' + '' + - '
' + + '
' + '
' + '' + '
' + @@ -135,6 +133,9 @@ if (typeof options.locale === 'object') { + if (typeof options.locale.direction === 'string') + this.locale.direction = options.locale.direction; + if (typeof options.locale.format === 'string') this.locale.format = options.locale.format; @@ -163,6 +164,7 @@ this.locale.customRangeLabel = options.locale.customRangeLabel; } + this.container.addClass(this.locale.direction); if (typeof options.startDate === 'string') this.startDate = moment(options.startDate, this.locale.format); @@ -188,6 +190,14 @@ if (typeof options.maxDate === 'object') this.maxDate = moment(options.maxDate); + // sanity check for bad options + if (this.minDate && this.startDate.isBefore(this.minDate)) + this.startDate = this.minDate.clone(); + + // sanity check for bad options + if (this.maxDate && this.endDate.isAfter(this.maxDate)) + this.endDate = this.maxDate.clone(); + if (typeof options.applyClass === 'string') this.applyClass = options.applyClass; @@ -206,6 +216,9 @@ if (typeof options.showWeekNumbers === 'boolean') this.showWeekNumbers = options.showWeekNumbers; + if (typeof options.showISOWeekNumbers === 'boolean') + this.showISOWeekNumbers = options.showISOWeekNumbers; + if (typeof options.buttonClasses === 'string') this.buttonClasses = options.buttonClasses; @@ -214,7 +227,10 @@ if (typeof options.showDropdowns === 'boolean') this.showDropdowns = options.showDropdowns; - + + if (typeof options.showCustomRangeLabel === 'boolean') + this.showCustomRangeLabel = options.showCustomRangeLabel; + if (typeof options.singleDatePicker === 'boolean') { this.singleDatePicker = options.singleDatePicker; if (this.singleDatePicker) @@ -236,6 +252,21 @@ if (typeof options.autoApply === 'boolean') this.autoApply = options.autoApply; + if (typeof options.autoUpdateInput === 'boolean') + this.autoUpdateInput = options.autoUpdateInput; + + if (typeof options.linkedCalendars === 'boolean') + this.linkedCalendars = options.linkedCalendars; + + if (typeof options.isInvalidDate === 'function') + this.isInvalidDate = options.isInvalidDate; + + if (typeof options.isCustomDate === 'function') + this.isCustomDate = options.isCustomDate; + + if (typeof options.alwaysShowCalendars === 'boolean') + this.alwaysShowCalendars = options.alwaysShowCalendars; + // update day names order to firstDay if (this.locale.firstDay != 0) { var iterator = this.locale.firstDay; @@ -269,19 +300,6 @@ } } - // bind the time zone used to build the calendar to either the timeZone passed in through the options or the zone of the startDate (which will be the local time zone by default) - if (typeof options.timeZone === 'string' || typeof options.timeZone === 'number') { - if (typeof options.timeZone === 'string' && typeof moment.tz !== 'undefined') { - this.timeZone = moment.tz.zone(options.timeZone).parse(new Date) * -1; // Offset is positive if the timezone is behind UTC and negative if it is ahead. - } else { - this.timeZone = options.timeZone; - } - this.startDate.utcOffset(this.timeZone); - this.endDate.utcOffset(this.timeZone); - } else { - this.timeZone = moment(this.startDate).utcOffset(); - } - if (typeof options.ranges === 'object') { for (range in options.ranges) { @@ -301,26 +319,33 @@ start = this.minDate.clone(); var maxDate = this.maxDate; - if (this.dateLimit && start.clone().add(this.dateLimit).isAfter(maxDate)) + if (this.dateLimit && maxDate && start.clone().add(this.dateLimit).isAfter(maxDate)) maxDate = start.clone().add(this.dateLimit); if (maxDate && end.isAfter(maxDate)) end = maxDate.clone(); - // If the end of the range is before the minimum or the start of the range is + // If the end of the range is before the minimum or the start of the range is // after the maximum, don't display this range option at all. - if ((this.minDate && end.isBefore(this.minDate)) || (maxDate && start.isAfter(maxDate))) + if ((this.minDate && end.isBefore(this.minDate, this.timepicker ? 'minute' : 'day')) + || (maxDate && start.isAfter(maxDate, this.timepicker ? 'minute' : 'day'))) continue; - this.ranges[range] = [start, end]; + //Support unicode chars in the range names. + var elem = document.createElement('textarea'); + elem.innerHTML = range; + var rangeHtml = elem.value; + + this.ranges[rangeHtml] = [start, end]; } var list = '
    '; for (range in this.ranges) { - list += '
  • ' + range + '
    • '; + list += '
  • ' + range + '
    • '; + } + if (this.showCustomRangeLabel) { + list += '
  • ' + this.locale.customRangeLabel + '
    • '; } - list += '
  • ' + this.locale.customRangeLabel + '
    • '; list += '
'; - this.container.find('.ranges ul').remove(); this.container.find('.ranges').prepend(list); } @@ -349,17 +374,24 @@ this.container.find('.calendar.left').addClass('single'); this.container.find('.calendar.left').show(); this.container.find('.calendar.right').hide(); - this.container.find('.daterangepicker_input input, .daterangepicker_input i').hide(); - if (!this.timePicker) { + this.container.find('.daterangepicker_input input, .daterangepicker_input > i').hide(); + if (this.timePicker) { + this.container.find('.ranges ul').hide(); + } else { this.container.find('.ranges').hide(); } } - if (typeof options.ranges === 'undefined' && !this.singleDatePicker) { + if ((typeof options.ranges === 'undefined' && !this.singleDatePicker) || this.alwaysShowCalendars) { this.container.addClass('show-calendar'); } - this.container.removeClass('opensleft opensright').addClass('opens' + this.opens); + this.container.addClass('opens' + this.opens); + + //swap the position of the predefined ranges if opens right + if (typeof options.ranges !== 'undefined' && this.opens == 'right') { + this.container.find('.ranges').prependTo( this.container.find('.calendar.left').parent() ); + } //apply CSS classes and labels to buttons this.container.find('.applyBtn, .cancelBtn').addClass(this.buttonClasses); @@ -377,28 +409,29 @@ this.container.find('.calendar') .on('click.daterangepicker', '.prev', $.proxy(this.clickPrev, this)) .on('click.daterangepicker', '.next', $.proxy(this.clickNext, this)) - .on('click.daterangepicker', 'td.available', $.proxy(this.clickDate, this)) + .on('mousedown.daterangepicker', 'td.available', $.proxy(this.clickDate, this)) .on('mouseenter.daterangepicker', 'td.available', $.proxy(this.hoverDate, this)) .on('mouseleave.daterangepicker', 'td.available', $.proxy(this.updateFormInputs, this)) .on('change.daterangepicker', 'select.yearselect', $.proxy(this.monthOrYearChanged, this)) .on('change.daterangepicker', 'select.monthselect', $.proxy(this.monthOrYearChanged, this)) .on('change.daterangepicker', 'select.hourselect,select.minuteselect,select.secondselect,select.ampmselect', $.proxy(this.timeChanged, this)) .on('click.daterangepicker', '.daterangepicker_input input', $.proxy(this.showCalendars, this)) - .on('change.daterangepicker', '.daterangepicker_input input', $.proxy(this.formInputsChanged, this)) - .on('change.daterangepicker', '.daterangepicker_input input', $.proxy(this.updateFormInputs, this)); + .on('focus.daterangepicker', '.daterangepicker_input input', $.proxy(this.formInputsFocused, this)) + .on('blur.daterangepicker', '.daterangepicker_input input', $.proxy(this.formInputsBlurred, this)) + .on('change.daterangepicker', '.daterangepicker_input input', $.proxy(this.formInputsChanged, this)); this.container.find('.ranges') .on('click.daterangepicker', 'button.applyBtn', $.proxy(this.clickApply, this)) .on('click.daterangepicker', 'button.cancelBtn', $.proxy(this.clickCancel, this)) .on('click.daterangepicker', 'li', $.proxy(this.clickRange, this)) - /* .on('mouseenter.daterangepicker', 'li', $.proxy(this.hoverRange, this)) - .on('mouseleave.daterangepicker', 'li', $.proxy(this.updateFormInputs, this));*/ + .on('mouseenter.daterangepicker', 'li', $.proxy(this.hoverRange, this)) + .on('mouseleave.daterangepicker', 'li', $.proxy(this.updateFormInputs, this)); - if (this.element.is('input')) { + if (this.element.is('input') || this.element.is('button')) { this.element.on({ 'click.daterangepicker': $.proxy(this.show, this), 'focus.daterangepicker': $.proxy(this.show, this), - 'keyup.daterangepicker': $.proxy(this.controlChanged, this), + 'keyup.daterangepicker': $.proxy(this.elementChanged, this), 'keydown.daterangepicker': $.proxy(this.keydown, this) }); } else { @@ -409,10 +442,10 @@ // if attached to a text input, set the initial value // - if (this.element.is('input') && !this.singleDatePicker) { + if (this.element.is('input') && !this.singleDatePicker && this.autoUpdateInput) { this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format)); this.element.trigger('change'); - } else if (this.element.is('input')) { + } else if (this.element.is('input') && this.autoUpdateInput) { this.element.val(this.startDate.format(this.locale.format)); this.element.trigger('change'); } @@ -425,7 +458,7 @@ setStartDate: function(startDate) { if (typeof startDate === 'string') - this.startDate = moment(startDate, this.locale.format).utcOffset(this.timeZone); + this.startDate = moment(startDate, this.locale.format); if (typeof startDate === 'object') this.startDate = moment(startDate); @@ -436,18 +469,27 @@ if (this.timePicker && this.timePickerIncrement) this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); - if (this.minDate && this.startDate.isBefore(this.minDate)) + if (this.minDate && this.startDate.isBefore(this.minDate)) { this.startDate = this.minDate; + if (this.timePicker && this.timePickerIncrement) + this.startDate.minute(Math.round(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); + } - if (this.maxDate && this.startDate.isAfter(this.maxDate)) + if (this.maxDate && this.startDate.isAfter(this.maxDate)) { this.startDate = this.maxDate; + if (this.timePicker && this.timePickerIncrement) + this.startDate.minute(Math.floor(this.startDate.minute() / this.timePickerIncrement) * this.timePickerIncrement); + } + + if (!this.isShowing) + this.updateElement(); this.updateMonthsInView(); }, setEndDate: function(endDate) { if (typeof endDate === 'string') - this.endDate = moment(endDate, this.locale.format).utcOffset(this.timeZone); + this.endDate = moment(endDate, this.locale.format); if (typeof endDate === 'object') this.endDate = moment(endDate); @@ -467,9 +509,22 @@ if (this.dateLimit && this.startDate.clone().add(this.dateLimit).isBefore(this.endDate)) this.endDate = this.startDate.clone().add(this.dateLimit); + this.previousRightTime = this.endDate.clone(); + + if (!this.isShowing) + this.updateElement(); + this.updateMonthsInView(); }, + isInvalidDate: function() { + return false; + }, + + isCustomDate: function() { + return false; + }, + updateView: function() { if (this.timePicker) { this.renderTimePicker('left'); @@ -480,6 +535,13 @@ this.container.find('.right .calendar-time select').removeAttr('disabled').removeClass('disabled'); } } + if (this.endDate) { + this.container.find('input[name="daterangepicker_end"]').removeClass('active'); + this.container.find('input[name="daterangepicker_start"]').addClass('active'); + } else { + this.container.find('input[name="daterangepicker_end"]').addClass('active'); + this.container.find('input[name="daterangepicker_start"]').removeClass('active'); + } this.updateMonthsInView(); this.updateCalendars(); this.updateFormInputs(); @@ -487,19 +549,33 @@ updateMonthsInView: function() { if (this.endDate) { - this.leftCalendar.month = this.startDate.clone().day(1); - if (this.endDate.month() != this.startDate.month() || this.endDate.year() != this.startDate.year()) { - this.rightCalendar.month = this.endDate.clone().day(1); + + //if both dates are visible already, do nothing + if (!this.singleDatePicker && this.leftCalendar.month && this.rightCalendar.month && + (this.startDate.format('YYYY-MM') == this.leftCalendar.month.format('YYYY-MM') || this.startDate.format('YYYY-MM') == this.rightCalendar.month.format('YYYY-MM')) + && + (this.endDate.format('YYYY-MM') == this.leftCalendar.month.format('YYYY-MM') || this.endDate.format('YYYY-MM') == this.rightCalendar.month.format('YYYY-MM')) + ) { + return; + } + + this.leftCalendar.month = this.startDate.clone().date(2); + if (!this.linkedCalendars && (this.endDate.month() != this.startDate.month() || this.endDate.year() != this.startDate.year())) { + this.rightCalendar.month = this.endDate.clone().date(2); } else { - this.rightCalendar.month = this.startDate.clone().day(1).add(1, 'month'); + this.rightCalendar.month = this.startDate.clone().date(2).add(1, 'month'); } + } else { if (this.leftCalendar.month.format('YYYY-MM') != this.startDate.format('YYYY-MM') && this.rightCalendar.month.format('YYYY-MM') != this.startDate.format('YYYY-MM')) { - console.log('here2'); - this.leftCalendar.month = this.startDate.clone().day(1); - this.rightCalendar.month = this.startDate.clone().day(1).add(1, 'month'); + this.leftCalendar.month = this.startDate.clone().date(2); + this.rightCalendar.month = this.startDate.clone().date(2).add(1, 'month'); } } + if (this.maxDate && this.linkedCalendars && !this.singleDatePicker && this.rightCalendar.month > this.maxDate) { + this.rightCalendar.month = this.maxDate.clone().date(2); + this.leftCalendar.month = this.maxDate.clone().date(2).subtract(1, 'month'); + } }, updateCalendars: function() { @@ -522,7 +598,7 @@ minute = parseInt(this.container.find('.right .minuteselect').val(), 10); second = this.timePickerSeconds ? parseInt(this.container.find('.right .secondselect').val(), 10) : 0; if (!this.timePicker24Hour) { - var ampm = this.container.find('.left .ampmselect').val(); + var ampm = this.container.find('.right .ampmselect').val(); if (ampm === 'PM' && hour < 12) hour += 12; if (ampm === 'AM' && hour === 12) @@ -540,28 +616,7 @@ this.container.find('.ranges li').removeClass('active'); if (this.endDate == null) return; - var customRange = true; - var i = 0; - for (var range in this.ranges) { - if (this.timePicker) { - if (this.startDate.isSame(this.ranges[range][0]) && this.endDate.isSame(this.ranges[range][1])) { - customRange = false; - this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')').addClass('active').html(); - } - } else { - //ignore times when comparing dates if time picker is not enabled - if (this.startDate.format('YYYY-MM-DD') == this.ranges[range][0].format('YYYY-MM-DD') && this.endDate.format('YYYY-MM-DD') == this.ranges[range][1].format('YYYY-MM-DD')) { - customRange = false; - this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')').addClass('active').html(); - } - } - i++; - } - if (customRange) { - this.chosenLabel = this.container.find('.ranges li:last').addClass('active').html(); - this.showCalendars(); - } - + this.calculateChosenLabel(); }, renderCalendar: function(side) { @@ -601,8 +656,7 @@ if (dayOfWeek == this.locale.firstDay) startDay = daysInLastMonth - 6; - // Possible patch for issue #626 https://github.com/dangrossman/bootstrap-daterangepicker/issues/626 - var curDate = moment([lastYear, lastMonth, startDay, 12, minute, second]); // .utcOffset(this.timeZone); + var curDate = moment([lastYear, lastMonth, startDay, 12, minute, second]); var col, row; for (var i = 0, col = 0, row = 0; i < 42; i++, col++, curDate = moment(curDate).add(24, 'hour')) { @@ -637,17 +691,18 @@ var minDate = side == 'left' ? this.minDate : this.startDate; var maxDate = this.maxDate; var selected = side == 'left' ? this.startDate : this.endDate; + var arrow = this.locale.direction == 'ltr' ? {left: 'chevron-left', right: 'chevron-right'} : {left: 'chevron-right', right: 'chevron-left'}; - html = ''; + var html = '
'; html += ''; html += ''; // add empty cell for week number - if (this.showWeekNumbers) + if (this.showWeekNumbers || this.showISOWeekNumbers) html += ''; - if (!minDate || minDate.isBefore(calendar.firstDay)) { - html += ''; + if ((!minDate || minDate.isBefore(calendar.firstDay)) && (!this.linkedCalendars || side == 'left')) { + html += ''; } else { html += ''; } @@ -668,6 +723,10 @@ monthHtml += ""; + } else { + monthHtml += ""; } } monthHtml += ""; @@ -684,8 +743,8 @@ } html += ''; - if (!maxDate || maxDate.isAfter(calendar.lastDay)) { - html += ''; + if ((!maxDate || maxDate.isAfter(calendar.lastDay)) && (!this.linkedCalendars || side == 'right' || this.singleDatePicker)) { + html += ''; } else { html += ''; } @@ -694,7 +753,7 @@ html += ''; // add week number label - if (this.showWeekNumbers) + if (this.showWeekNumbers || this.showISOWeekNumbers) html += ''; $.each(this.locale.daysOfWeek, function(index, dayOfWeek) { @@ -720,11 +779,13 @@ // add week number if (this.showWeekNumbers) html += ''; + else if (this.showISOWeekNumbers) + html += ''; for (var col = 0; col < 7; col++) { var classes = []; - + //highlight today's date if (calendar[row][col].isSame(new Date(), "day")) classes.push('today'); @@ -745,6 +806,10 @@ if (maxDate && calendar[row][col].isAfter(maxDate, 'day')) classes.push('off', 'disabled'); + //don't allow selection of date if a custom function decides it's invalid + if (this.isInvalidDate(calendar[row][col])) + classes.push('off', 'disabled'); + //highlight the currently selected start date if (calendar[row][col].format('YYYY-MM-DD') == this.startDate.format('YYYY-MM-DD')) classes.push('active', 'start-date'); @@ -757,8 +822,17 @@ if (this.endDate != null && calendar[row][col] > this.startDate && calendar[row][col] < this.endDate) classes.push('in-range'); + //apply custom classes for this date + var isCustom = this.isCustomDate(calendar[row][col]); + if (isCustom !== false) { + if (typeof isCustom === 'string') + classes.push(isCustom); + else + Array.prototype.push.apply(classes, isCustom); + } + var cname = '', disabled = false; - for (var i in classes) { + for (var i = 0; i < classes.length; i++) { cname += classes[i] + ' '; if (classes[i] == 'disabled') disabled = true; @@ -766,7 +840,7 @@ if (!disabled) cname += 'available'; - html += ''; + html += ''; } html += ''; @@ -780,8 +854,12 @@ }, renderTimePicker: function(side) { - - var selected, minDate, maxDate = this.maxDate; + + // Don't bother updating the time picker if it's currently disabled + // because an end date hasn't been clicked yet + if (side == 'right' && !this.endDate) return; + + var html, selected, minDate, maxDate = this.maxDate; if (this.dateLimit && (!this.maxDate || this.startDate.clone().add(this.dateLimit).isAfter(this.maxDate))) maxDate = this.startDate.clone().add(this.dateLimit); @@ -790,10 +868,35 @@ selected = this.startDate.clone(); minDate = this.minDate; } else if (side == 'right') { - selected = this.endDate ? this.endDate.clone() : this.startDate.clone(); + selected = this.endDate.clone(); minDate = this.startDate; + + //Preserve the time already selected + var timeSelector = this.container.find('.calendar.right .calendar-time div'); + if (!this.endDate && timeSelector.html() != '') { + + selected.hour(timeSelector.find('.hourselect option:selected').val() || selected.hour()); + selected.minute(timeSelector.find('.minuteselect option:selected').val() || selected.minute()); + selected.second(timeSelector.find('.secondselect option:selected').val() || selected.second()); + + if (!this.timePicker24Hour) { + var ampm = timeSelector.find('.ampmselect option:selected').val(); + if (ampm === 'PM' && selected.hour() < 12) + selected.hour(selected.hour() + 12); + if (ampm === 'AM' && selected.hour() === 12) + selected.hour(0); + } + + } + + if (selected.isBefore(this.startDate)) + selected = this.startDate.clone(); + + if (maxDate && selected.isAfter(maxDate)) + selected = maxDate.clone(); + } - + // // hours // @@ -912,6 +1015,11 @@ }, updateFormInputs: function() { + + //ignore mouse movements while an above-calendar text input has focus + if (this.container.find('input[name=daterangepicker_start]').is(":focus") || this.container.find('input[name=daterangepicker_end]').is(":focus")) + return; + this.container.find('input[name=daterangepicker_start]').val(this.startDate.format(this.locale.format)); if (this.endDate) this.container.find('input[name=daterangepicker_end]').val(this.endDate.format(this.locale.format)); @@ -921,6 +1029,7 @@ } else { this.container.find('button.applyBtn').attr('disabled', 'disabled'); } + }, move: function() { @@ -934,7 +1043,7 @@ }; parentRightEdge = this.parentEl[0].clientWidth + this.parentEl.offset().left; } - + if (this.drops == 'up') containerTop = this.element.offset().top - this.container.outerHeight() - parentOffset.top; else @@ -986,6 +1095,7 @@ // Create a click proxy that is private to this instance of datepicker, for unbinding this._outsideClickProxy = $.proxy(function(e) { this.outsideClick(e); }, this); + // Bind global datepicker mousedown for hiding and $(document) .on('mousedown.daterangepicker', this._outsideClickProxy) @@ -996,9 +1106,13 @@ // and also close when focus changes to outside the picker (eg. tabbing between controls) .on('focusin.daterangepicker', this._outsideClickProxy); + // Reposition the picker if the window is resized while it's open + $(window).on('resize.daterangepicker', $.proxy(function(e) { this.move(e); }, this)); + this.oldStartDate = this.startDate.clone(); this.oldEndDate = this.endDate.clone(); - + this.previousRightTime = this.endDate.clone(); + this.updateView(); this.container.show(); this.move(); @@ -1020,15 +1134,10 @@ this.callback(this.startDate, this.endDate, this.chosenLabel); //if picker is attached to a text input, update it - if (this.element.is('input') && !this.singleDatePicker) { - this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format)); - this.element.trigger('change'); - } else if (this.element.is('input')) { - this.element.val(this.startDate.format(this.locale.format)); - this.element.trigger('change'); - } + this.updateElement(); $(document).off('.daterangepicker'); + $(window).off('.daterangepicker'); this.container.hide(); this.element.trigger('hide.daterangepicker', this); this.isShowing = false; @@ -1054,6 +1163,7 @@ target.closest('.calendar-table').length ) return; this.hide(); + this.element.trigger('outsideClick.daterangepicker', this); }, showCalendars: function() { @@ -1068,7 +1178,13 @@ }, hoverRange: function(e) { - var label = e.target.innerHTML; + + //ignore mouse movements while an above-calendar text input has focus + if (this.container.find('input[name=daterangepicker_start]').is(":focus") || this.container.find('input[name=daterangepicker_end]').is(":focus")) + return; + + var label = e.target.getAttribute('data-range-key'); + if (label == this.locale.customRangeLabel) { this.updateView(); } else { @@ -1076,10 +1192,11 @@ this.container.find('input[name=daterangepicker_start]').val(dates[0].format(this.locale.format)); this.container.find('input[name=daterangepicker_end]').val(dates[1].format(this.locale.format)); } + }, clickRange: function(e) { - var label = e.target.innerHTML; + var label = e.target.getAttribute('data-range-key'); this.chosenLabel = label; if (label == this.locale.customRangeLabel) { this.showCalendars(); @@ -1093,8 +1210,9 @@ this.endDate.endOf('day'); } - this.hideCalendars(); - this.hide(); + if (!this.alwaysShowCalendars) + this.hideCalendars(); + this.clickApply(); } }, @@ -1102,6 +1220,8 @@ var cal = $(e.target).parents('.calendar'); if (cal.hasClass('left')) { this.leftCalendar.month.subtract(1, 'month'); + if (this.linkedCalendars) + this.rightCalendar.month.subtract(1, 'month'); } else { this.rightCalendar.month.subtract(1, 'month'); } @@ -1114,27 +1234,59 @@ this.leftCalendar.month.add(1, 'month'); } else { this.rightCalendar.month.add(1, 'month'); + if (this.linkedCalendars) + this.leftCalendar.month.add(1, 'month'); } this.updateCalendars(); }, hoverDate: function(e) { + //ignore mouse movements while an above-calendar text input has focus + //if (this.container.find('input[name=daterangepicker_start]').is(":focus") || this.container.find('input[name=daterangepicker_end]').is(":focus")) + // return; + //ignore dates that can't be selected if (!$(e.target).hasClass('available')) return; + //have the text inputs above calendars reflect the date being hovered over var title = $(e.target).attr('data-title'); var row = title.substr(1, 1); var col = title.substr(3, 1); var cal = $(e.target).parents('.calendar'); var date = cal.hasClass('left') ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col]; - if (this.endDate) { + if (this.endDate && !this.container.find('input[name=daterangepicker_start]').is(":focus")) { this.container.find('input[name=daterangepicker_start]').val(date.format(this.locale.format)); - } else { + } else if (!this.endDate && !this.container.find('input[name=daterangepicker_end]').is(":focus")) { this.container.find('input[name=daterangepicker_end]').val(date.format(this.locale.format)); } + //highlight the dates between the start date and the date being hovered as a potential end date + var leftCalendar = this.leftCalendar; + var rightCalendar = this.rightCalendar; + var startDate = this.startDate; + if (!this.endDate) { + this.container.find('.calendar td').each(function(index, el) { + + //skip week numbers, only look at dates + if ($(el).hasClass('week')) return; + + var title = $(el).attr('data-title'); + var row = title.substr(1, 1); + var col = title.substr(3, 1); + var cal = $(el).parents('.calendar'); + var dt = cal.hasClass('left') ? leftCalendar.calendar[row][col] : rightCalendar.calendar[row][col]; + + if ((dt.isAfter(startDate) && dt.isBefore(date)) || dt.isSame(date, 'day')) { + $(el).addClass('in-range'); + } else { + $(el).removeClass('in-range'); + } + + }); + } + }, clickDate: function(e) { @@ -1153,13 +1305,14 @@ // * if the time picker is enabled, apply the hour/minute/second from the select boxes to the clicked date // * if autoapply is enabled, and an end date was chosen, apply the selection // * if single date picker mode, and time picker isn't enabled, apply the selection immediately + // * if one of the inputs above the calendars was focused, cancel that manual input // - if (this.endDate || date.isBefore(this.startDate)) { + if (this.endDate || date.isBefore(this.startDate, 'day')) { //picking start if (this.timePicker) { var hour = parseInt(this.container.find('.left .hourselect').val(), 10); if (!this.timePicker24Hour) { - var ampm = cal.find('.ampmselect').val(); + var ampm = this.container.find('.left .ampmselect').val(); if (ampm === 'PM' && hour < 12) hour += 12; if (ampm === 'AM' && hour === 12) @@ -1171,7 +1324,11 @@ } this.endDate = null; this.setStartDate(date.clone()); - } else { + } else if (!this.endDate && date.isBefore(this.startDate)) { + //special case: clicking the same date for start/end, + //but the time of the end date is before the start date + this.setEndDate(this.startDate.clone()); + } else { // picking end if (this.timePicker) { var hour = parseInt(this.container.find('.right .hourselect').val(), 10); if (!this.timePicker24Hour) { @@ -1186,8 +1343,10 @@ date = date.clone().hour(hour).minute(minute).second(second); } this.setEndDate(date.clone()); - if (this.autoApply) - this.clickApply(); + if (this.autoApply) { + this.calculateChosenLabel(); + this.clickApply(); + } } if (this.singleDatePicker) { @@ -1198,6 +1357,35 @@ this.updateView(); + //This is to cancel the blur event handler if the mouse was in one of the inputs + e.stopPropagation(); + + }, + + calculateChosenLabel: function() { + var customRange = true; + var i = 0; + for (var range in this.ranges) { + if (this.timePicker) { + if (this.startDate.isSame(this.ranges[range][0]) && this.endDate.isSame(this.ranges[range][1])) { + customRange = false; + this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')').addClass('active').html(); + break; + } + } else { + //ignore times when comparing dates if time picker is not enabled + if (this.startDate.format('YYYY-MM-DD') == this.ranges[range][0].format('YYYY-MM-DD') && this.endDate.format('YYYY-MM-DD') == this.ranges[range][1].format('YYYY-MM-DD')) { + customRange = false; + this.chosenLabel = this.container.find('.ranges li:eq(' + i + ')').addClass('active').html(); + break; + } + } + i++; + } + if (customRange && this.showCustomRangeLabel) { + this.chosenLabel = this.container.find('.ranges li:last').addClass('active').html(); + this.showCalendars(); + } }, clickApply: function(e) { @@ -1242,7 +1430,15 @@ } } - this[leftOrRight+'Calendar'].month.month(month).year(year); + if (isLeft) { + this.leftCalendar.month.month(month).year(year); + if (this.linkedCalendars) + this.rightCalendar.month = this.leftCalendar.month.clone().add(1, 'month'); + } else { + this.rightCalendar.month.month(month).year(year); + if (this.linkedCalendars) + this.leftCalendar.month = this.rightCalendar.month.clone().subtract(1, 'month'); + } this.updateCalendars(); }, @@ -1269,8 +1465,11 @@ start.minute(minute); start.second(second); this.setStartDate(start); - if (this.singleDatePicker) + if (this.singleDatePicker) { this.endDate = this.startDate.clone(); + } else if (this.endDate && this.endDate.format('YYYY-MM-DD') == start.format('YYYY-MM-DD') && this.endDate.isBefore(start)) { + this.setEndDate(start.clone()); + } } else if (this.endDate) { var end = this.endDate.clone(); end.hour(hour); @@ -1312,36 +1511,73 @@ } - this.updateCalendars(); - if (this.timePicker) { - this.renderTimePicker('left'); - this.renderTimePicker('right'); + this.updateView(); + }, + + formInputsFocused: function(e) { + + // Highlight the focused input + this.container.find('input[name="daterangepicker_start"], input[name="daterangepicker_end"]').removeClass('active'); + $(e.target).addClass('active'); + + // Set the state such that if the user goes back to using a mouse, + // the calendars are aware we're selecting the end of the range, not + // the start. This allows someone to edit the end of a date range without + // re-selecting the beginning, by clicking on the end date input then + // using the calendar. + var isRight = $(e.target).closest('.calendar').hasClass('right'); + if (isRight) { + this.endDate = null; + this.setStartDate(this.startDate.clone()); + this.updateView(); } + }, - controlChanged: function() { + formInputsBlurred: function(e) { + + // this function has one purpose right now: if you tab from the first + // text input to the second in the UI, the endDate is nulled so that + // you can click another, but if you tab out without clicking anything + // or changing the input value, the old endDate should be retained + + if (!this.endDate) { + var val = this.container.find('input[name="daterangepicker_end"]').val(); + var end = moment(val, this.locale.format); + if (end.isValid()) { + this.setEndDate(end); + this.updateView(); + } + } + + }, + + elementChanged: function() { if (!this.element.is('input')) return; if (!this.element.val().length) return; + if (this.element.val().length < this.locale.format.length) return; var dateString = this.element.val().split(this.locale.separator), start = null, end = null; if (dateString.length === 2) { - start = moment(dateString[0], this.locale.format).utcOffset(this.timeZone); - end = moment(dateString[1], this.locale.format).utcOffset(this.timeZone); + start = moment(dateString[0], this.locale.format); + end = moment(dateString[1], this.locale.format); } if (this.singleDatePicker || start === null || end === null) { - start = moment(this.element.val(), this.locale.format).utcOffset(this.timeZone); + start = moment(this.element.val(), this.locale.format); end = start; } + if (!start.isValid() || !end.isValid()) return; + this.setStartDate(start); this.setEndDate(end); this.updateView(); }, - + keydown: function(e) { //hide on tab or enter if ((e.keyCode === 9) || (e.keyCode === 13)) { @@ -1349,6 +1585,16 @@ } }, + updateElement: function() { + if (this.element.is('input') && !this.singleDatePicker && this.autoUpdateInput) { + this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format)); + this.element.trigger('change'); + } else if (this.element.is('input') && this.autoUpdateInput) { + this.element.val(this.startDate.format(this.locale.format)); + this.element.trigger('change'); + } + }, + remove: function() { this.container.remove(); this.element.off('.daterangepicker'); @@ -1367,4 +1613,6 @@ return this; }; + return DateRangePicker; + })); http://git-wip-us.apache.org/repos/asf/ambari/blob/74b1952f/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/DatePickerLayout.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/DatePickerLayout.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/DatePickerLayout.js index 1d7eccf..3beb776 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/DatePickerLayout.js +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/common/DatePickerLayout.js @@ -59,6 +59,7 @@ define(['require', this.bindEvents(); this.graphParams = {}; this.unit = this.params.unit ? this.params.unit : "+1HOUR"; + this.isEventTriggerdFromVent = false; }, bindEvents: function() { this.listenTo(this.vent, "tab:refresh", function(params) { @@ -68,6 +69,7 @@ define(['require', this.setValues(options); }, this); this.listenTo(this.vent, "date:click", function(options) { + this.isEventTriggerdFromVent = true; this.setValues(options); this.ui.dateRange.data('daterangepicker').clickApply(); }, this); @@ -165,6 +167,15 @@ define(['require', this.ui.dateRange.on('apply.daterangepicker ', function(ev, picker) { + if(! that.isEventTriggerdFromVent && !(_.isUndefined(picker.chosenLabel)) ){ + that.dateRangeLabel = picker.chosenLabel; + }else{ + that.isEventTriggerdFromVent = false; + } + if (that.dateRangeLabel !== "Custom Range") { + var last1Hour = that.dateUtil.getRelativeDateFromString(that.dateRangeLabel); + that.setDateText(last1Hour[0], last1Hour[1]); + } that.ui.dateRangeTitle.html(that.dateRangeLabel); that.unit = that.checkDateRange(picker); var options = { @@ -178,7 +189,8 @@ define(['require', }); this.ui.dateRange.on('show.daterangepicker', function(ev, picker) { elem.find('li').removeClass('active'); - elem.find('li:contains(' + that.dateRangeLabel + ')').addClass('active') + elem.find('li:contains(' + that.dateRangeLabel + ')').addClass('active'); + picker.chosenLabel = that.dateRangeLabel; }); this.ui.dateRange.on('hide.daterangepicker', function(ev, picker) { that.pickerOpend = true @@ -196,15 +208,6 @@ define(['require', that.ui.dateRange.data('daterangepicker').clickApply(); }); - - elem.on("click", '.ranges ul li', function(e) { - that.dateRangeLabel = $(this).text(); - if (that.dateRangeLabel !== "Custom Range") { - var last1Hour = that.dateUtil.getRelativeDateFromString(that.dateRangeLabel); - that.setDateText(last1Hour[0], last1Hour[1]); - that.ui.dateRange.data('daterangepicker').clickApply(); - } - }); }, checkDateRange: function(picker) { return this.dateUtil.calculateUnit(picker) http://git-wip-us.apache.org/repos/asf/ambari/blob/74b1952f/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js index e2b2457..0085f06 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/graphs/GraphLayoutView.js @@ -205,7 +205,8 @@ define(['require', parentEl: that.$el, fetch: true, rangeLabel: true, - width: '55%' + datePickerPosition : "left", + width: '65%' })); }); }, http://git-wip-us.apache.org/repos/asf/ambari/blob/74b1952f/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/troubleshoot/TroubleShootLayoutView.js ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/troubleshoot/TroubleShootLayoutView.js b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/troubleshoot/TroubleShootLayoutView.js index 3ed84b3..c1655f0 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/troubleshoot/TroubleShootLayoutView.js +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/scripts/views/troubleshoot/TroubleShootLayoutView.js @@ -275,7 +275,7 @@ define(['backbone', hideFireButton : false, buttonLabel : "Apply", parentEl: that.$el.find(".row").first(), - datePickerPosition : "right" + datePickerPosition : "left" })); }); }, http://git-wip-us.apache.org/repos/asf/ambari/blob/74b1952f/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/style.css ---------------------------------------------------------------------- diff --git a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/style.css b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/style.css index 45e9144..240cc4d 100644 --- a/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/style.css +++ b/ambari-logsearch/ambari-logsearch-portal/src/main/webapp/styles/style.css @@ -2910,6 +2910,7 @@ td.filterName { content: ""; display: table; } + table.backgrid{ overflow: auto !important; } @@ -2926,12 +2927,6 @@ button.defaultCancelBtn{ color: #333333 !important; background-color: #ffffff; } -ul.user-profile{ - list-style: none; - margin: 0; - -webkit-padding-start: 0; -} -ul.user-profile i{ - font-size: 26px; - margin-right: 20px; +.comparisonTab .daterangepicker .ranges{ + float: right !important; } \ No newline at end of file
' + dateHtml + '
' + this.locale.weekLabel + '' + calendar[row][0].week() + '' + calendar[row][0].isoWeek() + '' + calendar[row][col].date() + '' + calendar[row][col].date() + '