-2

I have a tabs list where I want to put manually football matches of the week as a content, but I want to add an automatic javascript date to the head title of tabs content and O want it to change automatically.

For example:

Today is Monday, I want the content of Monday tab to look like this(and the same for the other tabs and I want the dates to change automatically every week) :

Monday 03/04/2017 real madrid vs roma

for Tuesday tab Tuesday 04/04/2017 juventus vs ac milan . . . Here is a demo of I want exactly:

https://www.w3schools.com/code/tryit.asp?filename=FEA4XFMAQTS1

Can anyone help me to do that with javascript , please ?

NOTE: I want the dates to be near to the day name exactly like the demo.

Henry
  • 2,953
  • 2
  • 21
  • 34
A.king
  • 3
  • 4
  • 2
    Why don't you just copy the code provided on the link you mentioned? – Evrard-c Apr 03 '17 at 19:48
  • i already use this code in my website but i want the dates on tabs content to change automaticaly every week. – A.king Apr 03 '17 at 19:53
  • 1
    What have you tried/where is your code? – indubitablee Apr 03 '17 at 19:59
  • i haven't tried anything because i'm totally new to javascript but i searched the last two days for the respond but i didn't find anything similar to what i want to do . i don't want you to edit my code , i want you just to guide me please .my code is here https://www.w3schools.com/code/tryit.asp?filename=FEA4XFMAQTS1 – A.king Apr 03 '17 at 20:13
  • Probably a duplicate of [*Where can I find documentation on formatting a date in JavaScript?*](http://stackoverflow.com/questions/1056728/where-can-i-find-documentation-on-formatting-a-date-in-javascript?s=1|20.8199). – RobG Apr 03 '17 at 20:20
  • @Evrard-c—because the code there doesn't format the date, it's hard coded. – RobG Apr 03 '17 at 20:20
  • Just look up javascripts datetime functionality. Here is a link: https://www.w3schools.com/jsref/jsref_obj_date.asp – DDelgro Apr 03 '17 at 20:26
  • You're right @RobG, my comment was posted before the question was edited. – Evrard-c Apr 03 '17 at 20:39

1 Answers1

0

Okay, here is a function called getTabString() which takes a string input (Ex: Tuesday) and returns that string followed by its date in current week as you wanted. You can simply append your game string to it and use it as your tab's title. My code is based on: this and this

function getTabString(dayString) {
    var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    // Get today's date
    var today = new Date();
    // Find index of requested day
    var dayIndex = days.findIndex(function (element, index, array){

        if (element.toLowerCase() == dayString.toLowerCase()) {
            return true;
        } else {
            return false;
        }
    });

    // Find difference between today and requested day
    var diff = dayIndex - today.getDay();

    // Set date to requested day in this week
    var resultDate = new Date(today.setDate(today.getDate() + diff));

    // Get that date's day, month and year
    var resultDay = resultDate.getDate();
    var resultMonth = resultDate.getMonth() + 1;
    var resultYear = resultDate.getFullYear();

    // Nice 0 formatting for single digits 
    if (resultMonth < 10) {
        resultMonth = '0'+ resultMonth;
    }

    if (resultDay < 10) {
        resultDay = '0'+ resultDay;
    }

    // Returns "Wednesday 04/05/2017" 
    return days[diff + 1] + " " + resultMonth + "/" + resultDay + "/" + resultYear;
}

getTabString("Wednesday");
Community
  • 1
  • 1