Member Avatar for Jon_7

On my page https://fiftyallstars.com/50/curriculum.html , I have some basketball drills loading from a google spreadsheet of mine. Only thing is after it loads, I can't seem to get the datepicker to show today's date. My players get confused by having to select the date each time, and I'd rather it just default to today's date instead.

Looking around the web, I stumbled upon a code that looked like it should work but did not

$(document).ready(function() {
    $('#txtDate').datepicker();
    $('#txtDate').datepicker('setDate', 'today');
});

Assuming that's close, could someone help me perfect it and maybe tell me where exactly to add it? Or, if there's a better way, please help me out. I truly appreciate your assistance.

  • 3 Contributors
  • 6 Replies
  • 19K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by AndrisP
Member Avatar for AndrisP

I see you are using <input type="date" /> - do not need set date by jQuery, just add value (format YYYY-MM-DD), e.g. <input type="date" value="2018-09-24" />

commented: This is the best way by a mile +9
commented: Looks simple enough, but I can't get it to work +1
commented: Today is that day. +15
Member Avatar for Jon_7

Kinda makes sense, but it's not working out for me. I believe I need to trigger the event after it the spreadsheet loads, as all it does is show the date I added with the value tag without changing anything. Only when I change the date afterwards does it give the desired effect. I left it adjusted if you see here: https://fiftyallstars.com/50/curriculum.html

Also, because I'm not planning to change the value each day by hand, what do I actually type in that space to bring up the current date? Yea, I'm definitely no pro at this :-)

Thank you for the responses thus far. 

<meta content='http://fiftyallstars.com/Images/Logo/50whiteonblack.jpg' property='og:image'/>
<meta content='The complete basketball drill database!' property='og:description'/>

<html>

<head>
<title>Curriculum</title>

<link href='http://www.50allstars.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://fiftyallstars.com/Images/Logo/50whiteonblack.jpg" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://use.fontawesome.com/41d577df89.js"></script>
<link rel="stylesheet" href="http://fiftyallstars.com/Code/font-awesome-animation.min.css" />

    <script type='text/javascript'>

        var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1OrkcsjT32wHBu4el34eDXJZzyEHHk170PFBrrXdTU9g/edit?usp=sharing';

      let Records;
        function init() {
          Tabletop.init( { key: publicSpreadsheetUrl,
                           callback: showInfo,
                           simpleSheet: true } )
        }

        function showInfo(data, tabletop) {
            Records=data;
         }

        window.addEventListener('DOMContentLoaded', init);

    </script>
    <script type="text/javascript" src=backendScript.js></script>
    <script type="text/javascript">

function move() {
  var elem = document.getElementById("myBar");
  var width = 1;
  var id = setInterval(frame, 100);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      elem.innerHTML = width * 1  + '%';
      if(width==100){
      elem.innerHTML="Drills have been loaded. Please select a date on the left.";
      }
    }
  }
}
window.addEventListener('DOMContentLoaded', move);

    </script>
</head>

