How to manipulate a date that is fetched from an html input with javascript

Question

I am trying to get a date from an html input to javascript, substract 3 years from it and then place the new date back into another html date input field.

I got the substraction to work with the current date but I can not get it to work when I fetch a date from an html input.

Below my code that works:

<input id="InputDate" data-role="datepicker"/>
<input id="OutputDate" data-role="datepicker"/>

<script type="text/javascript">
    var dt = new Date(); // this line I want to replace with the next 2 lines!
    //var inDate= document.getElementById("InputDate").value;
    //var dt = new Date(inDate);
    dt.setFullYear(dt.getFullYear() - 3);
    var datestring = ("0" + dt.getDate()).slice(-2) + "." + ("0"+(dt.getMonth()+1)).slice(-2) + "." +  dt.getFullYear();
    document.getElementById("OutputDate").value = datestring;

When I fetch a date from the input field I get 'aN.aN.NaN' back into the output field. I have tried document.getElementById("InputDate").valueAsDate instead, but this did not work either. When I place an alert(dt) after the instantiation of dt I get 'Invalid Date'.

Any suggenstions how to get the fetched date in the DateObject correctly?

Regards, Manu

What valid/safe date formats to let parse by the Date constructor are, you can research. If your input date is in a different format, then you will have to modify it first. — C3roe
– C3roe, Commented Jun 19, 2017 at 10:01

Govind Samrow · Accepted Answer · 2017-06-19 10:22:09Z

2

Just need to pass correct format to date() function:

    //var dt = new Date(); // this line I want to replace with the next 2 lines!
    var inDate= document.getElementById("InputDate").value;
    inDate = inDate.split(".");
    var dt = new Date(inDate[2],inDate[1],inDate[0]);
    //alert(dt);
    dt.setFullYear(dt.getFullYear() - 3);
    
    var datestring = ("0" + dt.getDate()).slice(-2) + "." + ("0"+(dt.getMonth()+1)).slice(-2) + "." +         dt.getFullYear();
    document.getElementById("OutputDate").value = datestring;

<input id="InputDate" data-role="datepicker" value="19.05.2015"/>
<input id="OutputDate" data-role="datepicker"/>

answered Jun 19, 2017 at 10:22

Govind Samrow

10.2k14 gold badges59 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexey G · Accepted Answer · 2017-06-19 10:10:01Z

1

var inputValues = document.getElementById("InputDate").value.split(".");
var dt = new Date(inputValues[2], inputValues[1] - 1, inputValues[0]);

If you get something like 22.12.1985 as InputDate value

answered Jun 19, 2017 at 10:10

Alexey G

1,1181 gold badge14 silver badges18 bronze badges

Comments

subrahmanya bhat · Accepted Answer · 2017-06-19 10:13:07Z

1

first verify your ,document.getElementById("InputDate").value; is returning correct date

    var inDate= document.getElementById("InputDate").value;
    var dt = new Date(Date.parse(inDate));  //use parse input to corret date format
    dt.setFullYear(dt.getFullYear() - 3);

answered Jun 19, 2017 at 10:13

subrahmanya bhat

5983 silver badges11 bronze badges

1 Comment

slevy1 Over a year ago

The concept of Date.parse is nice but unfortunately it is not a recommended practice; see developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Krazy_Tech · Accepted Answer · 2017-06-19 10:17:01Z

1

Use date format

var date = "2017-06-19";//yyyy-mm-dd or mm-dd-yyyy
var dt = new Date(date);
console.log(dt);
//output Mon Jun 19 2017 00:00:00 GMT+0545 (Nepal Standard Time)
// if you want to set the date to new output text box 
var newDate = dt.getFullYear() + "-" + (dt.getMonth() + 1) + "-" + dt.getDate();
console.log(newDate);

edited Jun 19, 2017 at 10:17

answered Jun 19, 2017 at 10:07

Krazy_Tech

3263 silver badges11 bronze badges

Comments

slevy1 · Accepted Answer · 2017-06-19 12:44:25Z

var d = document;
d.g = d.getElementById;

var inDate = d.g("InputDate");
var outDate = d.g("OutputDate");
var datestring = "";
var mo = "";
var dt = null;


inDate.onchange = function() {
  dt = new Date(inDate.value);
  dt.setFullYear(dt.getFullYear() - 3);
  datestring = ("0" + (dt.getMonth() + 1)).slice(-2) + "." + ("0" + dt.getDate()).slice(-2) + "." + dt.getFullYear();
  outDate.value = datestring;

};

<input id="InputDate" data-role="datepicker" value="mm.dd.yyyy"><input id="OutputDate" data-role="datepicker" />

This revision makes use of the onchange event attribute which avoids the "NaN" message displaying in response to the default value of "mm.dd.yyyy" which serves as a prompt for the user. It also uses some short-cuts to reduce the verbosity of the code. Note: while the official example elegantly splits on a "." to get the date values, taking the time to use the Date methods to extract the month, day and year has an advantage despite the extra code. Splitting on a "." works as long as the input data contains a period to demarcate the month, day and year values. But the user could instead use a "/" or a "-" and then that splitting code would not yield the correct result, unless there was code that checked for the period.

Collectives™ on Stack Overflow

How to manipulate a date that is fetched from an html input with javascript

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related