396 lines
No EOL
16 KiB
JavaScript
396 lines
No EOL
16 KiB
JavaScript
(function ($) {
|
|
'use strict';
|
|
$.fn.dateTimePicker = function (options) {
|
|
|
|
var settings = $.extend({
|
|
selectData: "now",
|
|
dateFormat: "YYYY-MM-DD HH:mm",
|
|
showTime: true,
|
|
locale: 'en',
|
|
positionShift: { top: 20, left: 0},
|
|
title: "Select Date and Time",
|
|
buttonTitle: "Select",
|
|
allowBackwards: false
|
|
}, options);
|
|
moment.locale(settings.locale);
|
|
var elem = this;
|
|
var limitation = {"hour": 23, "minute": 59};
|
|
var mousedown = false;
|
|
var timeout = 800;
|
|
var selectDate = settings.selectData == "now" ? moment() : moment(settings.selectData, settings.dateFormat);
|
|
if (selectDate < moment() && (settings.allowBackwards == false)) {
|
|
selectDate = moment();
|
|
}
|
|
var startDate = copyDate(moment());
|
|
var lastSelected = copyDate(selectDate);
|
|
return this.each(function () {
|
|
if (lastSelected != selectDate) {
|
|
selectDate = copyDate(lastSelected);
|
|
}
|
|
elem.addClass("dtp_main");
|
|
updateMainElemGlobal();
|
|
// elem.text(selectDate.format(settings.dateFormat));
|
|
function updateMainElemGlobal() {
|
|
var arrF = settings.dateFormat.split(' ');
|
|
if (settings.showTime && arrF.length != 2) {
|
|
arrF.length = 2;
|
|
arrF[0] = 'DD/MM/YY';
|
|
arrF[1] = 'HH:mm';
|
|
}
|
|
var $s = $('<span>');
|
|
$s.text(lastSelected.format(arrF[0]));
|
|
elem.empty();
|
|
elem.append($s);
|
|
$s = $('<i>');
|
|
$s.addClass('fa fa-calendar ico-size');
|
|
elem.append($s);
|
|
if (settings.showTime) {
|
|
$s = $('<span>');
|
|
$s.text(lastSelected.format(arrF[1]));
|
|
elem.append($s);
|
|
$s = $('<i>');
|
|
$s.addClass('fa fa-clock-o ico-size');
|
|
elem.append($s);
|
|
}
|
|
}
|
|
elem.on('click', function () {
|
|
var $win = $('<div>');
|
|
$win.addClass("dtp_modal-win");
|
|
var $body = $('body');
|
|
$body.append($win);
|
|
var $content = createContent();
|
|
$body.append($content);
|
|
var offset = elem.offset();
|
|
$content.css({top: (offset.top + settings.positionShift.top) + "px", left: (offset.left + settings.positionShift.left) + "px"});
|
|
feelDates(selectDate);
|
|
$win.on('click', function () {
|
|
$content.remove();
|
|
$win.remove();
|
|
})
|
|
if (settings.showTime) {
|
|
attachChangeTime();
|
|
var $fieldTime = $('#field-time');
|
|
var $hour = $fieldTime.find('#d-hh');
|
|
var $minute = $fieldTime.find('#d-mm');
|
|
}
|
|
|
|
function feelDates(selectM) {
|
|
var $fDate = $content.find('#field-data');
|
|
$fDate.empty();
|
|
$fDate.append(createMonthPanel(selectM));
|
|
$fDate.append(createCalendar(selectM));
|
|
}
|
|
|
|
function createCalendar(selectedMonth) {
|
|
var $c = $('<div>');
|
|
$c.addClass('dtp_modal-calendar');
|
|
for (var i = 0; i < 7; i++) {
|
|
var $e = $('<div>');
|
|
$e.addClass('dtp_modal-calendar-cell dtp_modal-colored');
|
|
$e.text(moment().weekday(i).format('ddd'));
|
|
$c.append($e);
|
|
}
|
|
var m = copyDate(selectedMonth);
|
|
m.date(1);
|
|
// console.log(m.format('DD--MM--YYYY'));
|
|
// console.log(selectData.format('DD--MM--YYYY'));
|
|
// console.log(m.weekday());
|
|
var flagStart = totalMonths(selectedMonth) === totalMonths(startDate);
|
|
var flagSelect = totalMonths(lastSelected) === totalMonths(selectedMonth);
|
|
var cerDay = parseInt(selectedMonth.format('D'));
|
|
var dayNow = parseInt(startDate.format('D'));
|
|
for (var i = 0; i < 6; i++) {
|
|
for (var j = 0; j < 7; j++) {
|
|
var $b = $('<div>');
|
|
$b.html(' ');
|
|
$b.addClass('dtp_modal-calendar-cell');
|
|
if (m.month() == selectedMonth.month() && m.weekday() == j) {
|
|
var day = parseInt(m.format('D'));
|
|
$b.text(day);
|
|
if (flagStart && day < dayNow) {
|
|
|
|
if (settings.allowBackwards == false) {
|
|
$b.addClass('dtp_modal-grey');
|
|
} else {
|
|
$b.addClass('cursorily');
|
|
$b.bind('click', changeDate);
|
|
}
|
|
|
|
}
|
|
else if (flagSelect && day == cerDay) {
|
|
$b.addClass('dtp_modal-cell-selected');
|
|
}
|
|
else {
|
|
$b.addClass('cursorily');
|
|
$b.bind('click', changeDate);
|
|
}
|
|
m.add(1, 'days');
|
|
}
|
|
$c.append($b);
|
|
}
|
|
}
|
|
return $c;
|
|
}
|
|
|
|
function changeDate() {
|
|
|
|
var $div = $(this);
|
|
selectDate.date($div.text());
|
|
lastSelected = copyDate(selectDate);
|
|
updateDate();
|
|
var $fDate = $content.find('#field-data');
|
|
var old = $fDate.find('.dtp_modal-cell-selected');
|
|
old.removeClass('dtp_modal-cell-selected');
|
|
old.addClass('cursorily');
|
|
$div.addClass('dtp_modal-cell-selected');
|
|
$div.removeClass('cursorily');
|
|
old.bind('click', changeDate);
|
|
$div.unbind('click');
|
|
// console.log(selectDate.format('DD-MM-YYYY'));
|
|
}
|
|
|
|
function createMonthPanel(selectMonth) {
|
|
var $d = $('<div>');
|
|
$d.addClass('dtp_modal-months');
|
|
var $s = $('<i></i>');
|
|
$s.addClass('fa fa-angle-left cursorily ico-size-month hov');
|
|
//$s.attr('data-fa-mask', 'fas fa-circle');
|
|
$s.bind('click', prevMonth);
|
|
$d.append($s);
|
|
$s = $('<span>');
|
|
$s.text(selectMonth.format("MMMM YYYY"));
|
|
$d.append($s);
|
|
$s = $('<i></i>');
|
|
$s.addClass('fa fa-angle-right cursorily ico-size-month hov');
|
|
$s.bind('click', nextMonth);
|
|
$d.append($s);
|
|
return $d;
|
|
}
|
|
|
|
function close() {
|
|
if (settings.showTime) {
|
|
lastSelected.hour(parseInt($hour.text()));
|
|
lastSelected.minute(parseInt($minute.text()));
|
|
selectDate.hour(parseInt($hour.text()));
|
|
selectDate.minute(parseInt($minute.text()));
|
|
}
|
|
updateDate();
|
|
$content.remove();
|
|
$win.remove();
|
|
}
|
|
|
|
function nextMonth() {
|
|
selectDate.add(1, 'month');
|
|
feelDates(selectDate);
|
|
}
|
|
|
|
function prevMonth() {
|
|
if (totalMonths(selectDate) > totalMonths(startDate) || settings.allowBackwards == true) {
|
|
selectDate.add(-1, 'month');
|
|
feelDates(selectDate);
|
|
}
|
|
}
|
|
|
|
function attachChangeTime() {
|
|
var $angles = $($content).find('i[id^="angle-"]');
|
|
// $angles.bind('click', changeTime);
|
|
$angles.bind('mouseup', function () {
|
|
mousedown = false;
|
|
timeout = 800;
|
|
});
|
|
$angles.bind('mousedown', function () {
|
|
mousedown = true;
|
|
changeTime(this);
|
|
});
|
|
}
|
|
|
|
function changeTime(el) {
|
|
var $el = this || el;
|
|
$el = $($el);
|
|
///angle-up-hour angle-up-minute angle-down-hour angle-down-minute
|
|
var arr = $el.attr('id').split('-');
|
|
var increment = 1;
|
|
if (arr[1] == 'down') {
|
|
increment = -1;
|
|
}
|
|
appendIncrement(arr[2], increment);
|
|
setTimeout(function () {
|
|
autoIncrement($el);
|
|
}, timeout);
|
|
}
|
|
|
|
function autoIncrement(el) {
|
|
if (mousedown) {
|
|
if (timeout > 200) {
|
|
timeout -= 200;
|
|
}
|
|
changeTime(el);
|
|
}
|
|
}
|
|
|
|
function appendIncrement(typeDigits, increment) {
|
|
|
|
var $i = typeDigits == "hour" ? $hour : $minute;
|
|
var val = parseInt($i.text()) + increment;
|
|
if (val < 0) {
|
|
val = limitation[typeDigits];
|
|
}
|
|
else if (val > limitation[typeDigits]) {
|
|
val = 0;
|
|
}
|
|
$i.text(formatDigits(val));
|
|
}
|
|
|
|
function formatDigits(val) {
|
|
|
|
if (val < 10) {
|
|
return '0' + val;
|
|
}
|
|
return val;
|
|
}
|
|
|
|
function createTimer() {
|
|
var $div = $('<div>');
|
|
$div.addClass('dtp_modal-time-mechanic');
|
|
var $panel = $('<div>');
|
|
$panel.addClass('dtp_modal-append');
|
|
var $i = $('<i>');
|
|
$i.attr('id', 'angle-up-hour');
|
|
$i.addClass('fa fa-angle-up ico-size-large cursorily hov');
|
|
$panel.append($i);
|
|
var $m = $('<span>');
|
|
$m.addClass('dtp_modal-midle');
|
|
$panel.append($m);
|
|
$i = $('<i>');
|
|
$i.attr('id', 'angle-up-minute');
|
|
$i.addClass('fa fa-angle-up ico-size-large cursorily hov');
|
|
$panel.append($i);
|
|
$div.append($panel);
|
|
|
|
$panel = $('<div>');
|
|
$panel.addClass('dtp_modal-digits');
|
|
var $d = $('<span>');
|
|
$d.addClass('dtp_modal-digit');
|
|
$d.attr('id', 'd-hh');
|
|
$d.text(lastSelected.format('HH'));
|
|
$panel.append($d);
|
|
$m = $('<span>');
|
|
$m.addClass('dtp_modal-midle-dig');
|
|
$m.html(':');
|
|
$panel.append($m);
|
|
$d = $('<span>');
|
|
$d.addClass('dtp_modal-digit');
|
|
$d.attr('id', 'd-mm');
|
|
$d.text(lastSelected.format('mm'));
|
|
$panel.append($d);
|
|
$div.append($panel);
|
|
|
|
$panel = $('<div>');
|
|
$panel.addClass('dtp_modal-append');
|
|
$i = $('<i>');
|
|
$i.attr('id', 'angle-down-hour');
|
|
$i.addClass('fa fa-angle-down ico-size-large cursorily hov');
|
|
$panel.append($i);
|
|
$m = $('<span>');
|
|
$m.addClass('dtp_modal-midle');
|
|
$panel.append($m);
|
|
$i = $('<i>');
|
|
$i.attr('id', 'angle-down-minute');
|
|
$i.addClass('fa fa-angle-down ico-size-large cursorily hov');
|
|
$panel.append($i);
|
|
$div.append($panel);
|
|
return $div;
|
|
}
|
|
|
|
function createContent() {
|
|
var $c = $('<div>');
|
|
if (settings.showTime) {
|
|
$c.addClass("dtp_modal-content");
|
|
}
|
|
else {
|
|
$c.addClass("dtp_modal-content-no-time");
|
|
}
|
|
var $el = $('<div>');
|
|
$el.addClass("dtp_modal-title");
|
|
$el.text(settings.title);
|
|
$c.append($el);
|
|
$el = $('<div>');
|
|
$el.addClass('dtp_modal-cell-date');
|
|
$el.attr('id', 'field-data');
|
|
$c.append($el);
|
|
if (settings.showTime) {
|
|
$el = $('<div>');
|
|
$el.addClass('dtp_modal-cell-time');
|
|
var $a = $('<div>');
|
|
$a.addClass('dtp_modal-time-block');
|
|
$a.attr('id', 'field-time');
|
|
$el.append($a);
|
|
var $line = $('<div>');
|
|
$line.attr('id', 'time-line');
|
|
$line.addClass('dtp_modal-time-line');
|
|
$line.text(lastSelected.format(settings.dateFormat));
|
|
|
|
$a.append($line);
|
|
$a.append(createTimer());
|
|
var $but = $('<div>');
|
|
$but.addClass('dpt_modal-button');
|
|
$but.text(settings.buttonTitle);
|
|
$but.bind('click', close);
|
|
$el.append($but);
|
|
$c.append($el);
|
|
}
|
|
return $c;
|
|
}
|
|
function updateDate() {
|
|
if (settings.showTime) {
|
|
$('#time-line').text(lastSelected.format(settings.dateFormat));
|
|
}
|
|
updateMainElem();
|
|
elem.next().val(selectDate.format(settings.dateFormat));
|
|
if (!settings.showTime) {
|
|
$content.remove();
|
|
$win.remove();
|
|
}
|
|
}
|
|
|
|
function updateMainElem() {
|
|
var arrF = settings.dateFormat.split(' ');
|
|
if (settings.showTime && arrF.length != 2) {
|
|
arrF.length = 2;
|
|
arrF[0] = 'DD/MM/YY';
|
|
arrF[1] = 'HH:mm';
|
|
}
|
|
var $s = $('<span>');
|
|
$s.text(lastSelected.format(arrF[0]));
|
|
elem.empty();
|
|
elem.append($s);
|
|
$s = $('<i>');
|
|
$s.addClass('fa fa-calendar ico-size');
|
|
elem.append($s);
|
|
if (settings.showTime) {
|
|
$s = $('<span>');
|
|
$s.text(lastSelected.format(arrF[1]));
|
|
elem.append($s);
|
|
$s = $('<i>');
|
|
$s.addClass('fa fa-clock-o ico-size');
|
|
elem.append($s);
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
function copyDate(d) {
|
|
return moment(d.toDate());
|
|
}
|
|
|
|
function totalMonths(m) {
|
|
var r = m.format('YYYY') * 12 + parseInt(m.format('MM'));
|
|
return r;
|
|
}
|
|
|
|
}(jQuery));
|
|
// fa-caret-down
|