Jump to content

auto fill in input tag from date selected


michaelfurey
 Share

Go to solution Solved by denno020,

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

  • Solution

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

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • 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.