<body>
    <center>
        <div class="entirety">
            <table width="90%" cellpadding="5px" style="text-align:center;" cellspacing="5">
                <tr>
                    <td>
                        <datesection>
                            <form action="myFunction(); return false;">
                                <input id="datePicker" name="select-week" type="date" value="2018-09-24">
                            </form>
                        </datesection>
                    </td>
                    <td>
                        <div id="myProgress">
                            <div id="myBar">Loading...</div>
                        </div>
                    </td>
                </tr>
            </table>

            <div id="workout">
            </div>
            <div class="FridayWeek12">
                <header>
                    <table width="100%" cellpadding="5px" style="text-align:center;" cellspacing="5">
                        <tr>
                            <td id="QuoteOfDay" class="type">Type of Workout</td>
                            <td id="weekNumber" class="week">Week</td>
                            <td id="Sunday" class="no">Sunday</td>
                            <td id="Monday" class="no">Monday</td>
                            <td id="Tuesday" class="no">Tuesday</td>
                            <td id="Wednesday" class="no">Wednesday</td>
                            <td id="Thursday" class="no">Thursday</td>
                            <td id="Friday" class="no">Friday</td>
                            <td id="Saturday" class="no">Saturday</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="quotes">Quote of the day:</td>
                            <td id="Quote1" class="quote">Words</td>
                            <td id="Quote2" class="quote">give</td>
                            <td id="Quote3" class="quote">power</td>
                            <td id="Quote4" class="quote">to</td>
                            <td id="Quote5" class="quote">those</td>
                            <td id="Quote6" class="quote">who</td>
                            <td id="Quote7" class="quote">listen</td>
                    </table>
                </header>
                <section>
                    <div id="content">
                        <table width="100%" cellpadding="5px" style="text-align:center;">
                            <tr>
                                <td id="age1" class="age" width="33%">Elementary</td>
                                <td id="age2" class="age" width="33%">Middle School</td>
                                <td id="age3" class="age" width="33%">High School</td>
                            </tr>
                            <tr>
                                <td>
                                    <a id="EDrillLink1" href class="drill" target="_blank">
                                        <span id="EDrill1" class="drill">WARMUPS / DRIBBLING</span>
                                    </a>
                                </td>
                                <td>
                                    <a id="MDrillLink1" href class="drill" target="_blank">
                                        <span id="MDrill1" class="drill">WARMUPS / DRIBBLING</span>
                                    </a>
                                </td>
                                <td>
                                    <a id="HDrillLink1" href class="drill" target="_blank">
                                        <span id="HDrill1" class="drill">WARMUPS / DRIBBLING</span>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a id="EDrillLink2" href class="drill" target="_blank">
                                        <span id="EDrill2" class="drill">CONDITIONING / OFFENSE</span>
                                    </a>
                                </td>
                                <td>
                                    <a id="MDrillLink2" href class="drill" target="_blank">
                                        <span id="MDrill2" class="drill">CONDITIONING / OFFENSE</span>
                                    </a>
                                </td>
                                <td>
                                    <a id="HDrillLink2" href class="drill" target="_blank">
                                        <span id="HDrill2" class="drill">CONDITIONING / OFFENSE</span>
                                    </a>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <a id="EDrillLink3" href class="drill" target="_blank">
                                        <span id="EDrill3" class="drill">MOVES / DEFENSE</span>
                                    </a>
                                </td>
                                <td>
                                    <a id="MDrillLink3" href class="drill" target="_blank">
                                        <span id="MDrill3" class="drill">MOVES / DEFENSE</span>
                                    </a>
                                </td>
                                <td>
                                    <a id="HDrillLink3" href class="drill" target="_blank">
                                        <span id="HDrill3" class="drill">MOVES / DEFENSE</span>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a id="EDrillLink4" href class="drill" target="_blank">
                                        <span id="EDrill4" class="drill">PLAYS / COMPREHENSION</span>
                                    </a>
                                </td>
                                <td>
                                    <a id="MDrillLink4" href class="drill" target="_blank">
                                        <span id="MDrill4" class="drill">PLAYS / COMPREHENSION</span>
                                    </a>
                                </td>
                                <td>
                                    <a id="HDrillLink4" href class="drill" target="_blank">
                                        <span id="HDrill4" class="drill">PLAYS / COMPREHENSION</span>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a id="EDrillLink5" href class="drill" target="_blank">
                                        <span id="EDrill5" class="drill">SCENARIOS / SHOTS</span>
                                    </a>
                                </td>
                                <td>
                                    <a id="MDrillLink5" href class="drill" target="_blank">
                                        <span id="MDrill5" class="drill">SCENARIOS / SHOTS</span>
                                    </a>
                                </td>
                                <td>
                                    <a id="HDrillLink5" href class="drill" target="_blank">
                                        <span id="HDrill5" class="drill">SCENARIOS / SHOTS</span>
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a id="EDrillLink6" href class="drill" target="_blank">
                                        <span id="EDrill6" class="drill">COMPETE / SCRIMMAGE</span>
                                    </a>
                                </td>
                                <td>
                                    <a id="MDrillLink6" href class="drill" target="_blank">
                                        <span id="MDrill6" class="drill">COMPETE / SCRIMMAGE</span>
                                    </a>
                                </td>
                                <td>
                                    <a id="HDrillLink6" href class="drill" target="_blank">
                                        <span id="HDrill6" class="drill">COMPETE / SCRIMMAGE</span>
                                    </a>
                                </td>
                            </tr>
                        </table>
                        <hr>
                        <div class="story" id="story">

                        <div class="item">Studies show that we are wired to remember stories much more than data, facts, and figures. However, when data and story are used together, audiences are moved both emotionally and intellectually. Stories have always been a primal form of communication. They are timeless links to ancient traditions, legends, archetypes, myths, and symbols. They connect us to a larger self and universal truths. Stories are about collaboration and connection. They transcend generations, they engage us through emotions, and they connect us to others. </div>

                        <div class="item">Through stories we share passions, sadness, hardships and joys. We share meaning and purpose. Stories are the common ground that allows people to communicate, overcoming our defenses and our differences. Stories allow us to understand ourselves better and to find our commonality with others. Stories are how we think. They are how we make meaning of life. Call them schemas, scripts, cognitive maps, mental models, metaphors, or narratives. Stories are how we explain how things work, how we make decisions, how we justify our decisions, how we persuade others, how we understand our place in the world, create our identities, and define and teach social values. Stories provide order. </div>

                            <div class="item">Humans seek certainty and narrative structure is familiar, predictable, and comforting. Within the context of the story arc we can withstand intense emotions because we know that resolution follows the conflict. We can experience with a safety net. Stories are how we are wired. Stores take place in the imagination. To the human brain, imagined experiences are processed the same as real experiences. Stories create genuine emotions, presence (the sense of being somewhere), and behavioral responses. Stories are the pathway to engaging our right brain and triggering our imagination. By engaging our imagination, we become participants in the narrative. We can step out of our own shoes, see differently, and increase our empathy for others. Through imagination, we tap into creativity that is the foundation of innovation, self-discovery and change. Storytelling evokes a strong neurological response. </div>

                            <div class="item">Our brains produce the stress hormone cortisol during the tense moments in a story, which allows us to focus, while the cute factor of the animals releases oxytocin, the feel-good chemical that promotes connection and empathy. Other neurological research tells us that a happy ending to a story triggers the limbic system, our brain's reward center, to release dopamine which makes us feel more hopeful and optimistic. Storytelling may seem like an old-fashioned tool, today - and it is. That's exactly what makes it so powerful. Life happens in the narratives we tell one another. A story can go where quantitative analysis is denied admission: our hearts. Data can persuade people, but it doesn't inspire them to act; to do that, you need to wrap your vision in a story that fires the imagination and stirs the soul.</div>
                        </div>

<script>
var random = Math.floor(Math.random() * $('.item').length);
$('.item').hide().eq(random).show();
</script>
                    </div>
                </section>
            </div>
        </div>
    </center>

</body>

</html>
Member Avatar for gentlemedia

Add the current date (today) dynamically.

with PHP:

<input id="datePicker" type="date" value="<?php echo date('Y-m-d'); ?>" />

or with JS:

let today = new Date().toISOString().substr(0, 10);
document.querySelector("#datePicker").value = today;

EDIT: off-topic, but where is your doctype declaration? And those meta tags on the first 2 lines should be between the <head> tag.

Edited by gentlemedia
commented: Great adds. I'll try to take care of that doctype now. Thx for the JS as well +1
Member Avatar for Jon_7

Great help with the dynamic date, but I still need to trigger the event after the spreadsheet loads. The whole point was to have the info appear without selecting the date, but that still cannot be done. Am I saying that in a coherent way?

Thx a ton, everyone

Member Avatar for gentlemedia

Add your JS before the closing </body> tag.

Edited by gentlemedia
Member Avatar for AndrisP

Other way:

$(document).ready(function() {
    let today = new Date().toISOString().substr(0, 10);
    $("#datePicker").val(today);
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.