
<style>
#myDatediv {
  position: absolute;  
  z-index: 119;
  background-color: white; /* #f1f1f1;  */
 background-color: #e6e6e6;
  text-align: center;
  float:center;
  margin:0px auto;
  font-weight:bold;
  left: 50%;
  top: 50%;
 /* border: 2px solid #b3b3b3; */
  border-radius:5px;
  transform: translate(-50%,-50%);
/*  border:1px solid #8c8c8c; */
  
  -moz-box-shadow: 0 0 5px 3px #888;
  -webkit-box-shadow: 0 0 3px 5px#888;
  box-shadow: 1px 1px 8px #707070 ; 
 
}

#myDatedivheader {
  font: 24px 'Open Sans Condensed', Verdana, sans-serif;  
  color: #404040;
  font-style: normal;
  font-weight: 600;	
  background-color: #e60000; 
  padding: 5px 10px 5px 10px;
  cursor: move;
  z-index: 120;
  border-bottom: 1px solid #991f00;
  color: #fff;
  border-radius:5px 5px 0px 0px;
}

#myDatedivfooter {
  padding-top: 30px auto;
  padding-right: 30px ;
  z-index: 120;
  background-color: #f1f1f1;
  color: #fff;
  border-top: 1px solid #d3d3d3;
  height:50px;
   padding-top: 8px;
   padding-right: 8px;
}
 
#myDatedivfooter a.button { float:right; margin-right:5px;text-align:center;}

#myDatediv .close {float:right;color:white;opacity:80%;}
#myDatediv .close:hover {float:right;color:white;opacity:100%;
}

.h30{ height:30px; line-height:10px;}
.w10{ width:10px;text-align:center; }

.hm_label {
	width:20%;
	text-align:center;
	background-color:#98AFC7;
	color:white;	
	height:28px;
	border:1px solid gray;
}

</style>
 
 
 <div id="myDatediv" style="width:40%" hidden >
  <div id="myDatedivheader">ΕΠΙΛΟΓΗ ΠΕΡΙΟΔΟΥ
     <span onclick="document.getElementById('myDatediv').style.display='none'" class="close" >&#x2716;</span>
  </div>
    <div>
        <br>
		 <table border="0" width="100%" >
			<tr>
		    <td  width="10%"></td>
				<td class="hm_label">ΑΠΟ</td><td width="5%"> </td> <td class="hm_label"> ΕΩΣ </td> 		   
			<td width="10%"> </td>
			</tr>
		  
		   <tr>
		    <td  width="10%"></td>
			<td>
				<div class="vscombo-div" >
				  <input class="c datepicker"  type="text" id="HmApo" name="HmApo" value="<?php echo $HmApo;?>" >
				  <a class="vscombo_date_button" name="Hmnia_Button" id="Hmnia_Button" ></a>
				</div>			
			</td> 
		    <td  > </td>
		    <td>
			<div class="vscombo-div" >
			  <input class="c datepicker" " type="text" id="HmEos" name="HmEos" value="<?php echo $HmEos;?>" >
			  <a class="vscombo_date_button" name="Hmnia_Button" id="Hmnia_Button" ></a>
			</div>			 
			</td>		   
			<td width="10%"> </td>
		  </tr>
		 </table>
	</div>
   
    <div style="padding: 0px 0px 20px 0px;">
		<br>
 
		<p>
		<a href="javascript:cal_update('day');" class="button "> Σήμερα </a>
		<a href="javascript:cal_update('week');" class="button "> Τρέχουσα Εβδομάδα </a>
		<a href="javascript:cal_update('month');" class="button "> Τρέχων Μήνας </a>
		<a href="javascript:cal_update('year');" class="button "> Τρέχον Ετος </a>
		</p>
	</div>
 
	  
	<div id="myDatedivfooter" style="background-color:#f1f1f1;">
	      <a href="javascript:HideDateDiv();" class="button red" style="float:right;margin-left:5px;"> Άκυρο </a>
	      &nbsp;&nbsp;
	     <a  id="ok_button"  class="button green" style=" float:right;width:180px;">  Εντάξει</a>
	</div>
 
 
