
- - - HTML
  $sCld = "<div class='cFCld cEHd'><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></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'></div><div class='cDWTtl'></div></div></div>";
- - - HTML

CSS - - -
.cFCld {
margin: 0;
padding: 0;
display: inline-block;
position: absolute;
z-index: 100;
top: 0;
left: 0;
font-family: Tahoma, Verdana;
font-size: 14px;
color: #111;
background-color: #fff;
border: 2px solid #77f;
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px;
-moz-box-shadow: 0 5px 15px rgba(0,0,0,0.5); /*  Firefox */
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.5); /*  Safari  Chrome */
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 #ccc;
-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;
}
.cBMnt {
margin: 0;
padding: 0;
display: inline-block;
position: relative;
text-align: center;
//border: 1px dotted #f00;
cursor: pointer;
}
.cFCld .cMYTtl:hover .cBMnt {
text-decoration: underline;
color: 200CFF;
}
.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,
.cFCld .cBDWk .cDWNmb {
margin: 0;
padding: 3px 5px;
display: inline-block;
width: 25px;
text-align: center;
border: 1px dotted #ccc;
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px;
}
.cFCld .cBDWk .cDWNmb {
cursor: pointer;
}
.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;
}
// - - - -
.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 dotted #ccc;
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px;
}

.cMNLst .cMNm {
margin: 0;
padding: 3px 5px;
text-align: center;
border: 1px dotted #ccc;
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px;
cursor: pointer;
}
.cMNLst .cMNm:hover {
border: 1px solid #ccc;
}

.cYLst {
margin: 0;
padding: 0;
display: inline-block;
position: absolute;
top: 20px;
left: -12px;
height: 100px;
width: 80px;
overflow: auto;
background-color: #fff;
text-align: center;
font-family: Verdana, Tahoma;
font-size: 14px;
color: #111;
border: 1px dotted #ccc;
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px;
}

.cYLst .cLElm {
margin: 0;
padding: 3px 0;
font-family: Verdana, 'MS Sans Serif';
font-size: 14px;
text-align: center;
color: #000000;
border: 1px dotted #aaa;
-webkit-border-radius: 3px; 
-moz-border-radius: 3px; 
border-radius: 3px;
cursor: pointer;
}
.cYLst .cLElm:hover {
border: 1px solid #ccc;
}

// - - - -
.cBSNo,
.cBSNo * { 
-moz-user-select: none;
-webkit-user-select: none;    
-khtml-user-select: none;
user-select: none;
}

.cEHd { // EHd = Element Hide
display: none;
}
- - - CSS

