
- - - HTML
  //   - - -
  $sDCrr = date('Y-m-d',time());
  $aDt = explode('-', $sDCrr);
  $iYr = $aDt[0];
  $iMnt = $aDt[1];
  $iDay = $aDt[2];
  // - - -
  $aNMnt = array('01' => '', '02' => '', '03' => '', '04' => '', '05' => '', '06' => '', '07' => '', '08' => '', '09' => '', '10' => '', '11' => '', '12' => '');
  $aMDCnt = array('01' => '31', '02' => '28', '03' => '31', '04' => '30', '05' => '31', '06' => '30', '07' => '31', '08' => '31', '09' => '30', '10' => '31', '11' => '30', '12' => '31');

  //   
  $sMnt = $aNMnt[$iMnt];
  //    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;
    // - - -
  }
  // - - -


  //    - - - 
  $sMNLst = ''; // MNLst - mounth names list
  //      -     29
  if(($iYr % 4) == 0)
$aMDCnt['02'] = 29;
  foreach($aNMnt as $iNmb => $sNm) {
    // -   
    $iMDCnt = $aMDCnt[$iNmb];
  
    $sMNLst .= "<div class='cMNm' title='$iNmb'><span class='cEHd'>$iMDCnt</span><span class='cNm'>$sNm</span></div>";
  }
  // - - -

  $sCld = "<div class='cFCld cEHd'><div class='cDt cEHd'><span class='cCDay'>$iDay</span>.<span class='cCMnt'>$iMnt</span>.<span class='cCYr'>$iYr</span></div>
<div class='cMYTtl'><div class='cMPrv cBSNo'><</div><div class='cMNxt cBSNo'>></div><div class='cBMnt'><span class='cAct'>$sMnt</span><div class='cMNLst cEHd'>$sMNLst</div></div><div class='cBYr'><span class='cAct'>$iYr</span><div class='cYLst cEHd'>$sYLst</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>
$sMDys
</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 - , 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]');
  //    ,   
  if(oNpt.size() > 0)
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) {
  //      - - -
  if(aDt != '-1') {
    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();
/***
  //   - - -
  iDay = $('.cDt .cCDay').text();
  $('.cFCld .cDWNmb').each(
function(iInd, oElm) {
  if($(oElm).text() == iDay)
$(oElm).addClass('cDWAct');
});
  // - - -
***/
},
// - - -

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

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

//        - - -
function isNmb(sStr) {
  //  
  bRsl = 1;

  iSLng = sStr.length;
  for(i = 0; i < iSLng; i++) {
    iCd = sStr.charCodeAt(i);

    if((iCd < 48) || 
(iCd > 57)) {
      bRsl = 0;
      break;
    }
  }

  return bRsl; // ###
}
// - - -


$(function() {

ogCld.mthLd('-1');
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() > 0) {
  oNpt.on('click', 
function() {
$('title').text('>11');
  oTrg = $('.cFCld');
  //    - - -
  if(oTrg.is('.cEHd') == 0) {
    sDt = oTrg.find('.cDt').text();
    $(this).val(sDt);

    //  
    oTrg.addClass('cEHd');

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

  //    - - -
  aDt = {};
  aDt[0] = '01';
  aDt[1] = '01';
  aDt[2] = '2020';
  // - - -

  //       - - -
//{[0] => iDay, [1] => iMnt, [2] => iYr} 
  sTxt = $(this).val();
  iTLng = $.trim(sTxt).length;
  if(iTLng == 9) {
    sTxt = '0' +sTxt;
    iTLng = 10;
  }
  if(iTLng == 10) {
    sDay = sTxt.substr(0, 2);
    sMnt = sTxt.substr(3, 2);
    sYr = sTxt.substr(6, 4);
    // - - - -
    sTmp = sDay + sMnt + sYr;
    if(isNmb(sTmp)) {
      aDt[0] = sDay;
      aDt[1] = sMnt;
      aDt[2] = sYr;
    }
  }
  // - - - -


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

  // - - - -
  oNpt.on('keypress', 
function() {
  return false;
});

}

});
- - - JS