Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

jamesjones21
jamesjones21
9,260 Points
Posted by jamesjones21
jamesjones21
9,260 Points

HTML input date field, how to set default value to today's date?

Hi,

I'm slightly confused as to why my JS script isn't working, I have set it up to populate the date field to today's date, but the html date picker is still showing dd/mm/yyyy by default.

my html is:

<div class="col">
     <label for="date">Date</label>
     <input type="date" onload="getDate()" class="form-control" id="date" name="date">
</div>

my JS is:

function getDate(){
    var today = new Date();
    document.getElementById("date").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
}

any suggestions will be kindly appreciated :)

regards,

James

jamesjones21
jamesjones21
9,260 Points
jamesjones21
jamesjones21
9,260 Points

I have managed to solve the issue through php, but would love to hear a solution in Javascript :)

my PHP solution it:

input field:

<input type="date" value="<?php echo $today; ?>" class="form-control" id="date" name="date">

PHP:

<?php 

$month = date('m');
$day = date('d');
$year = date('Y');

$today = $year . '-' . $month . '-' . $day;
?>

3 Answers

Rohald van Merode
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff
Rohald van Merode
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

Hey James!

For a JavaScript solution, I'd recommend using the valueAsDate property that date-type input fields come with. You can use this to set the value of the input field with a Date object like so: 

document.getElementById("date").valueAsDate = new Date();

Your PHP solution is working correctly! However, instead of concatenating the day, month, and year separately, you can simplify it by using the date() function and making it return the YYYY-MM-DD format directly, like this: 

$today = date('Y-m-d');

The input would then look like this:

<input type="date" name="date" value="<?php echo $today; ?>">

Alternatively you could use the DateTime Object and use the format method.

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

Now the console give back the correct date, but I can't put it on the input filed. If I find out, I'll write the solution to you :)

html

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript and the DOM</title>

  </head>
  <body>
      <div class="col">
        <label for="date">Date</label>
        <input type="date" class="form-control" id="date" 
          name="date">
      </div>
    <script src="app.js"></script>
  </body>
</html>

js

function getDate() {
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth()+1; //January is 0!
  var yyyy = today.getFullYear();

  if(dd<10) {
      dd = '0'+dd
  } 

  if(mm<10) {
      mm = '0'+mm
  } 

  today = yyyy + '/' + mm + '/' + dd;
  console.log(today);
  document.getElementById("date").value = today;
}


window.onload = function() {
  getDate();
};
jamesjones21
jamesjones21
9,260 Points
jamesjones21
jamesjones21
9,260 Points

I did try to add the document.getElemenetById('date').value = today;

which works fine if the date field is transformed into a normal text box, I think it's the formatting to be honest. Even though the display is dd/mm/yyyy, the input is yyyy-mm-dd. Hence why I done it that way in php.

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

If you change the input field to the h1-h2-h3-h4-h5-h6 heading element or div it's working!

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

This is the console response : The specified value "2018/07/23" does not conform to the required format, "yyyy-MM-dd".

jamesjones21
jamesjones21
9,260 Points
jamesjones21
jamesjones21
9,260 Points

that is strange :S ok thanks very much, I did look at something similar on a forum, but couldn't make out why they would use $('date')? Is that another way of naming a variable?

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

No, the $ sign is the jQuery shorthand selector. 

$('date')

I don't understand fully because now it doesn't selected the id or class. Similar to native javascript, if you select id use # or you can select class with .(dot)

Like this, 

$('#date') - Selected id
$('.date') - Selected class

Hope this help.

jamesjones21
jamesjones21
9,260 Points
jamesjones21
jamesjones21
9,260 Points

now i see :) thanks. Still writing vanilla JS so only touched briefly on Jquery.

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

You are welcome! Maybe you can use it the moment.js.