Jump to content

auto fill in input tag from date selected


michaelfurey

Recommended Posts

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?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);
});
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.