</div>
 
<script language="JavaScript" type="text/JavaScript">


//if(document.getElementById("vs_calendar_tool_bar")!=null){
//	
//	var a = document.getElementById("vs_calendar_tool_bar").children;
//	for(var i = 0; i < a.length; i++) {
//		alert(a.id + " === " + a.tagName);
//		if(a[i].tagName == 'A' {
//			 a[i].onclick = function() { updDates(this);}  
//			}
//		}
//}
 
var m_prefix="", m_btn="", btn="", cmd="";
var c_HmApoName="", c_HmEosName="", HmApo, HmEos;

var m_period_type="week";
document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
          text = target.textContent || target.innerText;

 if(e.target.id=="ok_button"){ ok_btn_pressed();return; }
 
var a = e.target.id;var b=a.split("@");
	if(b.length<=1){return;}
	
	if(b[0]!=""){
		m_prefix=b[0]; a=b[1]; btn=b[1]; a=a.split("_");
		//if(a.length<=1){return;}
		 cmd=a[1];
	}

//alert(btn);	
m_btn=e.target.id;
m_prefix=m_prefix.concat("@");
c_HmApoName=m_prefix.concat("HmApo");
c_HmEosName=m_prefix.concat("HmEos");
HmApo = getCookie(c_HmApoName); 
HmEos = getCookie(c_HmEosName); 

// alert(e.target.id+ " ==== " + b[0] + " == " + b[1] + "   btn=" + btn + "   command: " + cmd);
 
  if(btn==""){return;}
  if(btn=="FindWhat"){return;}
  if(btn=="cboRecPP"){return;}
  if(btn=="calendar_select"){ShowDateDiv();return;}  	  
  if(cmd!='next' && cmd!='prv'){ document.cookie = m_prefix+'period_type=' + cmd; }

   m_period_type=getCookie(m_prefix.concat("period_type"));
   
   updDates(cmd);
 		
}, false);


