листинг CSS
<style type='text/css'>
/*** листинг CSS ***/
.cFCld {
margin: 0;
padding: 0;
display: inline-block;
position: absolute;
z-index: 365;
top: 0;
left: 0;
font-family: Tahoma, Verdana;
font-size: 14px;
color: #111;
background-color: #fff;
border: 2px solid #77f;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0 5px 15px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.5);
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.cFCld .cMYTtl {
margin: 0;
padding: 3px 5px;
position: relative;
text-align: center;
font-family: Verdana, Tahoma;
border: 1px dotted #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.cFCld .cMYTtl .cMPrv {
margin: 0;
padding: 0;
display: inline-block;
position: absolute;
width: 35px;
top: 0;
left: 0;
bottom: 0;
line-height: 180%;
color: #aaa;
border: 1px dotted #fff;
cursor: pointer;
}
.cFCld .cMYTtl .cMPrv:hover {
border: 1px dotted #aaa;
color: #111;
}
.cFCld .cMYTtl .cMNxt {
margin: 0;
padding: 0;
display: inline-block;
position: absolute;
width: 35px;
top: 0;
right: 0;
bottom: 0;
line-height: 180%;
color: #aaa;
background-color: #fff;
border: 1px dotted #fff;
cursor: pointer;
}
.cFCld .cMYTtl .cMNxt:hover {
border: 1px dotted #aaa;
color: #111;
}
.cFCld .cBMnt {
margin: 0;
padding: 0;
display: inline-block;
position: relative;
text-align: center;
cursor: pointer;
}
.cFCld .cMYTtl:hover .cBMnt {
text-decoration: underline;
color: 200CFF;
}
.cFCld .cBYr {
margin: 0;
padding: 3px 5px;
display: inline-block;
position: relative;
text-align: center;
cursor: pointer;
}
.cFCld .cMYTtl:hover .cBYr {
text-decoration: underline;
color: 200CFF;
}
.cFCld .cWMFrs {
text-align: right;
}
.cFCld .cBDWk {
text-align: left;
}
.cFCld .cBDWk .cDWTtl {
margin: 0;
padding: 3px 5px;
display: inline-block;
width: 25px;
text-align: center;
border: 1px solid #e4e9ff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.cFCld .cBDWk .cDWNmb {
margin: 0;
padding: 3px 5px;
display: inline-block;
width: 25px;
text-align: center;
border: 1px solid #e4e9ff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.cFCld .cBDWk .cDWNmb {
cursor: pointer;
}
.cFCld .cBDWk .cDRed {
color: #f00;
}
.cFCld .cBDWk .cDOff {
color: #f00;
}
.cFCld .cBDWk .cDWAct {
border: 1px solid #0f0;
background-color: #cfc;
}
.cFCld .cBDWk .cDWNmb:hover {
border: 1px solid #aaa;
}
.cFCld .cBDWk .cDWEmp {
margin: 0;
padding: 3px 5px;
display: inline-block;
width: 25px;
text-align: center;
border: 1px solid #fff;
}
.cFCld .cMNLst {
margin: 0;
padding: 0;
display: inline-block;
position: absolute;
top: 20px;
left: 0;
height: 100px;
width: 120px;
overflow: auto;
background-color: #fff;
text-align: center;
font-family: Verdana, Tahoma;
font-size: 14px;
color: #111;
border: 1px solid #fff;
-webkit-bottom-left-border-radius: 8px;
-webkit-bottom-right-border-radius: 8px;
-moz-bottom-left-border-radius: 8px;
-moz-bottom-right-border-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
-moz-box-shadow: 0 8px 15px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 8px 15px rgba(0,0,0,0.5);
box-shadow: 0 8px 15px rgba(0,0,0,0.5);
}
.cMNLst .cMNm {
margin: 0;
padding: 3px 5px;
text-align: center;
border: 1px solid #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.cMNLst .cMNm:hover {
border: 1px solid #ccc;
}
.cFCld .cYLst {
margin: 0;
padding: 0;
display: inline-block;
position: absolute;
top: 20px;
left: -11px;
height: 100px;
width: 80px;
overflow: auto;
background-color: #fff;
text-align: center;
font-family: Verdana, Tahoma;
font-size: 14px;
color: #111;
border: 1px solid #fff;
-webkit-bottom-left-border-radius: 8px;
-webkit-bottom-right-border-radius: 8px;
-moz-bottom-left-border-radius: 8px;
-moz-bottom-right-border-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
-moz-box-shadow: 0 8px 15px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 8px 15px rgba(0,0,0,0.5);
box-shadow: 0 8px 15px rgba(0,0,0,0.5);
}
.cYLst .cLElm {
margin: 0;
padding: 3px 0;
font-family: Verdana, 'MS Sans Serif';
font-size: 14px;
text-align: center;
color: #000000;
border: 1px solid #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
}
.cYLst .cLElm:hover {
border: 1px solid #ccc;
}
.cFCld .cDSlc,
.cFCld .cMDCnt {
display: none;
}
.cFCld .cBSNo,
.cFCld .cBSNo * {
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.cEHd,
.cFCld .cEHd,
.cFDCld .cEHd {
display: none;
}
</style>
листинг JavaScript (jQuery v2.1.0)
<script type='text/javascript'>
// листинг JavaScript (jQuery v2.1.0)
var ogCld = { // Cld - calendar
// режим отображения календаря
// 0 - отображается по клику input
// 1 - отображается всегда
bMd: 0,
// режим смещения к предыдущей
//или к следующей дате (0 - год, 1 - месяц)
bInc: 1,
// объект jQ - текущий календарь
oCld: $(),
// выбор числа месяца - - -
mthNMSlc: function() {
oCld = ogCld.oCld;
// - - - -
oTrg = $(this).parents('.cFCld');
oTrg.find('span.cCDay').text($(this).text());
// - - - -
oTrg.find('.cDWNmb').removeClass('cDWAct');
$(this).addClass('cDWAct');
// сохраняем выбранное число месяца
oCld.find('.cDSlc').text($(this).text());
// выбранная дата календаря
sDt = oCld.find('.cDt').text();
// если режим отображения календаря совместно с input, то
if(ogCld.bMd == 1) {
// определяем поле ввода где нужно отобразить выбранную дату календаря - - -
oPrn = oCld.parent();
oNpt = oPrn.find('input[type=text]');
// - - -
// выводим дату
oNpt.val(sDt);
// скрываем календарь
oCld.addClass('cEHd');
}
},
// - - -
// клик по названию месяца - - -
mthMClc: function() {
oCld = ogCld.oCld;
// - - - -
// скрываем список годов
oCld.find('.cYLst').addClass('cEHd');
// - - - -
oTrg = $(this).parents('.cBMnt').find('.cMNLst');
// рассчитываем позицию появления списка месяцев - - -
iWdt = $(this).outerWidth();
iLft = Math.round(iWdt / 2) -53;
oTrg.css('left', iLft);
// - - -
// отображаем либо скрываем список месяцев
oTrg.toggleClass('cEHd');
// прокручиваем список до текущего месяца - - -
sMnt = $(this).text();
oTrg.animate({scrollTop: '0px'}, 0);
iTop = oTrg.find('.cMNm:contains(' +sMnt+ ')').position().top;
iTop = Math.round(iTop);
sTop = '' +iTop+ 'px';
oTrg.animate({scrollTop: sTop}, 0);
// - - -
},
// - - -
// выбор месяца - - -
mthMSlc: function() {
oCld = $(this).parents('.cFCld');
oLst = $(this).parents('.cMNLst');
oTrg = $(this).parents('.cBMnt').find('span.cAct');
oTr2 = oCld.find('.cDt .cCMnt');
sNm = $(this).find('.cNm').text();
iMnt = $(this).attr('title');
iYr = oCld.find('.cDt .cCYr').text();
// - - - -
// определяем кол-во дней в выбранном месяце
iMDCnt = ogCld.fncMDCnt(iMnt, iYr);
// сохраняем кол-во дней в текущем месяце
oCld.find('.cMDCnt').text(iMDCnt);
oTrg.text(sNm);
oTr2.text(iMnt);
// - - - -
oLst.addClass('cEHd');
ogCld.mthMDUpd();
},
// - - -
// клик по номеру года - - -
mthYClc: function() {
oCld = ogCld.oCld;
// - - - -
oCld.find('.cMNLst').addClass('cEHd');
// - - - -
oTrg = $(this).parents('.cBYr').find('.cYLst');
oTrg.toggleClass('cEHd');
// прокручиваем список до текущего года - - -
iYr = $(this).text();
oTrg.animate({scrollTop: '0px'}, 0);
iTop = oTrg.find('.cLElm:contains(' +iYr+ ')').position().top;
iTop = Math.round(iTop);
sTop = '' +iTop+ 'px';
oTrg.animate({scrollTop: sTop}, 0);
// - - -
},
// - - -
// выбор номера года - - -
mthYSlc: function() {
oCld = $(this).parents('.cFCld');
oLst = $(this).parents('.cYLst');
oTrg = $(this).parents('.cBYr').find('span.cAct');
oTr2 = $(this).parents('.cFCld').find('span.cCYr');
iYr = $(this).text() *1;
iMnt = oCld.find('.cDt .cCMnt').text() *1;
// - - - -
oTrg.text(iYr);
oTr2.text(iYr);
// если текущий месяц февраль обновляем кол-во дней в месяце - - -
if(iMnt == 2) {
// определяем название месяца
iMDCnt = ogCld.fncMDCnt(iMnt, iYr);
// сохраняем кол-во дней в текущем месяце
oCld.find('.cMDCnt').text(iMDCnt);
}
// - - -
oLst.addClass('cEHd');
ogCld.mthMDUpd();
},
// - - -
// обновление дней месяца - - -
mthMDUpd: function() {
oCld = ogCld.oCld;
// - - - -
iMDCnt = oCld.find('.cMDCnt').text() *1;
// определяем номер текущего месяца
iMnt = oCld.find('.cDt .cCMnt').text();
// определяем текущий год
iYr = oCld.find('.cDt .cCYr').text();
// определяем день недели 1-го числа текущего месяца
iDWk = ogCld.fncGDWk(iMnt, iYr);
// определяем день месяца календаря - - -
iDay = oCld.find('.cDSlc').text();
if(iDay < 1)
iDay = oCld.find('.cDt .cCDay').text();
// если кол-во дней в выбранном месяце меньше, чем
//последнее выбранное число другого месяца, то
//выбираем максимальное число текущего месяца
if(iMDCnt < iDay) {
iDay = iMDCnt;
// обновляем выбранное число месяца
oCld.find('.cDt .cCDay').text(iDay);
} else {
// обновляем выбранное число месяца
oCld.find('.cDt .cCDay').text(iDay);
}
// - - -
// список "красных дней календаря" - - -
oDRed = {
'0.00.00': 'вхд'
};
// - - -
// создаем HTML-разметку для чисел выбранного месяца - - -
sHTML = "<div class='cBDWk cWMFrs'>";
k = iDWk;
for(i = 1; i < k; i++)
sHTML += "<div class='cDWEmp'> </div>";
for(i = 1; i <= iMDCnt; i++) {
// определяем выбранный день - - -
sDWAct = '';
if(i == iDay)
sDWAct = ' cDWAct';
// - - -
// определяем "красные дни" - - -
sDCrr = i+ '.' +iMnt+ '.' +iYr;
// - - - -
sDRed = '';
if(sDCrr in oDRed)
sDRed = ' cDRed';
// - - -
// определяем выходной день - - -
sDOff = '';
if(((k % 7) == 6) ||
((k % 7) == 0))
sDOff = ' cDOff';
// - - -
if((k % 7) == 1)
sHTML += "<div class='cBDWk'><div class='cDWNmb" +sDWAct + sDRed + sDOff+ "'>" +i+ "</div>";
else if((k % 7) == 0)
sHTML += "<div class='cDWNmb" +sDWAct + sDRed + sDOff+ "'>" +i+ "</div></div>";
else
sHTML += "<div class='cDWNmb" +sDWAct + sDRed + sDOff+ "'>" +i+ "</div>";
k++;
}
sHTML += "</div>";
// - - -
oCld.find('.cBDWk:has(.cDWNmb)').remove();
oCld.find('.cBDWk').after(sHTML);
// обновление обработчика клика для чисел месяца
ogCld.evnNMSlc();
},
// - - -
// инициализация переменных - - -
// aDt - значение даты {'0' => 'iDay', '1' => 'sMnt', '2' => 'iYr'}
mthLd: function(aDt) {
oCld = ogCld.oCld;
// для получения дня недели 1 января, нужно получить остаток от деления на 28 нужного года
//пример: oDWYr[2000 % 28]
oDWYr = {'0': '5', '1': '7', '2': '1', '3': '2', '4': '3', '5': '5', '6': '6', '7': '7', '8': '1', '9': '3', '10': '4', '11': '5', '12': '6', '13': '1', '14': '2', '15': '3', '16': '4', '17': '6', '18': '7', '19': '1', '20': '2', '21': '4', '22': '5', '23': '6', '24': '7', '25': '2', '26': '3', '27': '4'};
// - - - -
iDay = aDt[0] *1;
iMnt = aDt[1] *1;
iYr = aDt[2] *1;
// - - - -
oDt = oCld.find('.cDt');
oDt.find('.cCDay').text(iDay);
oDt.find('.cCMnt').text(aDt[1]);
oDt.find('.cCYr').text(iYr);
// определяем день недели 1 января выбранного года - - -
iDWk = oDWYr[iYr % 28];
// - - -
// выводим год - - -
oCld.find('.cBYr .cAct').text(iYr);
// - - -
// определяем кол-во дней в текущем месяце - - -
// определяем название месяца
iMDCnt = ogCld.fncMDCnt(iMnt, iYr);
// сохраняем кол-во дней в текущем месяце
oCld.find('.cMDCnt').text(iMDCnt);
// - - -
// выводим месяц - - -
sMnt = oCld.find('.cMNLst .cMNm[title=' +aDt[1]+ '] .cNm').text();
oCld.find('.cBMnt .cAct').text(sMnt);
// - - -
ogCld.mthMDUpd();
},
// - - -
// предшествующий месяц, год - - -
mthMPrv: function() {
oCld = ogCld.oCld;
// - - - -
// определяем число месяца
iDay = oCld.find('.cDt .cCDay').text();
// определяем номер месяца
iMnt = oCld.find('.cDt .cCMnt').text();
// определяем год
iYr = oCld.find('.cDt .cCYr').text();
// - - - -
// определяем предыдущий месяц - - -
if(ogCld.bInc == 1) {
iMnt--;
if(iMnt < 1) {
iMnt = 12;
iYr--;
}
// получаем строковое значение номера месяца - - -
if((iMnt / 10) < 1)
sMnt = '0' +iMnt;
else
sMnt = iMnt;
// - - -
// - - - определяем предыдущий год - - -
} else {
sMnt = iMnt;
iYr--;
}
// - - -
aDt = {};
aDt[0] = iDay;
aDt[1] = sMnt;
aDt[2] = iYr;
// - - - -
ogCld.mthLd(aDt);
},
// - - -
// следующий месяц, год - - -
mthMNxt: function() {
oCld = ogCld.oCld;
// - - - -
// определяем число месяца
iDay = oCld.find('.cDt .cCDay').text();
// определяем номер месяца
iMnt = oCld.find('.cDt .cCMnt').text();
// определяем год
iYr = oCld.find('.cDt .cCYr').text();
// - - - -
// определяем предыдущий месяц - - -
if(ogCld.bInc == 1) {
iMnt++;
if(iMnt > 12) {
iMnt = 1;
iYr++;
}
// получаем строковое значение номера месяца - - -
if((iMnt / 10) < 1)
sMnt = '0' +iMnt;
else
sMnt = iMnt;
// - - -
// - - - определяем предыдущий год - - -
} else {
sMnt = iMnt;
iYr++;
}
// - - -
aDt = {};
aDt[0] = iDay;
aDt[1] = sMnt;
aDt[2] = iYr;
// - - - -
ogCld.mthLd(aDt);
},
// - - -
// формирование списка годов - - -
mthGYLst: function() { // GYLst - get year list
// формируем список годов с 1900 по 2100 - - -
sYLst = ''; // MNLst - mounth names list
for(i = 1900; i < 2101; i++)
sYLst += "<div class='cLElm'>" +i+ "</div>";
// - - -
return sYLst;
},
// - - -
// формирование списка месяцев - - -
mthGMLst: function() { // GMLst - get month list
oNMnt = {'01': 'Январь', '02': 'Февраль', '03': 'Март', '04': 'Апрель', '05': 'Май', '06': 'Июнь', '07': 'Июль', '08': 'Август', '09': 'Сентябрь', '10': 'Октябрь', '11': 'Ноябрь', '12': 'Декабрь'};
// формируем список месяцев - - -
sMNLst = ''; // MNLst - mounth names list
for(i = 1; i <= 12; i++) {
if((i / 10) < 1)
sNmb = '0' + i;
else
sNmb = i;
// - - - -
// название месяца
sNm = oNMnt[sNmb];
sMNLst += "<div class='cMNm' title='" +sNmb+ "'><span class='cNm'>" +sNm+ "</span></div>";
}
// - - -
return sMNLst;
},
// - - -
// скрытие календаря, если клик произведен в не календаря - - -
mthCnc: function(oEvn) {
oCld = ogCld.oCld;
// - - - -
oTrg = $(oEvn.target);
iPrn = oTrg.parents('.cFCld').size();
bCHd = oCld.is('.cEHd');
if((iPrn > 0) ||
(ogCld.bMd == 0) ||
(bCHd == 1))
return 0; // ###
// - - - -
// скрываем список названий месяцев
oCld.find('.cMNLst').addClass('cEHd');
// скрываем список годов
oCld.find('.cYLst').addClass('cEHd');
// если режим отображения календаря совместно с input, то - - -
//выводим выбранную дату
if(ogCld.bMd == 1) {
// выбранная дата календаря
sDt = oCld.find('.cDt').text();
// определяем поле ввода где нужно отобразить выбранную дату календаря - - -
oPrn = oCld.parent();
oNpt = oPrn.find('input[type=text]');
// - - -
// выводим дату
oNpt.val(sDt);
}
// - - -
// скрываем календарь
oCld.addClass('cEHd');
return 0; // ###
},
// - - -
// определение кол-ва дней в месяце - - -
// iMnt - номер месяца
// iYr - год
fncMDCnt: function(iMnt, iYr) { // MDCnt - month days count
iMnt *= 1;
iYr *= 1;
// кол-во дней в каждом месяце
oMDCnt = {1: 31, 2: 28, 3: 31, 4: 30, 5: 31, 6: 30, 7: 31, 8: 31, 9: 30, 10: 31, 11: 30, 12: 31};
// - - - -
// определяем кол-во дней в феврале
if((iYr % 4) == 0)
oMDCnt[2] = '29';
return oMDCnt[iMnt];
},
// - - -
// определение дня недели 1-го числа текущего месяца - - -
// iMnt - номер месяца
// iYr - год
fncGDWk: function(iMnt, iYr) { // GDWk - get day week
iMnt *= 1;
iYr *= 1;
// для получения дня недели 1 января, нужно получить остаток от деления на 28 нужного года
//пример: oDWYr[2000 % 28]
oDWYr = {'0': '5', '1': '7', '2': '1', '3': '2', '4': '3', '5': '5', '6': '6', '7': '7', '8': '1', '9': '3', '10': '4', '11': '5', '12': '6', '13': '1', '14': '2', '15': '3', '16': '4', '17': '6', '18': '7', '19': '1', '20': '2', '21': '4', '22': '5', '23': '6', '24': '7', '25': '2', '26': '3', '27': '4'};
// кол-во дней в каждом месяце
oMDCnt = {1: 31, 2: 28, 3: 31, 4: 30, 5: 31, 6: 30, 7: 31, 8: 31, 9: 30, 10: 31, 11: 30, 12: 31};
// - - - -
// определяем кол-во дней в феврале - - -
if((iYr % 4) == 0)
oMDCnt[2] = '29';
// - - -
// определяем кол-во дней с начала года до начала указанного месяца - - -
// (для определения дня недели 1 числа текущего месяца)
iDAll = 0;
for(i = 1; i < 13; i++) {
if(i < iMnt)
iDAll += oMDCnt[i] * 1;
}
// - - -
// определяем день недели 1 января выбранного года
iDWk = oDWYr[iYr % 28];
iDWk *= 1;
// определяем день недели 1-го числа указанного месяца - - -
iDAll += iDWk;
iDWk = iDAll % 7;
if(iDWk == 0)
iDWk = 7;
// - - -
return iDWk;
},
// - - -
// функция для преобразования строки с датой в формате 'дд.мм.гггг' - - -
//в объект вида ([0] => 'дд', [1] => 'мм', [2] => 'гггг')
//в случае ошибки возвращает ([0] => '-1')
fncDMY: function(sDt) {
oRsl = {};
oRsl[0] = '-1';
iDLng = sDt.length;
// предполагаем, что передана строка
//формата 'дд.мм.гггг'
if(iDLng == 9) {
sDt = '0' +sDt;
iDLng++
}
if(iDLng < 10)
return oRsl; // ###
if(sDt[2] != sDt[5])
return oRsl; // ###
sDay = sDt.substr(0, 2);
sMnt = sDt.substr(3, 2);
sYr = sDt.substr(6, 4);
// - - - -
// проверяем, что строка содержит только цифры - - -
sTmp = sDay + sMnt + sYr;
bTmp = 1;
for(i = 0; i < 8; i++) {
iCd = sTmp.charCodeAt(i);
if((iCd < 48) ||
(iCd > 57)) {
bTmp = 0;
break;
}
}
if(bTmp == 0)
return oRsl; // ###
// - - -
oRsl[0] = sDay;
oRsl[1] = sMnt;
oRsl[2] = sYr;
// - - - -
return oRsl; // ###
},
// - - -
// функция возвращает текущую дату ПК - - -
//в формате (дд.мм.гггг)
fncNow: function() {
dtCrr = new Date();
iDay = dtCrr.getDate();
// получаем номер месяца (функция возвращает номер месяца, январь = 0)
iMnt = dtCrr.getMonth() +1;
iYr = dtCrr.getFullYear();
// - - - -
sMnt = '' +iMnt;
if(sMnt.length == 1)
sMnt = '0' +sMnt;
// - - - -
sRsl = '' +iDay+ '.' +sMnt+ '.' +iYr;
return sRsl;
},
// - - -
// событие выбора числа месяца - - -
evnNMSlc: function() {
$('.cFCld .cDWNmb').off('click').on('click', ogCld.mthNMSlc);
},
// - - -
// событие клика по названию месяца - - -
evnMClc: function() {
$('.cFCld .cBMnt span.cAct').off('click').on('click', ogCld.mthMClc);
},
// - - -
// событие выбора месяца - - -
evnMSlc: function() {
$('.cMNLst .cMNm').off('click').on('click', ogCld.mthMSlc);
},
// - - -
// событие клика по номеру года - - -
evnYClc: function() {
$('.cFCld .cBYr span.cAct').off('click').on('click', ogCld.mthYClc);
},
// - - -
// событие выбора номера года - - -
evnYSlc: function() {
$('.cYLst .cLElm').off('click').on('click', ogCld.mthYSlc);
},
// - - -
// событие отображение предыдущего месяца, года - - -
evnMPrv: function() {
$('.cFCld .cMPrv').off('click').on('click', ogCld.mthMPrv);
},
// - - -
// событие отображение следующего месяца, года - - -
evnMNxt: function() {
$('.cFCld .cMNxt').off('click').on('click', ogCld.mthMNxt);
},
// - - -
// событие скрытия календаря, если клик произведен в не календаря - - -
evnCnc: function() { // Cnc - cancel
$('body').off('click').on('click', ogCld.mthCnc);
},
// - - -
// первичная настройка календаря - - -
mthStrt: function() {
// проверяем если календарь не найден, завершаем настройку - - -
iTCnt = $('.cFCld').size(); // TCnt - target count
if(iTCnt < 1)
return false; // ###
// - - -
$('.cFCld').html("<div class='cDt cEHd'><span class='cCDay'>01</span>.<span class='cCMnt'>01</span>.<span class='cCYr'>2020</span></div><div class='cMYTtl'><div class='cMPrv cBSNo'><</div><div class='cMNxt cBSNo'>></div><div class='cBMnt'><span class='cAct'></span><div class='cMNLst cEHd'></div></div><div class='cBYr'><span class='cAct'></span><div class='cYLst cEHd'></div></div>год<span class='cDSlc'>-1</span><span class='cMDCnt'>-1</span></div><div class='cBDWk'><div class='cDWTtl'>Пн</div><div class='cDWTtl'>Вт</div><div class='cDWTtl'>Ср</div><div class='cDWTtl'>Чт</div><div class='cDWTtl'>Пт</div><div class='cDWTtl cDOff'>Сб</div><div class='cDWTtl cDOff'>Вс</div></div>");
// загружаем список месяцев
$('.cFCld .cMNLst').html(ogCld.mthGMLst());
// загружаем список годов
$('.cFCld .cYLst').html(ogCld.mthGYLst());
// - - - -
ogCld.evnNMSlc();
ogCld.evnMClc();
ogCld.evnMSlc();
ogCld.evnYClc();
ogCld.evnYSlc();
ogCld.evnMPrv();
ogCld.evnMNxt();
ogCld.evnCnc();
oPrn = $('.cFCld').parent();
// определяем поле ввода где нужно отобразить выбранную дату календаря
oNpt = oPrn.find('input[type=text]');
// - - - -
// определяем блок с классом cFDCld для представления календаря в виде строки
oFDCld = oPrn.find('.cFDCld');
// поле ввода найдено, то - - -
//меняем режим отображения календаря на совместно с input
if(oNpt.size() > 0) {
// меняем режим отображения календаря на совместно с input
ogCld.bMd = 1;
// отменяем ввод в input
oNpt.on('keypress',
function() {
return false;
});
oNpt.on('click',
function(oEvn) {
oEvn.stopPropagation();
oPrn = $(this).parent();
oTrg = oPrn.find('.cFCld');
// делаем активным текущий календарь
ogCld.oCld = oTrg;
// скрываем остальные открытые календари
$('.cFCld').not(oTrg).addClass('cEHd');
// если календарь отображен - - -
if(oTrg.is('.cEHd') == 0) {
sDt = oTrg.find('.cDt').text();
$(this).val(sDt);
// скрываем календарь
oTrg.addClass('cEHd');
return 0; // ###
}
// - - -
// дата по умолчанию
sDt = $(this).val();
// текущая дата
sCrn = ogCld.fncNow();
aDt = ogCld.fncDMY(sDt);
// если дата по умолчанию не определена, то делаем активной текущую дату
if(aDt[0] == '-1')
aDt = ogCld.fncDMY(sCrn);
// выбранное число месяца
oDSlc = oTrg.find('.cDSlc'); // cDSlc - day select
// если календарь только сформирован, то
// сохраняем число месяца как выбранное (cDSlc - day select)
if(oDSlc.text() == '-1')
oDSlc.text(aDt[0]);
// определяем координату где должен появиться календарь - - -
//(под полем ввода)
// определяем верхнюю точку - - -
iTop = $(this).position().top;
iHgh = $(this).outerHeight();
iTop += +iHgh;
sTop = '' +iTop+ 'px';
// - - -
// определяем левую точку - - -
iLft = $(this).position().left;
sLft = '' +iLft+ 'px';
// - - -
// - - -
// задаем координаты и показываем календарь - - -
oTrg.css('top', sTop);
oTrg.css('left', sLft);
oTrg.removeClass('cEHd');
// - - -
ogCld.mthLd(aDt);
});
return 0; // ###
// - - - если поле ввода не найдено, то показываем календарь - - -
} else {
oTrg = oPrn.find('.cFCld');
// делаем активным текущий календарь
ogCld.oCld = oTrg;
sCrn = ogCld.fncNow();
aDt = ogCld.fncDMY(sCrn);
// показываем календарь - - -
$('.cFCld').css('position', 'static');
$('.cFCld').removeClass('cEHd');
// - - -
ogCld.mthLd(aDt);
return 0; // ###
}
// - - -
}
// - - -
};
$(function() {
ogCld.mthStrt();
});
</script>