Modify date format (dd / mm / yyyy) that returns an input type date when displaying it in a label with javascript

Navigation
1

Good afternoon, I have the following query: I have a script that copies the value I choose in an input type date and shows it in a label (it shows it there because all the labels besides this are inside a div that I copy with clipboard.min.js from a button, but finally)

What I need is to show the date in dd / mm / yyyy format in the label since it is currently shown to me by yyyy / mm / dd since the script brings the value I choose in the input date: Can you give me a hand? Thank you.

Script and input: 

<script>
    function desde(obj) {
      document.getElementById("desde").textContent = obj.value
    }
    </script>

  <div class="form-group">
  <label class="control-label col-sm-2">DESDE:</label>
  <div class="col-sm-4">
  <input type="date" id="" name="Desde" class="form-control" required 
  onchange="desde(this)" onpaste="return false">
  </div>

And I show it on the label: 

 <p>Desde: <label id="desde"></label></p>
    
asked by Juan 30.05.2017 в 18:47
source

3 answers

2

Thank you, Vera. Try all the variables but I only used one that uses JSON and in a separate file, if I used it where I need it I threw a NO DATE: I ended up deciding to change the input date and use a text with a function that prevents it from writing badly the date, I take out the possibility of selecting the date but I leave the possibility of validating that they write it well, yes or yes. Thank you very much. 

<input name="fecha" type="text" size="10" maxlength="10" onKeyUp = 
"this.value=formateafecha(this.value);"> 
<SCRIPT>
function IsNumeric(valor) 
{ 
var log=valor.length; var sw="S"; 
for (x=0; x<log; x++) 
{ v1=valor.substr(x,1); 
v2 = parseInt(v1); 
//Compruebo si es un valor numérico 
if (isNaN(v2)) { sw= "N";} 
} 
if (sw=="S") {return true;} else {return false; } 
} 
var primerslap=false; 
var segundoslap=false; 
function formateafecha(fecha) 
{ 
var long = fecha.length; 
var dia; 
var mes; 
var ano; 
if ((long>=2) && (primerslap==false)) { dia=fecha.substr(0,2);  
if ((IsNumeric(dia)==true) && (dia<=31) && (dia!="00")) { 
fecha=fecha.substr(0,2)+"/"+fecha.substr(3,7); primerslap=true; } 
else { fecha=""; primerslap=false;} 
} 
else 
{ dia=fecha.substr(0,1); 
if (IsNumeric(dia)==false) 
{fecha="";} 
if ((long<=2) && (primerslap=true)) {fecha=fecha.substr(0,1); 
primerslap=false; } 
 } 
 if ((long>=5) && (segundoslap==false)) 
 { mes=fecha.substr(3,2); 
 if ((IsNumeric(mes)==true) &&(mes<=12) && (mes!="00")) { 
 fecha=fecha.substr(0,5)+"/"+fecha.substr(6,4); segundoslap=true; } 
 else { fecha=fecha.substr(0,3);; segundoslap=false;} 
 } 
 else { if ((long<=5) && (segundoslap=true)) { fecha=fecha.substr(0,4); 
 segundoslap=false; } } 
 if (long>=7) 
 { ano=fecha.substr(6,4);   
 if (IsNumeric(ano)==false) { fecha=fecha.substr(0,6); } 
 else { if (long==10){ if ((ano==0) || (ano<1900) || (ano>2100)) { 
 fecha=fecha.substr(0,6); } } } 
 } 
 if (long>=10) 
 { 
 fecha=fecha.substr(0,10); 
 dia=fecha.substr(0,2); 
 mes=fecha.substr(3,2); 
 ano=fecha.substr(6,4); 
 // Año no viciesto y es febrero y el dia es mayor a 28 
 if ( (ano%4 != 0) && (mes ==02) && (dia > 28) ) { 
 fecha=fecha.substr(0,2)+"/"; } 
 } 
 return (fecha);  
 }
 </SCRIPT>
    
answered by 30.05.2017 в 20:30
0

It occurs to me that, if in the script that "puts" the date in the input you look for the file or files js that make up the script, at some point, for sure, that you can modify the format of the date that it ends up showing in the input.

If not, then maybe it occurs to me in the event "onChange ()" to trigger a function similar to this: 

function formatDate(date) {
  var monthNames = [
    "January", "February", "March",
    "April", "May", "June", "July",
    "August", "September", "October",
    "November", "December"
  ];

  var day = date.getDate();
  var monthIndex = date.getMonth();
  var year = date.getFullYear();

  return day + ' ' + monthNames[monthIndex] + ' ' + year;
}
    
answered by 30.05.2017 в 18:55
0

If what you want is the date formatted and shown in the input, I recommend using DatePicker from the library JQuery , it's simple.

This is because you can not format the <input type="date">

    
answered by 04.12.2017 в 01:43
JAVA: Error: the main class Confirming2_App was not found or loaded Using preg_match_all () in an Array (Notice: Array to string conversion in) php