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



</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 style="flex:right;">
			 <div class="btn-vs-group" style="margin:10px auto;width:80%;height:34px; ">
			    <a id="btn_prv" href="javascript:dateNextPrv('HmApo','prv');" class="button2" title=" Προηγούμενη Ημέρα " ></a> 
			      <input type="text" id="HmApo" name="HmApo" class="button2"  onfocus="this.select();" value="<?php echo $HmApo;?>"> 
			    <a id="btn_next"  href="javascript:dateNextPrv('HmApo','next');" class="button2" title=" Επόμενη Ημέρα " ></a> 
			 </div>	
			</td>
		   <td><label> έως </label></td>
		    <td>
			 <div class="btn-vs-group" style="margin:10px auto;width:80%;;height:34px;">
			    <a id="btn_prv" href="javascript:dateNextPrv('HmEos','prv');" class="button2" title=" Προηγούμενη Ημέρα " ></a>   
				  <input type="text" id="HmEos" name="HmEos" class="button2" onfocus="this.select();" value="<?php echo $HmEos;?>"> 
			    <a id="btn_next"  href="javascript:dateNextPrv('HmEos','next');" class="button2" title=" Επόμενη Ημέρα " ></a> 
			 </div>	
			</td>		   
 
		  </tr>
		 </table>
	</div>
   
    <div style="padding: 0px 0px 20px 0px;">
		<br>
		<p>
		<a href="javascript:updDates('day');" class="button ">Σήμερα</a>
		<a href="javascript:updDates('week');" class="button ">Τρχ. Εβδομάδα</a>
		<a href="javascript:updDates('month');" class="button ">Τρχ. Μήνας</a>
		<a href="javascript:updDates('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 href="" onclick="javascript:updDates('select')" class="button green" style=" float:right;width:180px;">  Εντάξει</a>
       
	</div>
 
 
</div>
 
<script language="JavaScript" type="text/JavaScript">

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        text = target.textContent || target.innerText;
  
 // alert (e.target.id + " / " + e.target.name+ " / " + "<?php echo $PeriodosGroupName ?>");	
 
  //var str = e.target.name;
  //var res = str.split("_");
  //var PeriodosCookieName=res[0]+"_"+"PeriodosName";
    var PeriodosCookieName=e.target.name;
		switch(e.target.id) {
			  case 'calendar_day':
			      document.cookie = PeriodosCookieName+ "=day"  ;
				  updDates('day');
				  break;
			  case 'calendar_week':
			      document.cookie = PeriodosCookieName+ "=week"  ;
				  updDates('week');
				  break;
			  case 'calendar_month':
			      document.cookie = PeriodosCookieName+ "=month"  ;
				  updDates('month');
				  break;				  
			  case 'calendar_year':
			      document.cookie = PeriodosCookieName+ "=year"  ;
				  updDates('year');
				  break;	
			  case 'calendar_prv':
							updDates('prv');
							break;
			  case 'calendar_next':
							updDates('next');
							break;
			  case 'calendar_select':
							ShowDateDiv();
							break;
				}
				
}, false);

//window.onclick = e => {
   // console.log(e.target);  // to get the element
   // console.log(e.target.tagName);  // to get the element tag name alone
//	alert (e.target.Name);
//} 

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 updDates(cmd){
 
//document.body.style.cursor = 'wait';

var period=getCookie("<?php echo $PeriodosGroupName; ?>"); 
var HmApo = getCookie("<?php echo $HmApoCookieName ?>"); 
var HmEos = getCookie("<?php echo $HmEosCookieName ?>"); 
 
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 (period=="day"){day_change(cmd);} else
					if (period=="week"){week_change(cmd);} else 
					if (period=="month"){month_change(cmd);} else 
					if (period=="year"){year_change(cmd);}
					break;
	  case 'select':
				var HmApo=document.getElementById("HmApo").value;	
				var HmEos=document.getElementById("HmEos").value;
				document.cookie = '<?php echo $HmApoCookieName?>=' + HmApo;
				document.cookie = '<?php echo $HmEosCookieName?>=' + HmEos;  	  
}	 
 
 xx= mySubmit('<?php echo $prefix?>');
}


