how to get a date from a date input using javascript

Question

hello so i have a javascript function that takes two dates from two date inputs, compares them and returns a boolean value except it doesn't work

function checkdate() {

	var datefrom = new Date();
	var dateto = new Date();


	datefrom = getElementById("date_from").innerHTML;
	dateto = getElementById("date_to").innerHTML;

	if (datefrom > dateto) {
		alert("Dateto must be bigger than datefrom  ");

		return false;
	} else return true;

}

<form onsubmit="return checkdate()" class="forms-sample" method="post"
   action="addstage.php">
   <div class="form-group row">
      <label for="exampleInputUsername2" class="col-sm-3 col-form-label">Date
      Début</label>
      <div class="col-sm-9">
         <input type="date" class="form-control"
            id="date_from" placeholder="Debut" name="datedebut"  required="required">
      </div>
   </div>
   <div class="form-group row">
      <label for="exampleInputEmail2" class="col-sm-3 col-form-label">Date
      Fin</label>
      <div class="col-sm-9">
         <input type="date" class="form-control"
            id="date_to" placeholder="Fin" name="datefin" required="required">
      </div>
   </div>
   <div class="form-check form-check-flat form-check-primary"></div>
   <button type="submit" class="btn btn-primary mr-2" value="addStage"
      name="action">Add</button>
</form>

You should use .value property, not .innerHTML to access the value of an input element. — pawel
– pawel, Commented Jun 2, 2020 at 15:35
After you fix the .value issue, You are comparing strings, not Dates. — epascarello
– epascarello, Commented Jun 2, 2020 at 15:41
@epascarello "2020-06-01" > "2020-05-30" works just fine, but sure, parsing the values into proper Date objects could have some benefits. — pawel
– pawel, Commented Jun 2, 2020 at 16:02
@pawel and if the date format is not MM-DD-YYYY or DD-MM-YYYY? — epascarello
– epascarello, Commented Jun 2, 2020 at 16:03
@epascarello then you're dealing with a non-compliant browser implementation of the date input :) Format of the returned value is defined by the spec and doesn't have to match the displayed date which most likely will be locale-specific. — pawel
– pawel, Commented Jun 2, 2020 at 16:16

David · Accepted Answer · 2020-06-02 15:50:33Z

Two problems:

You're calling getElementById globally, but should be calling it on the document object.
You're using .innerHtml instead of .value

As an aside you also don't need to create new Date() objects just to throw them away. Simply set the values you want right away:

var datefrom = document.getElementById("date_from").value;
var dateto = document.getElementById("date_to").value;

Note: These values are strings, not dates. According to MDN:

The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd.

So for comparison purposes this should still work, since yyyy-mm-dd is an incrementing value. But if you need a Date object then MDN also says there's a .valueAsDate property (though has no example on that page), as well as a .valueAsNumber which returns a UNIX timestamp that should be reliable for creating a Date.

Otherwise dates can be tricky in JavaScript, and libraries like Moment.js exist to make that easier.

Gh05d · Accepted Answer · 2020-06-02 15:33:57Z

0

You can't use getElementById as a static method. You have to call it on document:

datefrom= document.getElementById("date_from").innerHTML;
dateto= document.getElementById("date_to").innerHTML;

answered Jun 2, 2020 at 15:33

Gh05d

9,05211 gold badges42 silver badges84 bronze badges

1 Comment

epascarello Over a year ago

More issues than this

Collectives™ on Stack Overflow

how to get a date from a date input using javascript

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related