Reformat Date Before Form Submitted

Question

I have a form with a date field and a calendar picker. When I use this I have it entering the date as dd/mm/yyyy. This works.

I want to store the date as yyyymmdd though. Is there a way using javascript to reformat the date? For example, I click submit, it reformats the date and then does the submit and writes the reformatted date to the database?

Maybe there is a better approach? e.g. using a hidden input field that has the correctly formatted version of the date somehow?

Don't store a date as a string. Store it as a date datatype (preferably in UTC). That way the format doesn't matter when storing it, only when displaying the value. — Rory McCrossan, Feb 20 '20 at 09:33
in addition to above (you should store as date in your db), create onSubmit function and there change the date value and create you api request, and in you form call the onSubmit function. — Tom Mendelson, Feb 20 '20 at 09:36
Which jQuery used for date picket calendar? Because you can easily changed date format using JavaScript. — Montu Khant, Feb 20 '20 at 10:10
Does this answer your question? [How to format a JavaScript date](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) — freedomn-m, Feb 20 '20 at 10:28

Rutwick Gangurde · Answer 1 · 2020-02-20T10:29:02.977

1

How about this?

('20/02/2020').split('/').reverse().join('')

This SHOULD WORK based on the information you have given. Unless your datepicker returns the value as something else or in some other format. For that you will need to intercept the form submit by your own click handler and check the value.

edited Feb 20 '20 at 10:29

answered Feb 20 '20 at 10:20

Rutwick Gangurde

4,124
8
42
77

Why the downvote? This solution works. I have tried it. Just remove the hypen if you don't want it! – Rutwick Gangurde Feb 20 '20 at 10:27
1

I have vottedup bro because I is working I have also checked. There are so many ways we can do. Good Job .. – RaviPatidar Feb 20 '20 at 10:34
Thanks a lot @RaviPatidar! He has posted the input as dd/mm/yyyy. Most likely he will need to check what is actually collected when submit is clicked. – Rutwick Gangurde Feb 20 '20 at 10:40
1

@RutwickGangurde—probably because this answer is too simple by far and doesn't use the date library *de jour*. – RobG Feb 20 '20 at 11:26
@RobG I see. I thought keeping it simple is what we programmers should try and aim for. If this solves the issue, why do you need the date library? Anyway I am pretty sure an onSubmit/onClick is required to do any sort of preprocessing. – Rutwick Gangurde Feb 20 '20 at 11:53
1

@RutwickGangurde—sorry, should have used the correct sarcasm font… you are absolutely correct, simplicity is beautiful. :-) – RobG Feb 20 '20 at 11:59
I got your sarcasm, Rob! I was just explaining why I kept it simple, you know, a programmer's habit of over analyzing? – Rutwick Gangurde Feb 20 '20 at 12:01

score 1 · Answer 2 · answered Feb 20 '20 at 10:56

1

function submit(){
var date  = document.getElementById('datefield').value;
var e = date;
var output = e.replace(/\-/g,"");
document.getElementById('output').innerHTML = output;
}

<input id="datefield" data-date-format="YYYY MM DD" type="date">
<button onclick="submit()">format!</button>
<div id="output"></div>

answered Feb 20 '20 at 10:56

RaviPatidar

1,249
15
28

This seems to work perfectly but every time I open the form the input box always states dd ---- yyyy. Thats fine for adding a record, but if I was updating one, I'd expect the relevant date to be in there. Is that possible? Many thanks so far. – user1879185 Feb 20 '20 at 16:41

score -1 · Answer 3 · answered Feb 20 '20 at 10:18

-1

If you load the value as a Date object, you can format it any way you like. However, please consider the use of a library that already solves this issue for you, like moment.js.

function formatDate() {
  const value = document.getElementById("date-input").value;
  const date = new Date(value);
  
  const year = date.getFullYear() + "";
  let month = date.getMonth() + 1 + "";
  let day = date.getDate() + "";
  
  if (day.length == 1) day = "0" + day;
  if (month.length == 1) month = "0" + month;
  
  const formattedDate = year + "/" + month + "/" + day;
  
  document.getElementById("date-output").innerHTML = formattedDate;
}

<input id="date-input" type="date">
<button onclick="formatDate()">format!</button>
<div id="date-output"></div>

answered Feb 20 '20 at 10:18

Titulum

5,744
3
25
52

"23/02/2020" returns "NaN/NaN/NaN". Why transform a string into different type just to transform that back into a string with the same values you started with? ;-) – RobG Feb 20 '20 at 11:25
What do you mean `23/02/2020` returns `NaN/NaN/NaN`? [It works for me](https://i.imgur.com/u52IXJ8.png) – Titulum Feb 20 '20 at 11:36
Demonstrating "working" code with an image isn't much good. ;-) Input type date isn't supported by all browsers and your code doesn't produce the OP's required format. – RobG Feb 20 '20 at 11:46

Reformat Date Before Form Submitted

3 Answers3