How to change date output from form

Question

I have the following code to generate a WhatsApp API url according to the information from the form. The problem is: the date, when the javascript calls it, changes from DD/MM/AAAA to AAAA/MM/DD.

I wanted the output to be DD/MM/AAA, I couldn't find any help in google, can someone help?

P.S.: there are two buttons, one to send the form via e-mail, and another via whatsapp (the e-mail button is not set yet).

<!-- FORM HTML -->
      <form id="form_orcamento" class="grid-8 form" autocomplete="off">

        <label for="nome"></label>
        <input type="text" id="name" placeholder="nome" required>

        <label for="email"></label>
        <input type="email" id="email" placeholder="e-mail" required>

        <label for="telefone"></label>
        <input type="tel" id="phone" placeholder="telefone" required>
    
        <p class="label_de">data de entrada</p>
        <p class="label_ate">data de Saída</p><br>

      <label for="from"></label>
        <input placeholder="Entrada" type="date" id="from" name="from" class="de entrada" min='1899-01-01' max='2050-13-13'>
        
      <label for="to"></label><input placeholder="Saída" type="date" id="to" name="to" class="de"></div>


        <div class="grid-8">
        <label for="msg"></label>
        <textarea class="msg" id="service" placeholder="Mensagem" required></textarea>
        <div class="button">
        <button type="submit" class="btn">Enviar por E-mail</button>
        
        <input type="submit" name="submit" class="btn" value="Whatsapp" onclick="gotowhatsapp()"/>


      </form>
</div>
</div>

//JAVASCRIPT

function gotowhatsapp() {
      
  var name = document.getElementById("name").value;
  var phone = document.getElementById("phone").value;
  var email = document.getElementById("email").value;
  var from = document.getElementById("from").value;
  var to = document.getElementById("to").value;  
  var service = document.getElementById("service").value;

  var url = "https://wa.me/1999999999?text=" 
  + "Name: " + name + "%0a"  + "%0a"
  + "Telefone: " + phone + "%0a"  + "%0a"
  + "E-mail: " + email  + "%0a"  + "%0a"
  + "Entrada: " + from  + "%0a"  + "%0a"
  + "Saída: " + to  + "%0a"  + "%0a"
  + "Mensagem:  " + "%0a" + service; 

  window.open(url, '_blank').focus();
}```

`new Intl.DateTimeFormat('en-GB').format(date));` - but what format does the API require? It's not up to you — Bravo, Jul 05 '21 at 23:22
https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format — Kinglish, Jul 05 '21 at 23:25
the HTML show DD/MM/AAAA but when the javascript puts it in the url for whatsapp ('from' and 'to' var) it goes AAAA/MM/DD. So I don't know what to do. — Amanda Pinto, Jul 05 '21 at 23:28
@Bravo it didn't work, the javascript code just generates an url for whatsapp web with the form field data. But the date format is not the same from the HTML to the javascrip when the button is clicked. — Amanda Pinto, Jul 05 '21 at 23:35
@Tom that's ok, dude. The methods didn't work, as the value in the HTML field is changes when i call the var by it's name in my js file. I really tried about EVERYTHING, even the link that Kinglish posted, i saw it on saturday. I'm trying for over 3 days, no good results. Sorry if the question may look dumb to you. — Amanda Pinto, Jul 05 '21 at 23:50
@AmandaPinto My complaint is not that the question is dumb; it _isn't_ dumb, and nobody is born knowing all this stuff. My complaint is that it is unthinkable that you actually did any research, and simply _saying_ you did research is not a sufficient substitute. I know for a fact that the answer you want is on that MDN page. MDN is probably the world's best Javascript documentation. If you can't or won't read documentation, you're going to have a very hard time in software. — Tom, Jul 06 '21 at 00:14

score 1 · Answer 1 · answered Jul 06 '21 at 00:37

As suggested in the comments, there are many date formatting solutions available. You shouldn't reinvent the wheel, instead try to leverage an existing library if possible. This answer provides a number of trusted examples.

If for some reason you can't use one of the libraries available. You could create your own function to format the date yourself.

var dateInput = document.getElementById("date");
dateInput.addEventListener('change', dateChanged);

console.log(formatDate(new Date(dateInput.value)));

// Check console on date value change
function dateChanged (e) {
  let dateValue = new Date(e.target.value);
  console.log(formatDate(dateValue));
}

// Format date object into DD/MM/YYYY
function formatDate (date) {
  let day = padNumber(date.getDate(), 2);
  let month = padNumber(date.getMonth() + 1, 2);
  let year = padNumber(date.getFullYear(), 4);

  return `${day}/${month}/${year}`;
}

// Add leading 0s to numbers (e.g. 1 becomes "01")
function padNumber (number, size) {
  number = number.toString();
  while (number.length < size) number = "0" + number;
  return number;
}

<input type="date" id="date" value="2000-01-01">

score 0 · Answer 2 · answered Jul 06 '21 at 03:56

0

I changed the HTML code to use a datepicker from jQuery UI.

Which has the type="text" instead of type="date".

So the javascript gets exactly what is in the field, no formating needed.

Thank you all for helping.

answered Jul 06 '21 at 03:56

Amanda Pinto

1
2

How to change date output from form

2 Answers2