Kub key
Разделы
Web-разработка
тестовая
Windows (Администрирование)
Поле ввода для выбора даты (input c календарем)
листинг HTML
<!-- листинг HTML --> <div class='cBDm'> <input class='cNpt' type='text'></input> <div class='cFCld cEHd'></div> </div>
листинг 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'>&nbsp;</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>