Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

jamesjones21
jamesjones21
9,248 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,248 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;
?>

2 Answers

Adam Beer
Adam Beer
11,313 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,248 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,313 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,313 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,248 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,313 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,248 Points

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

Adam Beer
Adam Beer
11,313 Points

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