auto fill in input tag from date selected

[michaelfurey]

I have a php file and in javascript I am a newbie.

 

This is my php code:

 

echo 'Date:<input type="date" name="date">';
echo 'Day:<input type="text" name="day">';

 

I would like that when the user select a date from the input "date" in the input "day" appears the right day.

 

For example if the user writes "18/07/2017" in the input "date", in the second input tag should appear "Tuesday".

 

Is it possible to do that?

[denno020]

Sure can.. You'll need to put it into a Javascript function, and set that function to run when the input is changed:

document.querySelector("input[name='date']").addEventListener('change', function(e) {
  var dateInput = e.target;
  var date = dateInput.value;
})

There you will have the date value that they selected.

 

From there, you create a new instance of the Javascript Date class, passing the date in as a paramater, and then call getDay() on it.. getDay() will return an integer, corresponding to the day of the week, with Sunday = 0 (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

 

Have a crack at finishing that function off, and if you need more help, let us know.

[michaelfurey]

Sure can.. You'll need to put it into a Javascript function, and set that function to run when the input is changed:

document.querySelector("input[name='date']").addEventListener('change', function(e) {
  var dateInput = e.target;
  var date = dateInput.value;
})

There you will have the date value that they selected.

 

From there, you create a new instance of the Javascript Date class, passing the date in as a paramater, and then call getDay() on it.. getDay() will return an integer, corresponding to the day of the week, with Sunday = 0 (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)

 

Have a crack at finishing that function off, and if you need more help, let us know.

Ok perfect solved!

 

function switchDay (dateInput) {
  var date = dateInput.value;
  var dayF = new Date(date);
  var dayNumber = dayF.getDay();
    switch (dayNumber) {
    case 0:
        day = "Sunday";
        break;
    case 1:
        day = "Monday";
        break;
    case 2:
        day = "Tuesday";
        break;
    case 3:
        day = "Wednesday";
        break;
    case 4:
        day = "Thursday";
        break;
    case 5:
        day = "Friday";
        break;
    case 6:
        day = "Saturday";
}
    return day;
}


document.querySelector("input[name='date']").addEventListener('change', function(e) {
  var dateInput = e.target; 
  day = switchDay(dateInput);
  $('input[name=day]').val(day);
});