You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1499 lines
45 KiB
1499 lines
45 KiB
(function ($, moment) { |
|
var pluginName = "bootstrapMaterialDatePicker"; |
|
var pluginDataName = "plugin_" + pluginName; |
|
|
|
moment.locale("en"); |
|
|
|
function Plugin(element, options) { |
|
this.currentView = 0; |
|
|
|
this.minDate; |
|
this.maxDate; |
|
|
|
this._attachedEvents = []; |
|
|
|
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, |
|
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 = $.fn.extend(this.params, options); |
|
|
|
this.name = "dtp_" + this.setName(); |
|
this.$element.attr("data-dtp", this.name); |
|
|
|
moment.locale(this.params.lang); |
|
|
|
this.init(); |
|
} |
|
|
|
$.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; |
|
}; |
|
|
|
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 += |
|
'<div class="year-picker-item" data-year="' + i + '">' + i + "</div>"; |
|
} |
|
this.midYear = y; |
|
var yearHtml = |
|
'<div class="dtp-picker-year hidden" >' + |
|
'<div><a href="javascript:void(0);" class="btn btn-default dtp-select-year-range before" style="margin: 0;"><i class="ti-angle-up"></i></a></div>' + |
|
yearPicker + |
|
'<div><a href="javascript:void(0);" class="btn btn-default dtp-select-year-range after" style="margin: 0;"><i class="ti-angle-down"></i></a></div>' + |
|
"</div>"; |
|
|
|
this.template = |
|
'<div class="dtp hidden" id="' + |
|
this.name + |
|
'">' + |
|
'<div class="dtp-content">' + |
|
'<div class="dtp-date-view">' + |
|
'<header class="dtp-header">' + |
|
'<div class="dtp-actual-day">Lundi</div>' + |
|
'<div class="dtp-close"><a href="javascript:void(0);"><i class="ti-close"></i></a></div>' + |
|
"</header>" + |
|
'<div class="dtp-date hidden">' + |
|
"<div>" + |
|
'<div class="left center p10">' + |
|
'<a href="javascript:void(0);" class="dtp-select-month-before"><i class="ti-angle-left"></i></a>' + |
|
"</div>" + |
|
'<div class="dtp-actual-month p80">MAR</div>' + |
|
'<div class="right center p10">' + |
|
'<a href="javascript:void(0);" class="dtp-select-month-after"><i class="ti-angle-right"></i></a>' + |
|
"</div>" + |
|
'<div class="clearfix"></div>' + |
|
"</div>" + |
|
'<div class="dtp-actual-num">13</div>' + |
|
"<div>" + |
|
'<div class="left center p10">' + |
|
'<a href="javascript:void(0);" class="dtp-select-year-before"><i class="ti-angle-left"></i></a>' + |
|
"</div>" + |
|
'<div class="dtp-actual-year p80' + |
|
(this.params.year ? "" : " disabled") + |
|
'">2014</div>' + |
|
'<div class="right center p10">' + |
|
'<a href="javascript:void(0);" class="dtp-select-year-after"><i class="ti-angle-right"></i></a>' + |
|
"</div>" + |
|
'<div class="clearfix"></div>' + |
|
"</div>" + |
|
"</div>" + |
|
'<div class="dtp-time hidden">' + |
|
'<div class="dtp-actual-maxtime">23:55</div>' + |
|
"</div>" + |
|
'<div class="dtp-picker">' + |
|
'<div class="dtp-picker-calendar"></div>' + |
|
'<div class="dtp-picker-datetime hidden">' + |
|
'<div class="dtp-actual-meridien">' + |
|
'<div class="left p20">' + |
|
'<a class="dtp-meridien-am" href="javascript:void(0);">AM</a>' + |
|
"</div>" + |
|
'<div class="dtp-actual-time p60"></div>' + |
|
'<div class="right p20">' + |
|
'<a class="dtp-meridien-pm" href="javascript:void(0);">PM</a>' + |
|
"</div>" + |
|
'<div class="clearfix"></div>' + |
|
"</div>" + |
|
'<div id="dtp-svg-clock">' + |
|
"</div>" + |
|
"</div>" + |
|
yearHtml + |
|
"</div>" + |
|
"</div>" + |
|
'<div class="dtp-buttons">' + |
|
'<button class="dtp-btn-now btn btn-flat hidden">' + |
|
this.params.nowText + |
|
"</button>" + |
|
'<button class="dtp-btn-clear btn btn-flat hidden">' + |
|
this.params.clearText + |
|
"</button>" + |
|
'<button class="dtp-btn-cancel btn btn-inverse m-r-10">' + |
|
this.params.cancelText + |
|
"</button>" + |
|
'<button class="dtp-btn-ok btn btn-success">' + |
|
this.params.okText + |
|
"</button>" + |
|
'<div class="clearfix"></div>' + |
|
"</div>" + |
|
"</div>" + |
|
"</div>"; |
|
|
|
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 ? "#26c6da" : "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 |
|
? "#26c6da" |
|
: "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 ? "#26c6da" : "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: "#26c6da", |
|
"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: "#26c6da", |
|
"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 = {}; |
|
|
|
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 += |
|
'<div class="dtp-picker-month">' + |
|
date.locale(this.params.lang).format("MMMM YYYY") + |
|
"</div>"; |
|
_template += '<table class="table dtp-picker-days"><thead>'; |
|
for (var i = 0; i < calendar.week.length; i++) { |
|
_template += |
|
"<th>" + |
|
moment(parseInt(calendar.week[i]), "d") |
|
.locale(this.params.lang) |
|
.format("dd") |
|
.substring(0, 1) + |
|
"</th>"; |
|
} |
|
|
|
_template += "</thead>"; |
|
_template += "<tbody><tr>"; |
|
|
|
for (var i = 0; i < calendar.days.length; i++) { |
|
if (i % 7 == 0) _template += "</tr><tr>"; |
|
_template += |
|
'<td data-date="' + |
|
moment(calendar.days[i]).locale(this.params.lang).format("D") + |
|
'">'; |
|
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 += |
|
'<span class="dtp-select-day">' + |
|
moment(calendar.days[i]).locale(this.params.lang).format("DD") + |
|
"</span>"; |
|
} else { |
|
if ( |
|
moment(calendar.days[i]).locale(this.params.lang).format("DD") === |
|
moment(this.currentDate).locale(this.params.lang).format("DD") |
|
) { |
|
_template += |
|
'<a href="javascript:void(0);" class="dtp-select-day selected">' + |
|
moment(calendar.days[i]).locale(this.params.lang).format("DD") + |
|
"</a>"; |
|
} else { |
|
_template += |
|
'<a href="javascript:void(0);" class="dtp-select-day">' + |
|
moment(calendar.days[i]).locale(this.params.lang).format("DD") + |
|
"</a>"; |
|
} |
|
} |
|
|
|
_template += "</td>"; |
|
} |
|
} |
|
_template += "</tr></tbody></table>"; |
|
|
|
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 $.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 $.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 (newYear < minYear || newYear > maxYear) { |
|
$(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(); |
|
} |
|
} |
|
}, |
|
_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").reomveClass("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", "#26c6da"); |
|
$(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", "#26c6da"); |
|
$(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 () { |
|
$(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);
|
|
|