From b226dfd65377985b7b4797edd9f01c68493c0447 Mon Sep 17 00:00:00 2001 From: ma7payne Date: Wed, 14 Jun 2023 15:48:33 -0300 Subject: [PATCH] =?UTF-8?q?feat(plex):=20implementa=20nuevo=20selector=20d?= =?UTF-8?q?e=20a=C3=B1os?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bootstrap-material-datetimepicker.scss | 90 +- .../bootstrap-material-datetimepicker.ts | 2246 ++++++++++------- src/lib/datetime/datetime.component.ts | 3 +- src/lib/table/table.component.ts | 10 - 4 files changed, 1350 insertions(+), 999 deletions(-) diff --git a/src/lib/datetime/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.scss b/src/lib/datetime/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.scss index 85ec7e754..83c4e487e 100644 --- a/src/lib/datetime/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.scss +++ b/src/lib/datetime/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.scss @@ -25,16 +25,15 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke user-select: none; } -.dtp > .dtp-content { +.dtp>.dtp-content { background: #fff; max-width: 300px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); - max-height: 555px; position: relative; left: 50%; } -.dtp > .dtp-content > .dtp-date-view > header.dtp-header { +.dtp>.dtp-content>.dtp-date-view>header.dtp-header { background: $blue; color: #fff; text-align: center; @@ -49,7 +48,7 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke padding: 10px; } -.dtp div.dtp-date > div { +.dtp div.dtp-date>div { padding: 0; margin: 0; } @@ -71,6 +70,56 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke .dtp div.dtp-actual-year { font-size: 1.5em; color: #fff; + cursor: pointer; + width: 40%; + margin-top: 10px; + border: 1px solid white; + + .adi { + position: relative; + float: right; + margin-left: -50%; + } +} + +.dtp div.dtp-year-before, +.dtp div.dtp-year-after { + margin-top: 10px; +} + +.dtp-select-year-after { + margin-top: 10px; +} + +.dtp-select-year-range { + background-color: #bdbdbd; + border: none; + + &.before { + margin-bottom: 10px; + } + &.after { + margin-top: 10px; + margin-bottom: 20px; + } + + &:hover, &:focus { + color: #ffffff; + } +} + +.year-picker-item { + font-weight: 700; + cursor: pointer; + margin-bottom: 5px; + + &:last-child { + margin-bottom: 0; + } + + &:hover, &:focus { + color: #00a8e0; + } } .dtp div.dtp-picker { @@ -86,7 +135,7 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke .dtp div.dtp-picker-month { padding-bottom: 20px !important; - text-transform: uppercase!important; + text-transform: uppercase !important; } .dtp .dtp-close { @@ -95,11 +144,11 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke right: 1em; } -.dtp .dtp-close > a { +.dtp .dtp-close>a { color: #fff; } -.dtp .dtp-close > a > i { +.dtp .dtp-close>a>i { font-size: 1em; } @@ -110,24 +159,24 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke .dtp table.dtp-picker-days, .dtp table.dtp-picker-days tr, -.dtp table.dtp-picker-days tr > td { +.dtp table.dtp-picker-days tr>td { border: none; } -.dtp table.dtp-picker-days tr > td { +.dtp table.dtp-picker-days tr>td { font-weight: 700; font-size: .8em; text-align: center; padding: .5em .3em; } -.dtp table.dtp-picker-days tr > td > span.dtp-select-day { - color: #BDBDBD!important; +.dtp table.dtp-picker-days tr>td>span.dtp-select-day { + color: #BDBDBD !important; padding: .4em .5em .5em .6em; } -.dtp .dtp-picker-time > a, -.dtp table.dtp-picker-days tr > td > a { +.dtp .dtp-picker-time>a, +.dtp table.dtp-picker-days tr>td>a { color: #212121; text-decoration: none; padding: 0.3em 0.5em; @@ -136,19 +185,19 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke margin-top: 5px; } -.dtp table.dtp-picker-days tr > td > a.selected { +.dtp table.dtp-picker-days tr>td>a.selected { background: $teal; color: #fff; } -.dtp table.dtp-picker-days tr > th { +.dtp table.dtp-picker-days tr>th { color: #757575; text-align: center; font-weight: 700; padding: .4em .3em; } -.dtp .p10 > a { +.dtp .p10>a { color: $white; text-decoration: none; } @@ -156,6 +205,7 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke .dtp .p10 { width: 10%; display: inline-block; + padding: 5px; } .dtp .p20 { @@ -180,7 +230,7 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke color: #212121; font-weight: 500; padding: .7em .5em; - border-radius: 50%!important; + border-radius: 50% !important; text-decoration: none; background: #eee; font-size: 1em; @@ -191,11 +241,11 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke color: #fff; } -.dtp .dtp-picker-time > .dtp-select-hour { +.dtp .dtp-picker-time>.dtp-select-hour { cursor: pointer; } -.dtp .dtp-picker-time > .dtp-select-minute { +.dtp .dtp-picker-time>.dtp-select-minute { cursor: pointer; } @@ -227,4 +277,4 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke .dtp .center { text-align: center; -} +} \ No newline at end of file diff --git a/src/lib/datetime/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.ts b/src/lib/datetime/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.ts index a407ef638..16ab06b4c 100644 --- a/src/lib/datetime/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.ts +++ b/src/lib/datetime/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.ts @@ -8,987 +8,1297 @@ Modificado a partir de https://github.com/T00rk/bootstrap-material-datetimepicke declare var moment; /* tslint:disable */ -(function ($, moment) { - var pluginName = "bootstrapMaterialDatePicker"; - var pluginDataName = "plugin_" + pluginName; +(function ($, moment) +{ + var pluginName = "bootstrapMaterialDatePicker"; + var pluginDataName = "plugin_" + pluginName; - moment.locale('en'); + moment.locale('en'); - function Plugin(element, options) { - this.currentView = 0; + function Plugin(element, options) + { + this.currentView = 0; - this.minDate; - this.maxDate; + this.minDate; + this.maxDate; - this._attachedEvents = []; + this._attachedEvents = []; - this.element = element; - this.$element = $(element); + this.element = element; + this.$element = $(element); - this.params = { date: true, time: true, format: 'YYYY-MM-DD', minDate: null, maxDate: null, currentDate: null, lang: 'en', weekStart: 0, shortTime: false, clearButton: false, nowButton: false, cancelText: 'Cancel', okText: 'OK', clearText: 'Clear', nowText: 'Now', switchOnClick: false, triggerEvent: 'click' }; - this.params = ($ as any).fn.extend(this.params, options); - this.name = "dtp_" + this.setName(); - this.$element.attr("data-dtp", this.name); + this.params = {date: true, time: true, format: 'YYYY-MM-DD', minDate: null, maxDate: null, currentDate: null, lang: 'en', weekStart: 0, disabledDays: [], shortTime: false, clearButton: false, nowButton: false, cancelText: 'Cancel', okText: 'OK', clearText: 'Clear', nowText: 'Now', switchOnClick: false, triggerEvent: 'focus', monthPicker: false, year:true}; + this.params = ($ as any).fn.extend(this.params, options); - moment.locale(this.params.lang); + this.name = "dtp_" + this.setName(); + this.$element.attr("data-dtp", this.name); - this.init(); - } + moment.locale(this.params.lang); - $.fn[pluginName] = function (options, p) { - this.each(function () { - if (!$.data(this, pluginDataName)) { - $.data(this, pluginDataName, new Plugin(this, options)); - } else { - if (typeof ($.data(this, pluginDataName)[options]) === 'function') { - $.data(this, pluginDataName)[options](p); - } - if (options === 'destroy') { - // delete $.data(this, pluginDataName); - } - } - }); - return this; - }; + this.init(); + } - Plugin.prototype = + $.fn[pluginName] = function (options, p) + { + this.each(function () { - init: function () { - this.initDays(); - this.initDates(); - - this.initTemplate(); - - this.initButtons(); - - this._attachEvent($(window), 'resize', this._centerBox.bind(this)); - this._attachEvent(this.$dtpElement.find('.dtp-content'), 'click', this._onElementClick.bind(this)); - this._attachEvent(this.$dtpElement, 'click', this._onBackgroundClick.bind(this)); - this._attachEvent(this.$dtpElement.find('.dtp-close > a'), 'click', this._onCloseClick.bind(this)); - this._attachEvent(this.$element, this.params.triggerEvent, this._fireCalendar.bind(this)); - }, - initDays: function () { - this.days = []; - for (var i = this.params.weekStart; this.days.length < 7; i++) { - if (i > 6) { - i = 0; - } - this.days.push(i.toString()); - } - }, - initDates: function () { - if (this.$element.val().length > 0) { - if (typeof (this.params.format) !== 'undefined' && this.params.format !== null) { - this.currentDate = moment(this.$element.val(), this.params.format).locale(this.params.lang); - } else { - this.currentDate = moment(this.$element.val()).locale(this.params.lang); - } - } else { - if (typeof (this.$element.attr('value')) !== 'undefined' && this.$element.attr('value') !== null && this.$element.attr('value') !== "") { - if (typeof (this.$element.attr('value')) === 'string') { - if (typeof (this.params.format) !== 'undefined' && this.params.format !== null) { - this.currentDate = moment(this.$element.attr('value'), this.params.format).locale(this.params.lang); - } else { - this.currentDate = moment(this.$element.attr('value')).locale(this.params.lang); - } - } - } else { - if (typeof (this.params.currentDate) !== 'undefined' && this.params.currentDate !== null) { - if (typeof (this.params.currentDate) === 'string') { - if (typeof (this.params.format) !== 'undefined' && this.params.format !== null) { - this.currentDate = moment(this.params.currentDate, this.params.format).locale(this.params.lang); - } else { - this.currentDate = moment(this.params.currentDate).locale(this.params.lang); - } - } else { - if (typeof (this.params.currentDate.isValid) === 'undefined' || typeof (this.params.currentDate.isValid) !== 'function') { - var x = this.params.currentDate.getTime(); - this.currentDate = moment(x, "x").locale(this.params.lang); - } else { - this.currentDate = this.params.currentDate; - } - } - this.$element.val(this.currentDate.format(this.params.format)); - } else - this.currentDate = moment(); - } - } - - if (typeof (this.params.minDate) !== 'undefined' && this.params.minDate !== null) { - if (typeof (this.params.minDate) === 'string') { - if (typeof (this.params.format) !== 'undefined' && this.params.format !== null) { - this.minDate = moment(this.params.minDate, this.params.format).locale(this.params.lang); - } else { - this.minDate = moment(this.params.minDate).locale(this.params.lang); - } - } else { - if (typeof (this.params.minDate.isValid) === 'undefined' || typeof (this.params.minDate.isValid) !== 'function') { - var x = this.params.minDate.getTime(); - this.minDate = moment(x, "x").locale(this.params.lang); - } else { - this.minDate = this.params.minDate; - } - } - } else if (this.params.minDate === null) { - this.minDate = null; - } - - if (typeof (this.params.maxDate) !== 'undefined' && this.params.maxDate !== null) { - if (typeof (this.params.maxDate) === 'string') { - if (typeof (this.params.format) !== 'undefined' && this.params.format !== null) { - this.maxDate = moment(this.params.maxDate, this.params.format).locale(this.params.lang); - } else { - this.maxDate = moment(this.params.maxDate).locale(this.params.lang); - } - } else { - if (typeof (this.params.maxDate.isValid) === 'undefined' || typeof (this.params.maxDate.isValid) !== 'function') { - var x = this.params.maxDate.getTime(); - this.maxDate = moment(x, "x").locale(this.params.lang); - } else { - this.maxDate = this.params.maxDate; - } - } - } else if (this.params.maxDate === null) { - this.maxDate = null; - } - - if (!this.isAfterMinDate(this.currentDate)) { - this.currentDate = moment(this.minDate); - } - if (!this.isBeforeMaxDate(this.currentDate)) { - this.currentDate = moment(this.maxDate); - } - }, - initTemplate: function () { - this.template = ''; - - if ($('body').find("#" + this.name).length <= 0) { - $('body').append(this.template); - - if (this) - this.dtpElement = $('body').find("#" + this.name); - this.$dtpElement = $(this.dtpElement); - } - }, - initButtons: function () { - this._attachEvent(this.$dtpElement.find('.dtp-btn-cancel'), 'click', this._onCancelClick.bind(this)); - this._attachEvent(this.$dtpElement.find('.dtp-btn-ok'), 'click', this._onOKClick.bind(this)); - this._attachEvent(this.$dtpElement.find('a.dtp-select-month-before'), 'click', this._onMonthBeforeClick.bind(this)); - this._attachEvent(this.$dtpElement.find('a.dtp-select-month-after'), 'click', this._onMonthAfterClick.bind(this)); - this._attachEvent(this.$dtpElement.find('a.dtp-select-year-before'), 'click', this._onYearBeforeClick.bind(this)); - this._attachEvent(this.$dtpElement.find('a.dtp-select-year-after'), 'click', this._onYearAfterClick.bind(this)); - - if (this.params.clearButton === true) { - this._attachEvent(this.$dtpElement.find('.dtp-btn-clear'), 'click', this._onClearClick.bind(this)); - this.$dtpElement.find('.dtp-btn-clear').removeClass('hidden'); - } - - if (this.params.nowButton === true) { - this._attachEvent(this.$dtpElement.find('.dtp-btn-now'), 'click', this._onNowClick.bind(this)); - this.$dtpElement.find('.dtp-btn-now').removeClass('hidden'); - } - - if ((this.params.nowButton === true) && (this.params.clearButton === true)) { - this.$dtpElement.find('.dtp-btn-clear, .dtp-btn-now, .dtp-btn-cancel, .dtp-btn-ok').addClass('btn-xs'); - } else if ((this.params.nowButton === true) || (this.params.clearButton === true)) { - this.$dtpElement.find('.dtp-btn-clear, .dtp-btn-now, .dtp-btn-cancel, .dtp-btn-ok').addClass('btn-sm'); - } - }, - initMeridienButtons: function () { - this.$dtpElement.find('a.dtp-meridien-am').off('click').on('click', this._onSelectAM.bind(this)); - this.$dtpElement.find('a.dtp-meridien-pm').off('click').on('click', this._onSelectPM.bind(this)); - }, - initDate: function (d) { - this.currentView = 0; - - this.$dtpElement.find('.dtp-picker-calendar').removeClass('hidden'); - this.$dtpElement.find('.dtp-picker-datetime').addClass('hidden'); - - var _date = ((typeof (this.currentDate) !== 'undefined' && this.currentDate !== null) ? this.currentDate : null); - var _calendar = this.generateCalendar(this.currentDate); - - if (typeof (_calendar.week) !== 'undefined' && typeof (_calendar.days) !== 'undefined') { - var _template = this.constructHTMLCalendar(_date, _calendar); - - this.$dtpElement.find('a.dtp-select-day').off('click'); - this.$dtpElement.find('.dtp-picker-calendar').html(_template); - - this.$dtpElement.find('a.dtp-select-day').on('click', this._onSelectDate.bind(this)); - - this.toggleButtons(_date); - } - - this._centerBox(); - this.showDate(_date); - }, - initHours: function () { - this.currentView = 1; - - this.showTime(this.currentDate); - this.initMeridienButtons(); - - if (this.currentDate.hour() < 12) { - this.$dtpElement.find('a.dtp-meridien-am').click(); - } else { - this.$dtpElement.find('a.dtp-meridien-pm').click(); - } - - var hFormat = ((this.params.shortTime) ? 'h' : 'H'); - - this.$dtpElement.find('.dtp-picker-datetime').removeClass('hidden'); - this.$dtpElement.find('.dtp-picker-calendar').addClass('hidden'); - - var svgClockElement = this.createSVGClock(true); - - for (var i = 0; i < 12; i++) { - var x = -(162 * (Math.sin(-Math.PI * 2 * (i / 12)))); - var y = -(162 * (Math.cos(-Math.PI * 2 * (i / 12)))); - - var fill = ((this.currentDate.format(hFormat) == i) ? "#A1A1A1" : 'transparent'); - var color = ((this.currentDate.format(hFormat) == i) ? "#fff" : '#000'); - - var svgHourCircle = this.createSVGElement("circle", { 'id': 'h-' + i, 'class': 'dtp-select-hour', 'style': 'cursor:pointer', r: '30', cx: x, cy: y, fill: fill, 'data-hour': i }); - - var svgHourText = this.createSVGElement("text", { 'id': 'th-' + i, 'class': 'dtp-select-hour-text', 'text-anchor': 'middle', 'style': 'cursor:pointer', 'font-weight': 'bold', 'font-size': '20', x: x, y: y + 7, fill: color, 'data-hour': i }); - svgHourText.textContent = ((i === 0) ? ((this.params.shortTime) ? 12 : i) : i); - - if (!this.toggleTime(i, true)) { - svgHourCircle.classList.add('disabled'); - svgHourText.classList.add('disabled'); - svgHourText.setAttribute('fill', '#bdbdbd'); - } else { - svgHourCircle.addEventListener('click', this._onSelectHour.bind(this)); - svgHourText.addEventListener('click', this._onSelectHour.bind(this)); - } - - svgClockElement.appendChild(svgHourCircle) - svgClockElement.appendChild(svgHourText) - } - - if (!this.params.shortTime) { - for (var i = 0; i < 12; i++) { - var x = -(110 * (Math.sin(-Math.PI * 2 * (i / 12)))); - var y = -(110 * (Math.cos(-Math.PI * 2 * (i / 12)))); - - var fill = ((this.currentDate.format(hFormat) == (i + 12)) ? "#A1A1A1" : 'transparent'); - var color = ((this.currentDate.format(hFormat) == (i + 12)) ? "#fff" : '#000'); - - var svgHourCircle = this.createSVGElement("circle", { 'id': 'h-' + (i + 12), 'class': 'dtp-select-hour', 'style': 'cursor:pointer', r: '30', cx: x, cy: y, fill: fill, 'data-hour': (i + 12) }); - - var svgHourText = this.createSVGElement("text", { 'id': 'th-' + (i + 12), 'class': 'dtp-select-hour-text', 'text-anchor': 'middle', 'style': 'cursor:pointer', 'font-weight': 'bold', 'font-size': '22', x: x, y: y + 7, fill: color, 'data-hour': (i + 12) }); - svgHourText.textContent = i + 12; - - if (!this.toggleTime(i + 12, true)) { - svgHourCircle.classList.add('disabled'); - svgHourText.classList.add('disabled'); - svgHourText.setAttribute('fill', '#bdbdbd'); - } else { - svgHourCircle.addEventListener('click', this._onSelectHour.bind(this)); - svgHourText.addEventListener('click', this._onSelectHour.bind(this)); - } - - svgClockElement.appendChild(svgHourCircle) - svgClockElement.appendChild(svgHourText) - } - - this.$dtpElement.find('a.dtp-meridien-am').addClass('hidden'); - this.$dtpElement.find('a.dtp-meridien-pm').addClass('hidden'); - } - - this._centerBox(); - }, - initMinutes: function () { - this.currentView = 2; - - this.showTime(this.currentDate); - - this.initMeridienButtons(); - - if (this.currentDate.hour() < 12) { - this.$dtpElement.find('a.dtp-meridien-am').click(); - } else { - this.$dtpElement.find('a.dtp-meridien-pm').click(); - } - - this.$dtpElement.find('.dtp-picker-calendar').addClass('hidden'); - this.$dtpElement.find('.dtp-picker-datetime').removeClass('hidden'); - - var svgClockElement = this.createSVGClock(false); - - for (var i = 0; i < 60; i++) { - var s = ((i % 5 === 0) ? 162 : 158); - var r = ((i % 5 === 0) ? 30 : 20); - - var x = -(s * (Math.sin(-Math.PI * 2 * (i / 60)))); - var y = -(s * (Math.cos(-Math.PI * 2 * (i / 60)))); - - var color = ((this.currentDate.format("m") == i) ? "#A1A1A1" : 'transparent'); - - var svgMinuteCircle = this.createSVGElement("circle", { 'id': 'm-' + i, 'class': 'dtp-select-minute', 'style': 'cursor:pointer', r: r, cx: x, cy: y, fill: color, 'data-minute': i }); - - if (!this.toggleTime(i, false)) { - svgMinuteCircle.classList.add("disabled"); - } else { - svgMinuteCircle.addEventListener('click', this._onSelectMinute.bind(this)); - } - - svgClockElement.appendChild(svgMinuteCircle) - } - - for (var i = 0; i < 60; i++) { - if ((i % 5) === 0) { - var x = -(162 * (Math.sin(-Math.PI * 2 * (i / 60)))); - var y = -(162 * (Math.cos(-Math.PI * 2 * (i / 60)))); - - var color = ((this.currentDate.format("m") == i) ? "#fff" : '#000'); - - var svgMinuteText = this.createSVGElement("text", { 'id': 'tm-' + i, 'class': 'dtp-select-minute-text', 'text-anchor': 'middle', 'style': 'cursor:pointer', 'font-weight': 'bold', 'font-size': '20', x: x, y: y + 7, fill: color, 'data-minute': i }); - svgMinuteText.textContent = i; - - if (!this.toggleTime(i, false)) { - svgMinuteText.classList.add("disabled"); - svgMinuteText.setAttribute('fill', '#bdbdbd'); - } else { - svgMinuteText.addEventListener('click', this._onSelectMinute.bind(this)); - } - - svgClockElement.appendChild(svgMinuteText) - } - } - - this._centerBox(); - }, - animateHands: function () { - var H = this.currentDate.hour(); - var M = this.currentDate.minute(); - - var hh = this.$dtpElement.find('.hour-hand'); - hh[0].setAttribute('transform', "rotate(" + 360 * H / 12 + ")"); - - var mh = this.$dtpElement.find('.minute-hand'); - mh[0].setAttribute('transform', "rotate(" + 360 * M / 60 + ")"); - }, - createSVGClock: function (isHour) { - var hl = ((this.params.shortTime) ? -120 : -90); - - var svgElement = this.createSVGElement("svg", { class: 'svg-clock', viewBox: '0,0,400,400' }); - var svgGElement = this.createSVGElement("g", { transform: 'translate(200,200) ' }); - var svgClockFace = this.createSVGElement("circle", { r: '192', fill: '#eee', stroke: '#bdbdbd', 'stroke-width': 2 }); - var svgClockCenter = this.createSVGElement("circle", { r: '15', fill: '#757575' }); - - svgGElement.appendChild(svgClockFace) - - if (isHour) { - var svgMinuteHand = this.createSVGElement("line", { class: 'minute-hand', x1: 0, y1: 0, x2: 0, y2: -150, stroke: '#bdbdbd', 'stroke-width': 2 }); - var svgHourHand = this.createSVGElement("line", { class: 'hour-hand', x1: 0, y1: 0, x2: 0, y2: hl, stroke: '#A1A1A1', 'stroke-width': 8 }); - - svgGElement.appendChild(svgMinuteHand); - svgGElement.appendChild(svgHourHand); - } else { - var svgMinuteHand = this.createSVGElement("line", { class: 'minute-hand', x1: 0, y1: 0, x2: 0, y2: -150, stroke: '#A1A1A1', 'stroke-width': 2 }); - var svgHourHand = this.createSVGElement("line", { class: 'hour-hand', x1: 0, y1: 0, x2: 0, y2: hl, stroke: '#bdbdbd', 'stroke-width': 8 }); - - svgGElement.appendChild(svgHourHand); - svgGElement.appendChild(svgMinuteHand); - } - - svgGElement.appendChild(svgClockCenter) - - svgElement.appendChild(svgGElement) - - this.$dtpElement.find("#dtp-svg-clock").empty(); - this.$dtpElement.find("#dtp-svg-clock")[0].appendChild(svgElement); - - this.animateHands(); - - return svgGElement; - }, - createSVGElement: function (tag, attrs) { - var el = document.createElementNS('http://www.w3.org/2000/svg', tag); - for (var k in attrs) { - el.setAttribute(k, attrs[k]); - } - return el; - }, - isAfterMinDate: function (date, checkHour, checkMinute) { - var _return = true; - - if (typeof (this.minDate) !== 'undefined' && this.minDate !== null) { - var _minDate = moment(this.minDate); - var _date = moment(date); - - if (!checkHour && !checkMinute) { - _minDate.hour(0); - _minDate.minute(0); - - _date.hour(0); - _date.minute(0); - } - - _minDate.second(0); - _date.second(0); - _minDate.millisecond(0); - _date.millisecond(0); - - if (!checkMinute) { - _date.minute(0); - _minDate.minute(0); - - _return = (parseInt(_date.format("X")) >= parseInt(_minDate.format("X"))); - } else { - _return = (parseInt(_date.format("X")) >= parseInt(_minDate.format("X"))); - } - } - - return _return; - }, - isBeforeMaxDate: function (date, checkTime, checkMinute) { - var _return = true; - - if (typeof (this.maxDate) !== 'undefined' && this.maxDate !== null) { - var _maxDate = moment(this.maxDate); - var _date = moment(date); - - if (!checkTime && !checkMinute) { - _maxDate.hour(0); - _maxDate.minute(0); - - _date.hour(0); - _date.minute(0); - } - - _maxDate.second(0); - _date.second(0); - _maxDate.millisecond(0); - _date.millisecond(0); - - if (!checkMinute) { - _date.minute(0); - _maxDate.minute(0); - - _return = (parseInt(_date.format("X")) <= parseInt(_maxDate.format("X"))); - } else { - _return = (parseInt(_date.format("X")) <= parseInt(_maxDate.format("X"))); - } - } - - return _return; - }, - rotateElement: function (el, deg) { - $(el).css - ({ - WebkitTransform: 'rotate(' + deg + 'deg)', - '-moz-transform': 'rotate(' + deg + 'deg)' - }); - }, - showDate: function (date) { - if (date) { - this.$dtpElement.find('.dtp-actual-day').html(date.locale(this.params.lang).format('dddd')); - this.$dtpElement.find('.dtp-actual-month').html(date.locale(this.params.lang).format('MMM').toUpperCase()); - this.$dtpElement.find('.dtp-actual-num').html(date.locale(this.params.lang).format('DD')); - this.$dtpElement.find('.dtp-actual-year').html(date.locale(this.params.lang).format('YYYY')); - } - }, - showTime: function (date) { - if (date) { - var minutes = date.minute(); - var content = ((this.params.shortTime) ? date.format('hh') : date.format('HH')) + ':' + ((minutes.toString().length == 2) ? minutes : '0' + minutes) + ((this.params.shortTime) ? ' ' + date.format('A') : ''); - - if (this.params.date) - this.$dtpElement.find('.dtp-actual-time').html(content); - else { - if (this.params.shortTime) - this.$dtpElement.find('.dtp-actual-day').html(date.format('A')); - else - this.$dtpElement.find('.dtp-actual-day').html(' '); - - this.$dtpElement.find('.dtp-actual-maxtime').html(content); - } - } - }, - selectDate: function (date) { - if (date) { - this.currentDate.date(date); - - this.showDate(this.currentDate); - this.$element.trigger('dateSelected', this.currentDate); - } - }, - generateCalendar: function (date) { - var _calendar: any = {}; - - if (date !== null) { - var startOfMonth = moment(date).locale(this.params.lang).startOf('month'); - var endOfMonth = moment(date).locale(this.params.lang).endOf('month'); - - var iNumDay = startOfMonth.format('d'); - - _calendar.week = this.days; - _calendar.days = []; - - for (var i = startOfMonth.date(); i <= endOfMonth.date(); i++) { - if (i === startOfMonth.date()) { - var iWeek = _calendar.week.indexOf(iNumDay.toString()); - if (iWeek > 0) { - for (var x = 0; x < iWeek; x++) { - _calendar.days.push(0); - } - } - } - _calendar.days.push(moment(startOfMonth).locale(this.params.lang).date(i)); - } - } - - return _calendar; - }, - constructHTMLCalendar: function (date, calendar) { - var _template = ""; - - _template += '
' + date.locale(this.params.lang).format('MMMM YYYY') + '
'; - _template += ''; - for (var i = 0; i < calendar.week.length; i++) { - _template += ''; - } - - _template += ''; - _template += ''; - - for (var i = 0; i < calendar.days.length; i++) { - if (i % 7 == 0) - _template += ''; - _template += ''; - } - } - _template += '
' + moment(parseInt(calendar.week[i]), "d").locale(this.params.lang).format("dd").substring(0, 1) + '
'; - if (calendar.days[i] != 0) { - if (this.isBeforeMaxDate(moment(calendar.days[i]), false, false) === false || this.isAfterMinDate(moment(calendar.days[i]), false, false) === false) { - _template += '' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + ''; - } else { - if (moment(calendar.days[i]).locale(this.params.lang).format("DD") === moment(this.currentDate).locale(this.params.lang).format("DD")) { - _template += '' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + ''; - } else { - _template += '' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + ''; - } - } - - _template += '
'; - - return _template; - }, - setName: function () { - var text = ""; - var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; - - for (var i = 0; i < 5; i++) { - text += possible.charAt(Math.floor(Math.random() * possible.length)); - } - - return text; - }, - isPM: function () { - return this.$dtpElement.find('a.dtp-meridien-pm').hasClass('selected'); - }, - setElementValue: function () { - this.$element.trigger('beforeChange', this.currentDate); - if (typeof (($ as any).material) !== 'undefined') { - this.$element.removeClass('empty'); - } - this.$element.val(moment(this.currentDate).locale(this.params.lang).format(this.params.format)); - this.$element.trigger('change', this.currentDate); - }, - toggleButtons: function (date) { - if (date && date.isValid()) { - var startOfMonth = moment(date).locale(this.params.lang).startOf('month'); - var endOfMonth = moment(date).locale(this.params.lang).endOf('month'); - - if (!this.isAfterMinDate(startOfMonth, false, false)) { - this.$dtpElement.find('a.dtp-select-month-before').addClass('invisible'); - } else { - this.$dtpElement.find('a.dtp-select-month-before').removeClass('invisible'); - } - - if (!this.isBeforeMaxDate(endOfMonth, false, false)) { - this.$dtpElement.find('a.dtp-select-month-after').addClass('invisible'); - } else { - this.$dtpElement.find('a.dtp-select-month-after').removeClass('invisible'); - } - - var startOfYear = moment(date).locale(this.params.lang).startOf('year'); - var endOfYear = moment(date).locale(this.params.lang).endOf('year'); - - if (!this.isAfterMinDate(startOfYear, false, false)) { - this.$dtpElement.find('a.dtp-select-year-before').addClass('invisible'); - } else { - this.$dtpElement.find('a.dtp-select-year-before').removeClass('invisible'); - } - - if (!this.isBeforeMaxDate(endOfYear, false, false)) { - this.$dtpElement.find('a.dtp-select-year-after').addClass('invisible'); - } else { - this.$dtpElement.find('a.dtp-select-year-after').removeClass('invisible'); - } - } - }, - toggleTime: function (value, isHours) { - var result = false; - - if (isHours) { - var _date = moment(this.currentDate); - _date.hour(this.convertHours(value)).minute(0).second(0); - - result = !(this.isAfterMinDate(_date, true, false) === false || this.isBeforeMaxDate(_date, true, false) === false); - } else { - var _date = moment(this.currentDate); - _date.minute(value).second(0); - - result = !(this.isAfterMinDate(_date, true, true) === false || this.isBeforeMaxDate(_date, true, true) === false); - } - - return result; - }, - _attachEvent: function (el, ev, fn) { - el.on(ev, null, null, fn); - this._attachedEvents.push([el, ev, fn]); - }, - _detachEvents: function () { - for (var i = this._attachedEvents.length - 1; i >= 0; i--) { - this._attachedEvents[i][0].off(this._attachedEvents[i][1], this._attachedEvents[i][2]); - this._attachedEvents.splice(i, 1); - } - }, - _fireCalendar: function () { - this.currentView = 0; - this.$element.blur(); - - this.initDates(); - this.show(); - - if (this.params.date) { - this.$dtpElement.find('.dtp-date').removeClass('hidden'); - this.initDate(); - } else { - if (this.params.time) { - this.$dtpElement.find('.dtp-time').removeClass('hidden'); - this.initHours(); - } - } - }, - _onBackgroundClick: function (e) { - e.stopPropagation(); - this.hide(); - }, - _onElementClick: function (e) { - e.stopPropagation(); - }, - _onKeydown: function (e) { - if (e.which === 27) { - this.hide(); - } - }, - _onCloseClick: function () { - this.hide(); - }, - _onClearClick: function () { - this.currentDate = null; - this.$element.trigger('beforeChange', this.currentDate); - this.hide(); - if (typeof (($ as any).material) !== 'undefined') { - this.$element.addClass('empty'); - } - this.$element.val(''); - this.$element.trigger('change', this.currentDate); - }, - _onNowClick: function () { - this.currentDate = moment(); - - if (this.params.date === true) { - this.showDate(this.currentDate); - - if (this.currentView === 0) { - this.initDate(); - } - } - - if (this.params.time === true) { - this.showTime(this.currentDate); - - switch (this.currentView) { - case 1: - this.initHours(); - break; - case 2: - this.initMinutes(); - break; - } - - this.animateHands(); - } - }, - _onOKClick: function () { - switch (this.currentView) { - case 0: - if (this.params.time === true) { - this.initHours(); - } else { - this.setElementValue(); - this.hide(); - } - break; - case 1: - this.initMinutes(); - break; - case 2: - this.setElementValue(); - this.hide(); - break; - } - }, - _onCancelClick: function () { - if (this.params.time) { - switch (this.currentView) { - case 0: - this.hide(); - break; - case 1: - if (this.params.date) { - this.initDate(); - } else { - this.hide(); - } - break; - case 2: - this.initHours(); - break; - } - } else { - this.hide(); - } - }, - _onMonthBeforeClick: function () { - this.currentDate.subtract(1, 'months'); - this.initDate(this.currentDate); - }, - _onMonthAfterClick: function () { - this.currentDate.add(1, 'months'); - this.initDate(this.currentDate); - }, - _onYearBeforeClick: function () { - this.currentDate.subtract(1, 'years'); - this.initDate(this.currentDate); - }, - _onYearAfterClick: function () { - this.currentDate.add(1, 'years'); - this.initDate(this.currentDate); - }, - _onSelectDate: function (e) { - this.$dtpElement.find('a.dtp-select-day').removeClass('selected'); - $(e.currentTarget).addClass('selected'); - - this.selectDate($(e.currentTarget).parent().data("date")); - - if (this.params.switchOnClick === true && this.params.time === true) - setTimeout(this.initHours.bind(this), 200); - - if (this.params.switchOnClick === true && this.params.time === false) { - setTimeout(this._onOKClick.bind(this), 200); - } - - }, - _onSelectHour: function (e) { - if (!$(e.target).hasClass('disabled')) { - var value = $(e.target).data('hour'); - var parent = $(e.target).parent(); - - var h = parent.find('.dtp-select-hour'); - for (var i = 0; i < h.length; i++) { - $(h[i]).attr('fill', 'transparent'); - } - var th = parent.find('.dtp-select-hour-text'); - for (var i = 0; i < th.length; i++) { - $(th[i]).attr('fill', '#000'); - } - - $(parent.find('#h-' + value)).attr('fill', '#A1A1A1'); - $(parent.find('#th-' + value)).attr('fill', '#fff'); - - this.currentDate.hour(parseInt(value)); - - if (this.params.shortTime === true && this.isPM()) { - this.currentDate.add(12, 'hours'); - } - - this.showTime(this.currentDate); - - this.animateHands(); - - if (this.params.switchOnClick === true) - setTimeout(this.initMinutes.bind(this), 200); - } - }, - _onSelectMinute: function (e) { - if (!$(e.target).hasClass('disabled')) { - var value = $(e.target).data('minute'); - var parent = $(e.target).parent(); - - var m = parent.find('.dtp-select-minute'); - for (var i = 0; i < m.length; i++) { - $(m[i]).attr('fill', 'transparent'); - } - var tm = parent.find('.dtp-select-minute-text'); - for (var i = 0; i < tm.length; i++) { - $(tm[i]).attr('fill', '#000'); - } - - $(parent.find('#m-' + value)).attr('fill', '#A1A1A1'); - $(parent.find('#tm-' + value)).attr('fill', '#fff'); - - this.currentDate.minute(parseInt(value)); - this.showTime(this.currentDate); - - this.animateHands(); - - if (this.params.switchOnClick === true) - setTimeout(function () { - this.setElementValue(); - this.hide(); - }.bind(this), 200); - } - }, - _onSelectAM: function (e) { - $('.dtp-actual-meridien').find('a').removeClass('selected'); - $(e.currentTarget).addClass('selected'); - - if (this.currentDate.hour() >= 12) { - if (this.currentDate.subtract(12, 'hours')) - this.showTime(this.currentDate); - } - this.toggleTime((this.currentView === 1)); - }, - _onSelectPM: function (e) { - $('.dtp-actual-meridien').find('a').removeClass('selected'); - $(e.currentTarget).addClass('selected'); - - if (this.currentDate.hour() < 12) { - if (this.currentDate.add(12, 'hours')) - this.showTime(this.currentDate); + if (!$.data(this, pluginDataName)) + { + $.data(this, pluginDataName, new Plugin(this, options)); + } else + { + if (typeof ($.data(this, pluginDataName)[options]) === 'function') + { + $.data(this, pluginDataName)[options](p); + } + if (options === 'destroy') + { + // delete $.data(this, pluginDataName); + } + } + }); + return this; + }; + + Plugin.prototype = + { + init: function () + { + this.initDays(); + this.initDates(); + + this.initTemplate(); + + this.initButtons(); + + this._attachEvent($(window), 'resize', this._centerBox.bind(this)); + this._attachEvent(this.$dtpElement.find('.dtp-content'), 'click', this._onElementClick.bind(this)); + this._attachEvent(this.$dtpElement, 'click', this._onBackgroundClick.bind(this)); + this._attachEvent(this.$dtpElement.find('.dtp-close > a'), 'click', this._onCloseClick.bind(this)); + this._attachEvent(this.$element, this.params.triggerEvent, this._fireCalendar.bind(this)); + }, + initDays: function () + { + this.days = []; + for (var i = this.params.weekStart; this.days.length < 7; i++) + { + if (i > 6) + { + i = 0; + } + this.days.push(i.toString()); + } + }, + initDates: function () + { + if (this.$element.val().length > 0) + { + if (typeof (this.params.format) !== 'undefined' && this.params.format !== null) + { + this.currentDate = moment(this.$element.val(), this.params.format).locale(this.params.lang); + } else + { + this.currentDate = moment(this.$element.val()).locale(this.params.lang); + } + } else + { + if (typeof (this.$element.attr('value')) !== 'undefined' && this.$element.attr('value') !== null && this.$element.attr('value') !== "") + { + if (typeof (this.$element.attr('value')) === 'string') + { + if (typeof (this.params.format) !== 'undefined' && this.params.format !== null) + { + this.currentDate = moment(this.$element.attr('value'), this.params.format).locale(this.params.lang); + } else + { + this.currentDate = moment(this.$element.attr('value')).locale(this.params.lang); + } + } + } else + { + if (typeof (this.params.currentDate) !== 'undefined' && this.params.currentDate !== null) + { + if (typeof (this.params.currentDate) === 'string') + { + if (typeof (this.params.format) !== 'undefined' && this.params.format !== null) + { + this.currentDate = moment(this.params.currentDate, this.params.format).locale(this.params.lang); + } else + { + this.currentDate = moment(this.params.currentDate).locale(this.params.lang); + } + } else + { + if (typeof (this.params.currentDate.isValid) === 'undefined' || typeof (this.params.currentDate.isValid) !== 'function') + { + var x = this.params.currentDate.getTime(); + this.currentDate = moment(x, "x").locale(this.params.lang); + } else + { + this.currentDate = this.params.currentDate; + } + } + this.$element.val(this.currentDate.format(this.params.format)); + } else + this.currentDate = moment(); + } + } + + if (typeof (this.params.minDate) !== 'undefined' && this.params.minDate !== null) + { + if (typeof (this.params.minDate) === 'string') + { + if (typeof (this.params.format) !== 'undefined' && this.params.format !== null) + { + this.minDate = moment(this.params.minDate, this.params.format).locale(this.params.lang); + } else + { + this.minDate = moment(this.params.minDate).locale(this.params.lang); + } + } else + { + if (typeof (this.params.minDate.isValid) === 'undefined' || typeof (this.params.minDate.isValid) !== 'function') + { + var x = this.params.minDate.getTime(); + this.minDate = moment(x, "x").locale(this.params.lang); + } else + { + this.minDate = this.params.minDate; + } + } + } else if (this.params.minDate === null) + { + this.minDate = null; + } + + if (typeof (this.params.maxDate) !== 'undefined' && this.params.maxDate !== null) + { + if (typeof (this.params.maxDate) === 'string') + { + if (typeof (this.params.format) !== 'undefined' && this.params.format !== null) + { + this.maxDate = moment(this.params.maxDate, this.params.format).locale(this.params.lang); + } else + { + this.maxDate = moment(this.params.maxDate).locale(this.params.lang); + } + } else + { + if (typeof (this.params.maxDate.isValid) === 'undefined' || typeof (this.params.maxDate.isValid) !== 'function') + { + var x = this.params.maxDate.getTime(); + this.maxDate = moment(x, "x").locale(this.params.lang); + } else + { + this.maxDate = this.params.maxDate; + } + } + } else if (this.params.maxDate === null) + { + this.maxDate = null; + } + + if (!this.isAfterMinDate(this.currentDate)) + { + this.currentDate = moment(this.minDate); + } + if (!this.isBeforeMaxDate(this.currentDate)) + { + this.currentDate = moment(this.maxDate); + } + }, + initTemplate: function () + { + var yearPicker = ""; + var y =this.currentDate.year(); + for (var i = y-3; i < y + 4; i++) { + yearPicker += '
' + i + '
'; } - this.toggleTime((this.currentView === 1)); - }, - convertHours: function (h) { - var _return = h; - - if (this.params.shortTime === true) { - if ((h < 12) && this.isPM()) { - _return += 12; + this.midYear=y; + var yearHtml = + ''; + + this.template = ''; + + if ($('body').find("#" + this.name).length <= 0) + { + $('body').append(this.template); + + if (this) + this.dtpElement = $('body').find("#" + this.name); + this.$dtpElement = $(this.dtpElement); + } + }, + initButtons: function () + { + this._attachEvent(this.$dtpElement.find('.dtp-btn-cancel'), 'click', this._onCancelClick.bind(this)); + this._attachEvent(this.$dtpElement.find('.dtp-btn-ok'), 'click', this._onOKClick.bind(this)); + this._attachEvent(this.$dtpElement.find('a.dtp-select-month-before'), 'click', this._onMonthBeforeClick.bind(this)); + this._attachEvent(this.$dtpElement.find('a.dtp-select-month-after'), 'click', this._onMonthAfterClick.bind(this)); + this._attachEvent(this.$dtpElement.find('a.dtp-select-year-before'), 'click', this._onYearBeforeClick.bind(this)); + this._attachEvent(this.$dtpElement.find('a.dtp-select-year-after'), 'click', this._onYearAfterClick.bind(this)); + this._attachEvent(this.$dtpElement.find('.dtp-actual-year'), 'click', this._onActualYearClick.bind(this)); + this._attachEvent(this.$dtpElement.find('a.dtp-select-year-range.before'), 'click', this._onYearRangeBeforeClick.bind(this)); + this._attachEvent(this.$dtpElement.find('a.dtp-select-year-range.after'), 'click', this._onYearRangeAfterClick.bind(this)); + this._attachEvent(this.$dtpElement.find('div.year-picker-item'), 'click', this._onYearItemClick.bind(this)); + + if (this.params.clearButton === true) + { + this._attachEvent(this.$dtpElement.find('.dtp-btn-clear'), 'click', this._onClearClick.bind(this)); + this.$dtpElement.find('.dtp-btn-clear').removeClass('hidden'); + } + + if (this.params.nowButton === true) + { + this._attachEvent(this.$dtpElement.find('.dtp-btn-now'), 'click', this._onNowClick.bind(this)); + this.$dtpElement.find('.dtp-btn-now').removeClass('hidden'); + } + + if ((this.params.nowButton === true) && (this.params.clearButton === true)) + { + this.$dtpElement.find('.dtp-btn-clear, .dtp-btn-now, .dtp-btn-cancel, .dtp-btn-ok').addClass('btn-xs'); + } else if ((this.params.nowButton === true) || (this.params.clearButton === true)) + { + this.$dtpElement.find('.dtp-btn-clear, .dtp-btn-now, .dtp-btn-cancel, .dtp-btn-ok').addClass('btn-sm'); + } + }, + initMeridienButtons: function () + { + this.$dtpElement.find('a.dtp-meridien-am').off('click').on('click', this._onSelectAM.bind(this)); + this.$dtpElement.find('a.dtp-meridien-pm').off('click').on('click', this._onSelectPM.bind(this)); + }, + initDate: function (d) + { + this.currentView = 0; + + if (this.params.monthPicker === false) + { + this.$dtpElement.find('.dtp-picker-calendar').removeClass('hidden'); + } + this.$dtpElement.find('.dtp-picker-datetime').addClass('hidden'); + this.$dtpElement.find('.dtp-picker-year').addClass('hidden'); + + var _date = ((typeof (this.currentDate) !== 'undefined' && this.currentDate !== null) ? this.currentDate : null); + var _calendar = this.generateCalendar(this.currentDate); + + if (typeof (_calendar.week) !== 'undefined' && typeof (_calendar.days) !== 'undefined') + { + var _template = this.constructHTMLCalendar(_date, _calendar); + + this.$dtpElement.find('a.dtp-select-day').off('click'); + this.$dtpElement.find('.dtp-picker-calendar').html(_template); + + this.$dtpElement.find('a.dtp-select-day').on('click', this._onSelectDate.bind(this)); + + this.toggleButtons(_date); + } + + this._centerBox(); + this.showDate(_date); + }, + initHours: function () + { + this.currentView = 1; + + this.showTime(this.currentDate); + this.initMeridienButtons(); + + if (this.currentDate.hour() < 12) + { + this.$dtpElement.find('a.dtp-meridien-am').click(); + } else + { + this.$dtpElement.find('a.dtp-meridien-pm').click(); + } + + var hFormat = ((this.params.shortTime) ? 'h' : 'H'); + + this.$dtpElement.find('.dtp-picker-datetime').removeClass('hidden'); + this.$dtpElement.find('.dtp-picker-calendar').addClass('hidden'); + this.$dtpElement.find('.dtp-picker-year').addClass('hidden'); + + var svgClockElement = this.createSVGClock(true); + + for (var i = 0; i < 12; i++) + { + var x = -(162 * (Math.sin(-Math.PI * 2 * (i / 12)))); + var y = -(162 * (Math.cos(-Math.PI * 2 * (i / 12)))); + + var fill = ((this.currentDate.format(hFormat) == i) ? "00a8e0" : 'transparent'); + var color = ((this.currentDate.format(hFormat) == i) ? "#fff" : '#000'); + + var svgHourCircle = this.createSVGElement("circle", {'id': 'h-' + i, 'class': 'dtp-select-hour', 'style': 'cursor:pointer', r: '30', cx: x, cy: y, fill: fill, 'data-hour': i}); + + var svgHourText = this.createSVGElement("text", {'id': 'th-' + i, 'class': 'dtp-select-hour-text', 'text-anchor': 'middle', 'style': 'cursor:pointer', 'font-weight': 'bold', 'font-size': '20', x: x, y: y + 7, fill: color, 'data-hour': i}); + svgHourText.textContent = ((i === 0) ? ((this.params.shortTime) ? 12 : i) : i); + + if (!this.toggleTime(i, true)) + { + svgHourCircle.className += " disabled"; + svgHourText.className += " disabled"; + svgHourText.setAttribute('fill', '#bdbdbd'); + } else + { + svgHourCircle.addEventListener('click', this._onSelectHour.bind(this)); + svgHourText.addEventListener('click', this._onSelectHour.bind(this)); + } + + svgClockElement.appendChild(svgHourCircle) + svgClockElement.appendChild(svgHourText) + } + + if (!this.params.shortTime) + { + for (var i = 0; i < 12; i++) + { + var x = -(110 * (Math.sin(-Math.PI * 2 * (i / 12)))); + var y = -(110 * (Math.cos(-Math.PI * 2 * (i / 12)))); + + var fill = ((this.currentDate.format(hFormat) == (i + 12)) ? "#00a8e0" : 'transparent'); + var color = ((this.currentDate.format(hFormat) == (i + 12)) ? "#fff" : '#000'); + + var svgHourCircle = this.createSVGElement("circle", {'id': 'h-' + (i + 12), 'class': 'dtp-select-hour', 'style': 'cursor:pointer', r: '30', cx: x, cy: y, fill: fill, 'data-hour': (i + 12)}); + + var svgHourText = this.createSVGElement("text", {'id': 'th-' + (i + 12), 'class': 'dtp-select-hour-text', 'text-anchor': 'middle', 'style': 'cursor:pointer', 'font-weight': 'bold', 'font-size': '22', x: x, y: y + 7, fill: color, 'data-hour': (i + 12)}); + svgHourText.textContent = i + 12; + + if (!this.toggleTime(i + 12, true)) + { + svgHourCircle.className += " disabled"; + svgHourText.className += " disabled"; + svgHourText.setAttribute('fill', '#bdbdbd'); + } else + { + svgHourCircle.addEventListener('click', this._onSelectHour.bind(this)); + svgHourText.addEventListener('click', this._onSelectHour.bind(this)); + } + + svgClockElement.appendChild(svgHourCircle) + svgClockElement.appendChild(svgHourText) + } + + this.$dtpElement.find('a.dtp-meridien-am').addClass('hidden'); + this.$dtpElement.find('a.dtp-meridien-pm').addClass('hidden'); + } + + this._centerBox(); + }, + initMinutes: function () + { + this.currentView = 2; + + this.showTime(this.currentDate); + + this.initMeridienButtons(); + + if (this.currentDate.hour() < 12) + { + this.$dtpElement.find('a.dtp-meridien-am').click(); + } else + { + this.$dtpElement.find('a.dtp-meridien-pm').click(); + } + + this.$dtpElement.find('.dtp-picker-year').addClass('hidden'); + this.$dtpElement.find('.dtp-picker-calendar').addClass('hidden'); + this.$dtpElement.find('.dtp-picker-datetime').removeClass('hidden'); + + var svgClockElement = this.createSVGClock(false); + + for (var i = 0; i < 60; i++) + { + var s = ((i % 5 === 0) ? 162 : 158); + var r = ((i % 5 === 0) ? 30 : 20); + + var x = -(s * (Math.sin(-Math.PI * 2 * (i / 60)))); + var y = -(s * (Math.cos(-Math.PI * 2 * (i / 60)))); + + var color = ((this.currentDate.format("m") == i) ? "#00a8e0" : 'transparent'); + + var svgMinuteCircle = this.createSVGElement("circle", {'id': 'm-' + i, 'class': 'dtp-select-minute', 'style': 'cursor:pointer', r: r, cx: x, cy: y, fill: color, 'data-minute': i}); + + if (!this.toggleTime(i, false)) + { + svgMinuteCircle.className += " disabled"; + } else + { + svgMinuteCircle.addEventListener('click', this._onSelectMinute.bind(this)); + } + + svgClockElement.appendChild(svgMinuteCircle) + } + + for (var i = 0; i < 60; i++) + { + if ((i % 5) === 0) + { + var x = -(162 * (Math.sin(-Math.PI * 2 * (i / 60)))); + var y = -(162 * (Math.cos(-Math.PI * 2 * (i / 60)))); + + var color = ((this.currentDate.format("m") == i) ? "#fff" : '#000'); + + var svgMinuteText = this.createSVGElement("text", {'id': 'tm-' + i, 'class': 'dtp-select-minute-text', 'text-anchor': 'middle', 'style': 'cursor:pointer', 'font-weight': 'bold', 'font-size': '20', x: x, y: y + 7, fill: color, 'data-minute': i}); + svgMinuteText.textContent = i; + + if (!this.toggleTime(i, false)) + { + svgMinuteText.className += " disabled"; + svgMinuteText.setAttribute('fill', '#bdbdbd'); + } else + { + svgMinuteText.addEventListener('click', this._onSelectMinute.bind(this)); + } + + svgClockElement.appendChild(svgMinuteText) + } + } + + this._centerBox(); + }, + animateHands: function () + { + var H = this.currentDate.hour(); + var M = this.currentDate.minute(); + + var hh = this.$dtpElement.find('.hour-hand'); + hh[0].setAttribute('transform', "rotate(" + 360 * H / 12 + ")"); + + var mh = this.$dtpElement.find('.minute-hand'); + mh[0].setAttribute('transform', "rotate(" + 360 * M / 60 + ")"); + }, + createSVGClock: function (isHour) + { + var hl = ((this.params.shortTime) ? -120 : -90); + + var svgElement = this.createSVGElement("svg", {class: 'svg-clock', viewBox: '0,0,400,400'}); + var svgGElement = this.createSVGElement("g", {transform: 'translate(200,200) '}); + var svgClockFace = this.createSVGElement("circle", {r: '192', fill: '#eee', stroke: '#bdbdbd', 'stroke-width': 2}); + var svgClockCenter = this.createSVGElement("circle", {r: '15', fill: '#757575'}); + + svgGElement.appendChild(svgClockFace) + + if (isHour) + { + var svgMinuteHand = this.createSVGElement("line", {class: 'minute-hand', x1: 0, y1: 0, x2: 0, y2: -150, stroke: '#bdbdbd', 'stroke-width': 2}); + var svgHourHand = this.createSVGElement("line", {class: 'hour-hand', x1: 0, y1: 0, x2: 0, y2: hl, stroke: '#00a8e0', 'stroke-width': 8}); + + svgGElement.appendChild(svgMinuteHand); + svgGElement.appendChild(svgHourHand); + } else + { + var svgMinuteHand = this.createSVGElement("line", {class: 'minute-hand', x1: 0, y1: 0, x2: 0, y2: -150, stroke: '#00a8e0', 'stroke-width': 2}); + var svgHourHand = this.createSVGElement("line", {class: 'hour-hand', x1: 0, y1: 0, x2: 0, y2: hl, stroke: '#bdbdbd', 'stroke-width': 8}); + + svgGElement.appendChild(svgHourHand); + svgGElement.appendChild(svgMinuteHand); + } + + svgGElement.appendChild(svgClockCenter) + + svgElement.appendChild(svgGElement) + + this.$dtpElement.find("#dtp-svg-clock").empty(); + this.$dtpElement.find("#dtp-svg-clock")[0].appendChild(svgElement); + + this.animateHands(); + + return svgGElement; + }, + createSVGElement: function (tag, attrs) + { + var el = document.createElementNS('http://www.w3.org/2000/svg', tag); + for (var k in attrs) + { + el.setAttribute(k, attrs[k]); + } + return el; + }, + isAfterMinDate: function (date, checkHour, checkMinute) + { + var _return = true; + + if (typeof (this.minDate) !== 'undefined' && this.minDate !== null) + { + var _minDate = moment(this.minDate); + var _date = moment(date); + + if (!checkHour && !checkMinute) + { + _minDate.hour(0); + _minDate.minute(0); + + _date.hour(0); + _date.minute(0); + } + + _minDate.second(0); + _date.second(0); + _minDate.millisecond(0); + _date.millisecond(0); + + if (!checkMinute) + { + _date.minute(0); + _minDate.minute(0); + + _return = (parseInt(_date.format("X")) >= parseInt(_minDate.format("X"))); + } else + { + _return = (parseInt(_date.format("X")) >= parseInt(_minDate.format("X"))); + } + } + + return _return; + }, + isBeforeMaxDate: function (date, checkTime, checkMinute) + { + var _return = true; + + if (typeof (this.maxDate) !== 'undefined' && this.maxDate !== null) + { + var _maxDate = moment(this.maxDate); + var _date = moment(date); + + if (!checkTime && !checkMinute) + { + _maxDate.hour(0); + _maxDate.minute(0); + + _date.hour(0); + _date.minute(0); + } + + _maxDate.second(0); + _date.second(0); + _maxDate.millisecond(0); + _date.millisecond(0); + + if (!checkMinute) + { + _date.minute(0); + _maxDate.minute(0); + + _return = (parseInt(_date.format("X")) <= parseInt(_maxDate.format("X"))); + } else + { + _return = (parseInt(_date.format("X")) <= parseInt(_maxDate.format("X"))); + } + } + + return _return; + }, + rotateElement: function (el, deg) + { + $(el).css + ({ + WebkitTransform: 'rotate(' + deg + 'deg)', + '-moz-transform': 'rotate(' + deg + 'deg)' + }); + }, + showDate: function (date) + { + if (date) + { + this.$dtpElement.find('.dtp-actual-day').html(date.locale(this.params.lang).format('dddd')); + this.$dtpElement.find('.dtp-actual-month').html(date.locale(this.params.lang).format('MMM').toUpperCase()); + this.$dtpElement.find('.dtp-actual-num').html(date.locale(this.params.lang).format('DD')); + this.$dtpElement.find('.dtp-actual-year').html(date.locale(this.params.lang).format('YYYY') + ''); + } + }, + showTime: function (date) + { + if (date) + { + var minutes = date.minute(); + var content = ((this.params.shortTime) ? date.format('hh') : date.format('HH')) + ':' + ((minutes.toString().length == 2) ? minutes : '0' + minutes) + ((this.params.shortTime) ? ' ' + date.format('A') : ''); + + if (this.params.date) + this.$dtpElement.find('.dtp-actual-time').html(content); + else + { + if (this.params.shortTime) + this.$dtpElement.find('.dtp-actual-day').html(date.format('A')); + else + this.$dtpElement.find('.dtp-actual-day').html(' '); + + this.$dtpElement.find('.dtp-actual-maxtime').html(content); + } + } + }, + selectDate: function (date) + { + if (date) + { + this.currentDate.date(date); + + this.showDate(this.currentDate); + this.$element.trigger('dateSelected', this.currentDate); + } + }, + generateCalendar: function (date) + { + // var _calendar = {}; + var _calendar: any = {}; + + if (date !== null) + { + var startOfMonth = moment(date).locale(this.params.lang).startOf('month'); + var endOfMonth = moment(date).locale(this.params.lang).endOf('month'); + + var iNumDay = startOfMonth.format('d'); + + _calendar.week = this.days; + _calendar.days = []; + + for (var i = startOfMonth.date(); i <= endOfMonth.date(); i++) + { + if (i === startOfMonth.date()) + { + var iWeek = _calendar.week.indexOf(iNumDay.toString()); + if (iWeek > 0) + { + for (var x = 0; x < iWeek; x++) + { + _calendar.days.push(0); + } + } + } + _calendar.days.push(moment(startOfMonth).locale(this.params.lang).date(i)); + } + } + + return _calendar; + }, + constructHTMLCalendar: function (date, calendar) + { + var _template = ""; + + _template += '
' + date.locale(this.params.lang).format('MMMM YYYY') + '
'; + _template += ''; + for (var i = 0; i < calendar.week.length; i++) + { + _template += ''; + } + + _template += ''; + _template += ''; + + for (var i = 0; i < calendar.days.length; i++) + { + if (i % 7 == 0) + _template += ''; + _template += ''; + } + } + _template += '
' + moment(parseInt(calendar.week[i]), "d").locale(this.params.lang).format("dd").substring(0, 1) + '
'; + if (calendar.days[i] != 0) + { + if (this.isBeforeMaxDate(moment(calendar.days[i]), false, false) === false + || this.isAfterMinDate(moment(calendar.days[i]), false, false) === false + || this.params.disabledDays.indexOf(calendar.days[i].isoWeekday()) !== -1) + { + _template += '' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + ''; + } else + { + if (moment(calendar.days[i]).locale(this.params.lang).format("DD") === moment(this.currentDate).locale(this.params.lang).format("DD")) + { + _template += '' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + ''; + } else + { + _template += '' + moment(calendar.days[i]).locale(this.params.lang).format("DD") + ''; + } } - } - return _return; - }, - setDate: function (date) { - this.params.currentDate = date; - this.initDates(); - }, - setMinDate: function (date) { - this.params.minDate = date; - this.initDates(); - }, - setMaxDate: function (date) { - this.params.maxDate = date; - this.initDates(); - }, - destroy: function () { - this._detachEvents(); - this.$dtpElement.remove(); - }, - show: function () { - this.$dtpElement.removeClass('hidden'); - this._attachEvent($(window), 'keydown', this._onKeydown.bind(this)); - this._centerBox(); - }, - hide: function () { - ($ as any)(window).off('keydown', null, null, this._onKeydown.bind(this)); - this.$dtpElement.addClass('hidden'); - }, - _centerBox: function () { - var h = (this.$dtpElement.height() - this.$dtpElement.find('.dtp-content').height()) / 2; - this.$dtpElement.find('.dtp-content').css('marginLeft', -(this.$dtpElement.find('.dtp-content').width() / 2) + 'px'); - this.$dtpElement.find('.dtp-content').css('top', h + 'px'); - }, - enableDays: function () { - var enableDays = this.params.enableDays; - if (enableDays) { - $(".dtp-picker-days tbody tr td").each(function () { - if (!(($.inArray($(this).index(), enableDays)) >= 0)) { - $(this).find('a').css({ - "background": "#e3e3e3", - "cursor": "no-drop", - "opacity": "0.5" - }).off("click"); - } - }); + _template += '
'; + + return _template; + }, + setName: function () + { + var text = ""; + var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; + + for (var i = 0; i < 5; i++) + { + text += possible.charAt(Math.floor(Math.random() * possible.length)); + } + + return text; + }, + isPM: function () + { + return this.$dtpElement.find('a.dtp-meridien-pm').hasClass('selected'); + }, + setElementValue: function () + { + this.$element.trigger('beforeChange', this.currentDate); + if (typeof (($ as any).material) !== 'undefined') + { + this.$element.removeClass('empty'); + } + this.$element.val(moment(this.currentDate).locale(this.params.lang).format(this.params.format)); + this.$element.trigger('change', this.currentDate); + }, + toggleButtons: function (date) + { + if (date && date.isValid()) + { + var startOfMonth = moment(date).locale(this.params.lang).startOf('month'); + var endOfMonth = moment(date).locale(this.params.lang).endOf('month'); + + if (!this.isAfterMinDate(startOfMonth, false, false)) + { + this.$dtpElement.find('a.dtp-select-month-before').addClass('invisible'); + } else + { + this.$dtpElement.find('a.dtp-select-month-before').removeClass('invisible'); + } + + if (!this.isBeforeMaxDate(endOfMonth, false, false)) + { + this.$dtpElement.find('a.dtp-select-month-after').addClass('invisible'); + } else + { + this.$dtpElement.find('a.dtp-select-month-after').removeClass('invisible'); + } + + var startOfYear = moment(date).locale(this.params.lang).startOf('year'); + var endOfYear = moment(date).locale(this.params.lang).endOf('year'); + + if (!this.isAfterMinDate(startOfYear, false, false)) + { + this.$dtpElement.find('a.dtp-select-year-before').addClass('invisible'); + } else + { + this.$dtpElement.find('a.dtp-select-year-before').removeClass('invisible'); + } + + if (!this.isBeforeMaxDate(endOfYear, false, false)) + { + this.$dtpElement.find('a.dtp-select-year-after').addClass('invisible'); + } else + { + this.$dtpElement.find('a.dtp-select-year-after').removeClass('invisible'); + } + } + }, + toggleTime: function (value, isHours) + { + var result = false; + + if (isHours) + { + var _date = moment(this.currentDate); + _date.hour(this.convertHours(value)).minute(0).second(0); + + result = !(this.isAfterMinDate(_date, true, false) === false || this.isBeforeMaxDate(_date, true, false) === false); + } else + { + var _date = moment(this.currentDate); + _date.minute(value).second(0); + + result = !(this.isAfterMinDate(_date, true, true) === false || this.isBeforeMaxDate(_date, true, true) === false); + } + + return result; + }, + _attachEvent: function (el, ev, fn) + { + el.on(ev, null, null, fn); + this._attachedEvents.push([el, ev, fn]); + }, + _detachEvents: function () + { + for (var i = this._attachedEvents.length - 1; i >= 0; i--) + { + this._attachedEvents[i][0].off(this._attachedEvents[i][1], this._attachedEvents[i][2]); + this._attachedEvents.splice(i, 1); + } + }, + _fireCalendar: function () + { + this.currentView = 0; + this.$element.blur(); + + this.initDates(); + + this.show(); + + if (this.params.date) + { + this.$dtpElement.find('.dtp-date').removeClass('hidden'); + this.initDate(); + } else + { + if (this.params.time) + { + this.$dtpElement.find('.dtp-time').removeClass('hidden'); + this.initHours(); + } + } + }, + _onBackgroundClick: function (e) + { + e.stopPropagation(); + this.hide(); + }, + _onElementClick: function (e) + { + e.stopPropagation(); + }, + _onKeydown: function (e) + { + if (e.which === 27) + { + this.hide(); + } + }, + _onCloseClick: function () + { + this.hide(); + }, + _onClearClick: function () + { + this.currentDate = null; + this.$element.trigger('beforeChange', this.currentDate); + this.hide(); + if (typeof (($ as any).material) !== 'undefined') + { + this.$element.addClass('empty'); + } + this.$element.val(''); + this.$element.trigger('change', this.currentDate); + }, + _onNowClick: function () + { + this.currentDate = moment(); + + if (this.params.date === true) + { + this.showDate(this.currentDate); + + if (this.currentView === 0) + { + this.initDate(); + } + } + + if (this.params.time === true) + { + this.showTime(this.currentDate); + + switch (this.currentView) + { + case 1 : + this.initHours(); + break; + case 2 : + this.initMinutes(); + break; + } + + this.animateHands(); + } + }, + _onOKClick: function () + { + switch (this.currentView) + { + case 0: + if (this.params.time === true) + { + this.initHours(); + } else + { + this.setElementValue(); + this.hide(); + } + break; + case 1: + this.initMinutes(); + break; + case 2: + this.setElementValue(); + this.hide(); + break; + } + }, + _onCancelClick: function () + { + if (this.params.time) + { + switch (this.currentView) + { + case 0: + this.hide(); + break; + case 1: + if (this.params.date) + { + this.initDate(); + } else + { + this.hide(); + } + break; + case 2: + this.initHours(); + break; + } + } else + { + this.hide(); + } + }, + _onMonthBeforeClick: function () + { + this.currentDate.subtract(1, 'months'); + this.initDate(this.currentDate); + this._closeYearPicker(); + }, + _onMonthAfterClick: function () + { + this.currentDate.add(1, 'months'); + this.initDate(this.currentDate); + this._closeYearPicker(); + }, + _onYearBeforeClick: function () + { + this.currentDate.subtract(1, 'years'); + this.initDate(this.currentDate); + this._closeYearPicker(); + }, + _onYearAfterClick: function () + { + this.currentDate.add(1, 'years'); + this.initDate(this.currentDate); + this._closeYearPicker(); + }, + refreshYearItems:function () { + var curYear=this.currentDate.year(),midYear=this.midYear; + var minYear=1850; + if (typeof (this.minDate) !== 'undefined' && this.minDate !== null){ + minYear=moment(this.minDate).year(); + } + + var maxYear=2200; + if (typeof (this.maxDate) !== 'undefined' && this.maxDate !== null){ + maxYear=moment(this.maxDate).year(); + } + + this.$dtpElement.find(".dtp-picker-year .invisible").removeClass("invisible"); + this.$dtpElement.find(".year-picker-item").each(function (i, el) { + var newYear = midYear - 3 + i; + $(el).attr("data-year", newYear).text(newYear).data("year", newYear); + if (curYear == newYear) { + $(el).addClass("active"); + } else { + $(el).removeClass("active"); + } + if(newYearmaxYear){ + $(el).addClass("invisible") + } + }); + if(minYear>=midYear-3){ + this.$dtpElement.find(".dtp-select-year-range.before").addClass('invisible'); + } + if(maxYear<=midYear+3){ + this.$dtpElement.find(".dtp-select-year-range.after").addClass('invisible'); + } + + this.$dtpElement.find(".dtp-select-year-range").data("mid", midYear); + }, + _onActualYearClick:function(){ + if(this.params.year){ + if(this.$dtpElement.find('.dtp-picker-year.hidden').length>0) { + this.$dtpElement.find('.dtp-picker-datetime').addClass("hidden"); + this.$dtpElement.find('.dtp-picker-calendar').addClass("hidden"); + this.$dtpElement.find('.dtp-picker-year').removeClass("hidden"); + this.midYear = this.currentDate.year(); + this.refreshYearItems(); + }else{ + this._closeYearPicker(); + } } - } - - }; -})(jQuery, moment); + }, + _onYearRangeBeforeClick:function(){ + this.midYear-=7; + this.refreshYearItems(); + }, + _onYearRangeAfterClick:function(){ + this.midYear+=7; + this.refreshYearItems(); + }, + _onYearItemClick:function (e) { + var newYear = $(e.currentTarget).data('year'); + var oldYear = this.currentDate.year(); + var diff = newYear - oldYear; + this.currentDate.add(diff, 'years'); + this.initDate(this.currentDate); + + this._closeYearPicker(); + this.$element.trigger("yearSelected",this.currentDate); + }, + _closeYearPicker:function(){ + this.$dtpElement.find('.dtp-picker-calendar').removeClass("hidden"); + this.$dtpElement.find('.dtp-picker-year').addClass("hidden"); + }, + enableYearPicker:function () { + this.params.year=true; + this.$dtpElement.find(".dtp-actual-year").removeClass("disabled"); + }, + disableYearPicker:function () { + this.params.year=false; + this.$dtpElement.find(".dtp-actual-year").addClass("disabled"); + this._closeYearPicker(); + }, + _onSelectDate: function (e) + { + this.$dtpElement.find('a.dtp-select-day').removeClass('selected'); + $(e.currentTarget).addClass('selected'); + + this.selectDate($(e.currentTarget).parent().data("date")); + + if (this.params.switchOnClick === true && this.params.time === true) + setTimeout(this.initHours.bind(this), 200); + + if(this.params.switchOnClick === true && this.params.time === false) { + setTimeout(this._onOKClick.bind(this), 200); + } + + }, + _onSelectHour: function (e) + { + if (!$(e.target).hasClass('disabled')) + { + var value = $(e.target).data('hour'); + var parent = $(e.target).parent(); + + var h = parent.find('.dtp-select-hour'); + for (var i = 0; i < h.length; i++) + { + $(h[i]).attr('fill', 'transparent'); + } + var th = parent.find('.dtp-select-hour-text'); + for (var i = 0; i < th.length; i++) + { + $(th[i]).attr('fill', '#000'); + } + + $(parent.find('#h-' + value)).attr('fill', '#00a8e0'); + $(parent.find('#th-' + value)).attr('fill', '#fff'); + + this.currentDate.hour(parseInt(value)); + + if (this.params.shortTime === true && this.isPM()) + { + this.currentDate.add(12, 'hours'); + } + + this.showTime(this.currentDate); + + this.animateHands(); + + if (this.params.switchOnClick === true) + setTimeout(this.initMinutes.bind(this), 200); + } + }, + _onSelectMinute: function (e) + { + if (!$(e.target).hasClass('disabled')) + { + var value = $(e.target).data('minute'); + var parent = $(e.target).parent(); + + var m = parent.find('.dtp-select-minute'); + for (var i = 0; i < m.length; i++) + { + $(m[i]).attr('fill', 'transparent'); + } + var tm = parent.find('.dtp-select-minute-text'); + for (var i = 0; i < tm.length; i++) + { + $(tm[i]).attr('fill', '#000'); + } + + $(parent.find('#m-' + value)).attr('fill', '#00a8e0'); + $(parent.find('#tm-' + value)).attr('fill', '#fff'); + + this.currentDate.minute(parseInt(value)); + this.showTime(this.currentDate); + + this.animateHands(); + + if (this.params.switchOnClick === true) + setTimeout(function () + { + this.setElementValue(); + this.hide(); + }.bind(this), 200); + } + }, + _onSelectAM: function (e) + { + $('.dtp-actual-meridien').find('a').removeClass('selected'); + $(e.currentTarget).addClass('selected'); + + if (this.currentDate.hour() >= 12) + { + if (this.currentDate.subtract(12, 'hours')) + this.showTime(this.currentDate); + } + this.toggleTime((this.currentView === 1)); + }, + _onSelectPM: function (e) + { + $('.dtp-actual-meridien').find('a').removeClass('selected'); + $(e.currentTarget).addClass('selected'); + + if (this.currentDate.hour() < 12) + { + if (this.currentDate.add(12, 'hours')) + this.showTime(this.currentDate); + } + this.toggleTime((this.currentView === 1)); + }, + _hideCalendar: function() { + this.$dtpElement.find('.dtp-picker-calendar').addClass('hidden'); + }, + convertHours: function (h) + { + var _return = h; + + if (this.params.shortTime === true) + { + if ((h < 12) && this.isPM()) + { + _return += 12; + } + } + + return _return; + }, + setDate: function (date) + { + this.params.currentDate = date; + this.initDates(); + }, + setMinDate: function (date) + { + this.params.minDate = date; + this.initDates(); + }, + setMaxDate: function (date) + { + this.params.maxDate = date; + this.initDates(); + }, + destroy: function () + { + this._detachEvents(); + this.$dtpElement.remove(); + }, + show: function () + { + this.$dtpElement.removeClass('hidden'); + this._attachEvent($(window), 'keydown', this._onKeydown.bind(this)); + this._centerBox(); + this.$element.trigger('open'); + if (this.params.monthPicker === true) + { + this._hideCalendar(); + } + }, + hide: function () + { + ($ as any)(window).off('keydown', null, null, this._onKeydown.bind(this)); + this.$dtpElement.addClass('hidden'); + this.$element.trigger('close'); + }, + _centerBox: function () + { + var h = (this.$dtpElement.height() - this.$dtpElement.find('.dtp-content').height()) / 2; + this.$dtpElement.find('.dtp-content').css('marginLeft', -(this.$dtpElement.find('.dtp-content').width() / 2) + 'px'); + this.$dtpElement.find('.dtp-content').css('top', h + 'px'); + }, + enableDays: function () + { + var enableDays = this.params.enableDays; + if (enableDays) { + $(".dtp-picker-days tbody tr td").each(function () { + if (!(($.inArray($(this).index(), enableDays)) >= 0)) { + $(this).find('a').css({ + "background": "#e3e3e3", + "cursor": "no-drop", + "opacity": "0.5" + }).off("click"); + } + }); + } + } + + }; +})(jQuery, moment); \ No newline at end of file diff --git a/src/lib/datetime/datetime.component.ts b/src/lib/datetime/datetime.component.ts index 3d907e725..1ee9b40bc 100644 --- a/src/lib/datetime/datetime.component.ts +++ b/src/lib/datetime/datetime.component.ts @@ -222,7 +222,8 @@ export class PlexDateTimeComponent implements OnInit, AfterViewInit, OnChanges, time: this.type === 'time' || this.type === 'datetime', minDate: this.min, maxDate: this.max, - triggerEvent: 'focus' + triggerEvent: 'focus', + year: true }); this.$button.on('change', (event, date) => { diff --git a/src/lib/table/table.component.ts b/src/lib/table/table.component.ts index 895238f88..04a4ec468 100644 --- a/src/lib/table/table.component.ts +++ b/src/lib/table/table.component.ts @@ -1,13 +1,7 @@ -<<<<<<< HEAD import { Component, EventEmitter, Input, Optional, Output, Self } from '@angular/core'; -======= -import { AfterViewInit, Component, ContentChildren, ElementRef, EventEmitter, Input, Optional, Output, Renderer2, Self, ViewChild, ViewEncapsulation } from '@angular/core'; ->>>>>>> 8055766 (feat(plex-327): selector de transparecia en table head) import { Observable } from 'rxjs'; import { PlexColumnDirective } from './columns.directive'; import { IPlexTableColumns } from './table.interfaces'; -import { PlexLayoutComponent } from '../layout/layout.component'; - @Component({ selector: 'plex-table', @@ -71,11 +65,7 @@ export class PlexTableComponent { public _height: string; -<<<<<<< HEAD @Input() headOpacity = 0; -======= - @Input() headOpacity = 100; ->>>>>>> 8055766 (feat(plex-327): selector de transparecia en table head) /** * Indica la altura del listado respecto a su contenedor