JS - - -
var ogCld = { // Cld - calendar
iDWk: 0,
iMDCnt: 0,
//   
// 0 -    input
// 1 -   
bFr: 0,
//     
//    (0 - , 1 - )
bMd: 1,

//    - - -
mthNMSlc: function() {
  oTrg = $(this).parents('.cFCld');

  oTrg.find('span.cCDay').text($(this).text());
  // - - - -
  oTrg.find('.cDWNmb').removeClass('cDWAct');
  $(this).addClass('cDWAct');

  //          - - -
  //    
  sDt = $('.cFCld .cDt').text();
  oPrn = $('.cFCld').parent();
  oNpt = oPrn.find('input[type=text]');

  //       input,  
  if(ogCld.bFr == 1) {
    //  
    oNpt.val(sDt);
    //  
    $('.cFCld').addClass('cEHd');
  }
},
// - - -

//     - - -
mthMClc: function() {
  $('.cYLst').addClass('cEHd');
  // - - - -
  oTrg = $(this).parents('.cBMnt').find('.cMNLst');

  iWdt = $(this).outerWidth();
  iLft = Math.round(iWdt / 2) -50;

  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() {
  oLst = $(this).parents('.cMNLst');
  oTrg = $(this).parents('.cBMnt').find('span.cAct');
  oTr2 = $(this).parents('.cFCld').find('span.cCMnt');
  sNm = $(this).find('.cNm').text();
  iMnt = $(this).attr('title');
  iMDCnt = $(this).find('.cEHd').text();
  // - - - -

  oTrg.text(sNm);
  oTr2.text(iMnt);
  ogCld.iMDCnt = iMDCnt;
  // - - - -

  oLst.addClass('cEHd');
  ogCld.mthMDUpd();
},
// - - -

//     - - -
mthYClc: function() {
  $('.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() {
  oLst = $(this).parents('.cYLst');
  oTrg = $(this).parents('.cBYr').find('span.cAct');
  oTr2 = $(this).parents('.cFCld').find('span.cCYr');
  iYr = $(this).text();
  // - - - -

  oTrg.text(iYr);
  oTr2.text(iYr);
  //     1    
  ogCld.iDWk = $(this).attr('title');
  //     -     29,   28
  ogCld.mthLYChk(iYr);

  oLst.addClass('cEHd');
  ogCld.mthMDUpd();
},
// - - -

//     -     29,   28 - - -
mthLYChk: function(iYr) { // LYChk - leap-year check
  if((iYr % 4) == 0)
$('.cMNLst .cMNm[title=02] .cEHd').text('29');
  else
$('.cMNLst .cMNm[title=02] .cEHd').text('28');
  // - - - -
},
// - - -

//    - - -
mthMDUpd: function() {
  iDWk = ogCld.mthGDWk();
  iDay = $('.cDt .cCDay').text();

  //  HTML-     - - -
  sHTML = "<div class='cBDWk cWMFrs'>";
  k = iDWk;
  for(i = 1; i < k; i++) 
sHTML += "<div class='cDWEmp'>&nbsp;</div>";

  iMDCnt = ogCld.iMDCnt;
  for(i = 1; i <= iMDCnt; i++) {
    //    - - -
    if(i != iDay)
sDWAct = '';
    else
sDWAct = ' cDWAct';
    // - - -

    if((k % 7) == 1)
sHTML += "<div class='cBDWk'><div class='cDWNmb" +sDWAct+ "'>" +i+ "</div>";
    else if((k % 7) == 0) 
sHTML += "<div class='cDWNmb" +sDWAct+ "'>" +i+ "</div></div>";
    else
sHTML += "<div class='cDWNmb" +sDWAct+ "'>" +i+ "</div>";

    k++;
  }
  sHTML += "</div>";
  // - - -

  $('.cBDWk:has(.cDWNmb)').remove();
  $('.cBDWk').after(sHTML);
  //      
  ogCld.evnNMSlc();
},
// - - -

//      - - -
mthGDWk: function() { // GDWk - get day week

  //     (0 - ) - - - 
  iMnt = $('.cFCld .cDt .cCMnt').text();
  iMnt--;
  // - - -

  //  -         - - -
// (    1   )
  iDAll = 0;
  $('.cFCld .cMNLst .cMNm').each(
function(iInd, oElm) {
  // -    - oElm
  iTmp = 0;
  if(iInd < iMnt)
iTmp = $(oElm).find('.cEHd').text();

  iDAll += +iTmp;
});
// - - -

  //    1   
  iDWk = ogCld.iDWk;

  iDAll += +iDWk;
  iDWk = iDAll % 7;
  if(iDWk == 0)
iDWk = 7;

  return iDWk;
},
// - - -

//   - - -
// aDt -   {'0' => 'iDay', '1' => 'sMnt', '2' => 'iYr'}
mthLd: function(aDt) {
  oDt = $('.cFCld .cDt');
  aDt[0] *= 1;
  oDt.find('.cCDay').text(aDt[0]);
  oDt.find('.cCMnt').text(aDt[1]);
  oDt.find('.cCYr').text(aDt[2]);

  //    1    - - -
  iYr = $('.cDt .cCYr').text();
  iDWk = $('.cFCld .cBYr .cLElm:contains(' +iYr+ ')').attr('title');
  ogCld.iDWk = iDWk;
  // - - -
  //   - - -
  $('.cFCld .cBYr .cAct').text(iYr);
  //     -     29,   28
  ogCld.mthLYChk(iYr);
  // - - - 

  //  -     - - -
  //   
  iMnt = $('.cDt .cCMnt').text();
  iMDCnt = $('.cMNLst .cMNm[title=' +iMnt+ '] .cEHd').text();
  ogCld.iMDCnt = iMDCnt;
  // - - -
  //   - - -
  sMnt = $('.cMNLst .cMNm[title=' +iMnt+ '] .cNm').text();
  $('.cFCld .cBMnt .cAct').text(sMnt);
  // - - -

  ogCld.mthMDUpd();
},
// - - -

//  ,  - - -
mthMPrv: function() {
  //   
  iDay = $('.cDt .cCDay').text();
  //   
  iMnt = $('.cDt .cCMnt').text();
  //  
  iYr = $('.cDt .cCYr').text();
  // - - - -
  //    - - -
  if(ogCld.bMd == 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() {

  //   
  iDay = $('.cDt .cCDay').text();
  //   
  iMnt = $('.cDt .cCMnt').text();
  //  
  iYr = $('.cDt .cCYr').text();
  // - - - -
  //    - - -
  if(ogCld.bMd == 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);
},
// - - -

//         '..' - - -
//   ([0] => '', [1] => '', [2] => '')
//    ([0] => '-1')
mthDMY: 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; // ###
},
// - - -

//      - - -
//  (..)
mthNow: 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;
},
// - - -

//    - - -
mthGYLst: function() { // GYLst - get year list
  //    1  1900 .
  iDWk = 7;

  //     1900  2100 - - - 
  sYLst = ''; // MNLst - mounth names list
  for(i = 1900; i < 2101; i++) {
    sYLst += "<div class='cLElm' title='" +iDWk+ "'>" +i+ "</div>";
  
    //    1    - - -
    if((i % 4) == 0)
iDWk++;
  
    iDWk++;
    iDWk = iDWk % 7;
    //  0 () 
    if(iDWk == 0)
iDWk = 7;
    // - - -
  }
  // - - -

  return sYLst;
},
// - - -

//    - - -
mthGMLst: function() { // GMLst - get month list
  oNMnt = {'01': '', '02': '', '03': '', '04': '', '05': '', '06': '', '07': '', '08': '', '09': '', '10': '', '11': '', '12': ''};
  oMDCnt = {'01': '31', '02': '28', '03': '31', '04': '30', '05': '31', '06': '30', '07': '31', '08': '31', '09': '30', '10': '31', '11': '30', '12': '31'};

  //    - - - 
  sMNLst = ''; // MNLst - mounth names list
  for(i = 1; i <= 12; i++) {
    if((i / 10) < 1)
sNmb = '0' + i;
    else
sNmb = i;
    // - - - -

    //  
    sNm = oNMnt[sNmb];
    // -   
    iMDCnt = oMDCnt[sNmb];
  
    sMNLst += "<div class='cMNm' title='" +sNmb+ "'><span class='cEHd'>" +iMDCnt+ "</span><span class='cNm'>" +sNm+ "</span></div>";
  }
  // - - -

  return sMNLst;
},
// - - -

//     - - -
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);
},
// - - -

//    - - -
mthStrt: function() {
  //   
  $('.cFCld .cMNLst').html(ogCld.mthGMLst());
  //   
  $('.cFCld .cYLst').html(ogCld.mthGYLst());
  // - - - -
  ogCld.evnNMSlc();
  ogCld.evnMClc();
  ogCld.evnMSlc();
  ogCld.evnYClc();
  ogCld.evnYSlc();
  ogCld.evnMPrv();
  ogCld.evnMNxt();

  //          - - -
  oPrn = $('.cFCld').parent();
  oNpt = oPrn.find('input[type=text]');
  // - - -

  //     ,    - - -
  if(oNpt.size() < 1) {

    sCrr = ogCld.mthNow();
    aDt = ogCld.mthDMY(sCrr);

    //   - - -
    $('.cFCld').css('position', 'static');
    $('.cFCld').removeClass('cEHd');
    // - - -
    ogCld.mthLd(aDt);

    return 0; // ###
  }
  // - - -

  // - - - -   
  //        input
  ogCld.bFr = 1;

  //    input
  oNpt.on('keypress', 
function() {
  return false;
});
  
  oNpt.on('click', 
function() {
  oTrg = $('.cFCld');
  //    - - -
  if(oTrg.is('.cEHd') == 0) {
    sDt = oTrg.find('.cDt').text();
    $(this).val(sDt);

    //  
    oTrg.addClass('cEHd');

    return 0; // ###
  }
  // - - - 

  //    - - -
  sDt = $(this).val();
  sCrr = ogCld.mthNow();
  aDt = ogCld.mthDMY(sDt);

  if(aDt[0] == '-1')
aDt = ogCld.mthDMY(sCrr);


  //       - - -
//(  )
   //    - - -
  iTop = $(this).position().top;
  iHgh = $(this).outerHeight();
  iTop += +iHgh;
  sTop = '' +iTop+ 'px';
  // - - -

  //    - - -
  iLft = $(this).position().left;
  sLft = '' +iLft+ 'px';
  // - - -
  // - - -

  //      - - -
  $('.cFCld').css('top', sTop);
  $('.cFCld').css('left', sLft);
  $('.cFCld').removeClass('cEHd');
  // - - -
  ogCld.mthLd(aDt);
});
}
// - - -

};


$(function() {

ogCld.mthStrt();

});
- - - JS