Search code examples
javascripthtmlformsdategetelementbyid

How to have javascript presets today's date in HTML form


I am developing a project with Django. I have an html webpage containing a form which has a date field. I want javascript compile it with today's date as soon as my user lands on that webpage, so that he/she gets a kind of "default date".

I have in my html page (templates/aggiungi_terminologia.html), the date field:

<div class="form-group">
    <label for="glossary_entry_input_21">Data di inserimento della terminologia</label>
    <small id="inputHelp" class="form-text text-muted">Compilare solo se è nota la data di pubblicazione del documento fonte, altrimenti inserire la data di oggi.</small>
    <input name="Data_inserimento_entry" type="date" value="01/01/1900" class="form-control" id="date_to_turn_into_today" placeholder="">              
</div>

and then the javascript call at the end of the form:

{% load static %} 
<script> src="{% static 'get_today_date.js' %}"</script>

And then, inside my javascript function (static/js/get_today_date.js):

var today = moment().format('DD/MM/YYYY');
document.getElementById("date_to_turn_into_today").value = today;

and since I am using moment.js, I added 'moment' in settings.py> INSTALLED_APPS ,

and to install moment I run on my console:

pip install django-staticfiles-moment

But when I run the server, all I get on that field is this:

date field of my HTML form

My console is returning:

WARNINGS: app_glossario.glossary_entry.Data_inserimento_entry: (fields.W161) Fixed default value provided. HINT: It seems you set a fixed date / time / datetime value as default for this field. This may not be what you want. If you want to have the current date as default, use django.utils.timezone.now

Why javascript is not replacing the date? How can I make it work? NOTE: the problem lies in the connection between js, html and django


Solution

  • SOLVED

    Here is what I did.

    In a javascript file called

    get_today_date.js

    stored at path

    static/js/get_today_date.js

    I inserted

    function get_today_date() {
    var now = new Date();
    var day = ("0" + now.getDate()).slice(-2);
    var month = ("0" + (now.getMonth() + 1)).slice(-2);
    var today = now.getFullYear()+"-"+(month)+"-"+(day);
    document.getElementById('date_to_turn_into_today').value = today;
    }
    

    as suggested here https://stackoverflow.com/a/57953522/7658051 .

    Then in the HTML page, before the closing </body> tag, I inserted

    {% load static %}
    
    <script type="text/javascript" src={% static "js/get_today_date.js" %}></script>
    <script> get_today_date() </script> 
    

    and it works perfectly.

    There was no neet to install the module moment, and even if my console returns

    WARNINGS: app_glossario.glossary_entry.Data_inserimento_entry: (fields.W161) Fixed default value provided. HINT: It seems you set a fixed date / time / datetime value as default for this field. This may not be what you want. If you want to have the current date as default, use django.utils.timezone.now

    my app works fine.