dragElement(document.getElementById("myDatediv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

// =============================================
//
// =============================================
function cal_update(cmd){
	document.cookie = m_prefix+'period_type=' + cmd;updDates(cmd);
}

function updDates(cmd){
 
switch(cmd) {
	  case 'day':	day_change('day');  break;
	  case 'week':  week_change('week');  break;
	  case 'month': month_change('month');  break;	
	  case 'year':	year_change('year');  break;
	  case 'prv': 
	  case 'next':
					if (m_period_type=="day"){day_change(cmd);} else
					if (m_period_type=="week"){week_change(cmd);} else 
					if (m_period_type=="month"){month_change(cmd);} else 
					if (m_period_type=="year"){year_change(cmd);}
					break;
	  case 'select':
				document.cookie = c_HmApoName+'=' + HmApo
				document.cookie = c_HmEosName+'=' + HmEos;    	  
}	 
 
document.location.reload(true);
}


function day_change(cmd){
var d, days_add=0;
 
switch(cmd) {
 case 'day':
		    var d = new Date();
		    days_add=0;
		    break;
 case 'prv':
			d=formatMyDate(HmApo,"GrToMySql","");
			d = new Date(d);
			days_add=-1;
			break;
 case 'next':
			d=formatMyDate(HmEos,"GrToMySql","");
			d = new Date(d);
			days_add=1;
			break;
}
	             d = js_DateToParts(d).yyyymmdd;
		     HmApo = addDays(d, days_add);		  
  		     HmApo = js_DateToParts(HmApo).ddmmyyyy
			 HmEos = HmApo;
 
    document.cookie = c_HmApoName+'=' + HmApo
    document.cookie = c_HmEosName+'=' + HmEos;  
	document.location.reload(true);
}

function week_change(cmd){
 
var d, days_add=0, Hmeres;
 
switch(cmd) {
	
 case 'week':
		  var today = new Date();
		  var dd = String(today.getDate()).padStart(2, '0');
		  var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
		  var yyyy = today.getFullYear();
		  d = yyyy+ '-' + mm + '-' + dd;  
		  break;
 case 'prv':
			d=formatMyDate(HmApo,"GrToMySql","");
			days_add=-7;
			break;
 case 'next':
			d=formatMyDate(HmEos,"GrToMySql","");
			days_add= 1;
			break;
 default:
			d = new Date();
			days_add=0;
}
	     
		 d = addDays(d, days_add);
    Hmeres = get_week(d);
 
		document.cookie = c_HmApoName+'=' + Hmeres.DeyteraGr;;
		document.cookie = c_HmEosName+'=' + Hmeres.KyriakiGr; 
		document.getElementById("HmApo").value=Hmeres.DeyteraGr;
		document.getElementById("HmEos").value=Hmeres.KyriakiGr;	
		document.location.reload(true);
}

 
function month_change(cmd){
 
var d, Hmeres, Hmnia="", Minas, Etos;
 
switch(cmd) {
 case 'month':
		var today = new Date();
		   Hmnia = js_DateToParts(today)
		   HmApo = "01/"+Hmnia.Minas+"/"+Hmnia.Etos;   
		       d = new Date(Hmnia.Etos+"-"+Hmnia.Minas+"-"+"01");
 		   HmEos = new Date(d.getFullYear(), d.getMonth() + 1, 0);
		   HmEos = js_DateToParts(HmEos).ddmmyyyy;
 		  break;
 case 'prv':
			    d = formatMyDate(HmApo,"GrToMySql","");
			    d = new Date(d);
		    Hmnia = js_DateToParts(d);
		    Minas = parseInt(Hmnia.Minas)-1;   Etos=Hmnia.Etos;
			if(Minas<1){Minas=12;Etos=Etos-1;}
			HmApo = "01/"+ Minas +"/"+Etos; 
            d=Etos+"-"+Minas+"-"+"01"; d = new Date(d);
			HmEos = daysInMonth(d)+"/"+Minas+"/"+Etos;
			break;
 case 'next':
			    d = formatMyDate(HmApo,"GrToMySql","");
			    d = new Date(d);
		    Hmnia = js_DateToParts(d);
			Minas = parseInt(Hmnia.Minas)+1; Etos=Hmnia.Etos;

			if(Minas>12){Minas=1;Etos=Etos+1;}
			 		
			Minas=leftPad(Minas,2);
			HmApo = "01/"+ Minas +"/"+Etos; 
            d=Etos+"-"+Minas+"-"+"01"; d = new Date(d);
			HmEos = daysInMonth(d)+"/"+Minas+"/"+Etos;
			break;
}
 
		document.cookie = c_HmApoName+'=' + HmApo;
		document.cookie = c_HmEosName+'=' + HmEos;  
		//  document.getElementById("HmApo").value=HmApo;
		//  document.getElementById("HmEos").value=HmEos;	
		document.location.reload(true);  	
}

function year_change(cmd){

var d, Hmnia, Etos;
var year_add=0;

if(cmd=='prv'){year_add=-1;}else if(cmd=='next') {year_add=1;}
 
switch(cmd) {
 case 'year':
			  var today = new Date();
			  Hmnia = js_DateToParts(today)
			  HmApo = "01/01/"+Hmnia.Etos; HmEos = "31/12/"+Hmnia.Etos;   
			  break;
 case 'prv':
 case 'next':
			    d = formatMyDate(HmApo,"GrToMySql","");
			    d = new Date(d);
		    Hmnia = js_DateToParts(d);
		     Etos = parseInt(Hmnia.Etos)+year_add;
			HmApo = "01/01/"+Etos; HmEos = "31/12/"+Etos; 
			break;
}
		document.cookie = m_prefix+'HmApo=' + HmApo; 
		document.cookie = m_prefix+'HmEos=' + HmEos; 
		document.location.reload(true);	
}	

function ok_btn_pressed(){
    document.cookie = m_prefix+'HmApo=' + document.getElementById("HmApo").value;
    document.cookie = m_prefix+'HmEos=' + document.getElementById("HmEos").value;  
	document.location.reload(true);	
}

function getMonday(d) {
 
 d = new Date(d);
  var day = d.getDay(),
      diff = d.getDate() - day + (day == 0 ? -6:1); // adjust when day is sunday
  return new Date(d.setDate(diff));
}


function getSunday(d) {
  var t = new Date(d); t.setDate(t.getDate() + 6);
  return  t ;
}

function dateToFormat(d, format){
 
 var dd = String(d.getDate()).padStart(2, '0');
 var mm = String(d.getMonth() + 1).padStart(2, '0'); //January is 0!
 var yyyy = d.getFullYear();
	
	switch(format) {
	   case 'dd/mm/yyyy':
               	    d=dd + '/' + mm + '/' + yyyy;
					break;
	   case 'mm/dd/yyyy':
					d=mm + '/' + dd + '/' + yyyy; 
					break;
	   case 'yyyy/mm/dd': 
					d=yyyy + '/' + mm + '/' + dd; 
					break;
	   default:	      	  
					d=dd + '/' + mm + '/' + yyyy;
	}
	
return d;
}
 
function get_week(HmApo){
	
var curr = new Date(HmApo);
var week = [];
var first=0;
var day=0;

for (var i = 1; i <= 7; i++) {
    first = curr.getDate() - curr.getDay() + i ;
	day = new Date(curr.setDate(first)).toISOString().slice(0, 10);
  week.push(day);
}
var dParts1 = week[0].split("-");
var dParts6 = week[6].split("-");

// month is 0-based, that's why we need dataParts[1] - 1
var wd1 = dParts1[2]+"/"+ dParts1[1]+"/"+dParts1[0] ;
var wd6 = dParts6[2]+"/"+ dParts6[1]+"/"+dParts6[0] ;
 
return {
        Deytera: week[0],
        Kyriaki: week[6],
		DeyteraGr: wd1,
		KyriakiGr: wd6
    };
	
}
 
function addDays(date, days) {
  var result = new Date(date);
  result.setDate(result.getDate() + days);
  return result;
}


function formatMyDate(mydate, fromTo , def_value  ) {

var valForExit="", d_array, d;
 
	if(fromTo=="GrToMySql"){
		d_array = mydate.split("/");d = d_array[2]+"-"+d_array[1]+"-"+d_array[0];return d;
	}	
	
	if(fromTo=="MySqlToGr"){
		 d_array = mydate.split("-"); d = d_array[2]+"-"+d_array[1]+"-"+d_array[0];return d;
	}
	
	if(fromTo=="MyJSToGr"){
		  var dd = String(mydate.getDate()).padStart(2, '0');
	  	  var mm = String(mydate.getMonth() + 1).padStart(2, '0'); //January is 0!
		  var yyyy = mydate.getFullYear();
		  wd1 = dd + '/' + mm + '/' + yyyy; 
		return wd1;
	}
 	
}

function is_numeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}
function js_DateToParts(d){
	
	var dd = String(d.getDate()).padStart(2, '0');
	var mm = String(d.getMonth() + 1).padStart(2, '0'); //January is 0!
	var yyyy = d.getFullYear();
	// d = yyyy+ '-' + mm + '-' + dd; 

return {
        Hmera :dd,
        Minas : mm,
		Etos : yyyy,
		ddmmyyyy: dd + '/' + mm + '/' + yyyy,
		mmddyyyy: mm + '-' + dd + '-' + yyyy,
		yyyymmdd: yyyy + '-' + mm + '-' + dd 
    };
}
	
function daysInMonth (d) {
    return new Date(d.getFullYear(), d.getMonth()+1, 0).getDate(); 
}

function leftPad(number, targetLength) {
    var output = number + '';
    while (output.length < targetLength) {
        output = '0' + output;
    }
    return output;
}
function ShowDateDiv(){
  document.getElementById('myDatediv').style.display='block' ;
  document.getElementById('HmApo').focus();
}

function HideDateDiv(){
  document.getElementById('myDatediv').style.display='none'
}
</script>