function day_change(cmd){
var d;
var days_add;
var HmApo;
var HmEos;

days_add=0;

switch(cmd) {
 case 'day':
		  var d = new Date();
		  days_add=0;
		  break;
 case 'prv':
			HmApo = getCookie("<?php echo $HmApoCookieName ?>"); 
			d=formatMyDate(HmApo,"GrToMySql","");
			d = new Date(d);
			days_add=-1;
			break;
 case 'next':
			HmEos = getCookie("<?php echo $HmEosCookieName ?>");
			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 = '<?php echo $HmApoCookieName?>=' + HmApo
    document.cookie = '<?php echo $HmEosCookieName?>=' + HmEos;  
    document.getElementById("HmApo").value=HmApo;
    document.getElementById("HmEos").value=HmEos;	
 	
}

function week_change(cmd){
 
 // alert(cmd);
var d;
var days_add;
var Hmeres;
var HmApo;
var HmEos;

days_add=0;
 
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':
			HmApo = getCookie("<?php echo $HmApoCookieName ?>"); 
			d=formatMyDate(HmApo,"GrToMySql","");
			days_add=-7;
			break;
 case 'next':
			HmEos = getCookie("<?php echo $HmEosCookieName ?>");
			d=formatMyDate(HmEos,"GrToMySql","");
			days_add= 1;
			break;
 default:
			d = new Date();
			days_add=0;
}
	     
		 d = addDays(d, days_add);
	//	 alert(d);
    Hmeres = get_week(d);
 
    document.cookie = '<?php echo $HmApoCookieName?>=' + Hmeres.DeyteraGr;
    document.cookie = '<?php echo $HmEosCookieName?>=' + Hmeres.KyriakiGr;  
    document.getElementById("HmApo").value=Hmeres.DeyteraGr;
    document.getElementById("HmEos").value=Hmeres.KyriakiGr;	
}

 
function month_change(cmd){

 // alert(cmd);
var d;  
var Hmeres;
var HmApo;
var HmEos;
var Hmnia;
var Minas;
var 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':
			HmApo = getCookie("<?php echo $HmApoCookieName ?>"); 
			    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':
			HmApo = getCookie("<?php echo $HmApoCookieName ?>");
			    d = formatMyDate(HmApo,"GrToMySql","");
			    d = new Date(d);
		    Hmnia = js_DateToParts(d);
		   // alert(Hmnia.Minas + " --- " + Hmnia.Etos);
			Minas = parseInt(Hmnia.Minas)+1; Etos=Hmnia.Etos;

			if(Minas>12){Minas=1;Etos=Etos+1;}
			//	 alert(Minas + " --- " + Etos);
			 		
			Minas=leftPad(Minas,2);
			HmApo = "01/"+ Minas +"/"+Etos; 
            d=Etos+"-"+Minas+"-"+"01"; d = new Date(d);
			HmEos = daysInMonth(d)+"/"+Minas+"/"+Etos;
			break;
}
 
    document.cookie = '<?php echo $HmApoCookieName?>=' + HmApo;
    document.cookie = '<?php echo $HmEosCookieName?>=' + HmEos;  
    document.getElementById("HmApo").value=HmApo;
    document.getElementById("HmEos").value=HmEos;	
  	
}

function year_change(cmd){

var d, HmApo, HmEos, 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':
			HmApo = getCookie("<?php echo $HmApoCookieName ?>"); 
			    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 = '<?php echo $HmApoCookieName?>=' + HmApo;
    document.cookie = '<?php echo $HmEosCookieName?>=' + HmEos;  
    document.getElementById("HmApo").value=HmApo;
    document.getElementById("HmEos").value=HmEos;	
  	
}	


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 ;	
var d_array;

valForExit="";
 
	if(fromTo=="GrToMySql"){
		d_array = mydate.split("/") ;
	//	if(is_numeric(d_array[2])==false || is_numeric(d_array[2])==false || is_numeric(d_array[2])==false ){
	//	return "";exit(); }
		var d = d_array[2]+"-"+d_array[1]+"-"+d_array[0];
		//alert (d);
		return d;
	}	
	
	if(fromTo=="MySqlToGr"){
		d_array = mydate.split("-") ;
	//	if(is_numeric(d_array[2])==false || is_numeric(d_array[2])==false || is_numeric(d_array[2])==false ){
	//	return "";exit(); }
		var d = d_array[2]+"-"+d_array[1]+"-"+d_array[0];
		
		//alert (d);
		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(year, month, 0).getDate();
    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>
