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

Question

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:

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

There is something you are not showing. Do you load moment.js? Any errors in console? Errors in the network tab? — mplungjan, Sep 16 '19 at 08:38
Can you copy/printscreen the console? There is probably an error in there (maybe you didn't format the date correctly) — Tim, Sep 16 '19 at 08:41
Possible duplicate of [set date in input type date](https://stackoverflow.com/questions/12346381/set-date-in-input-type-date) — A. Meshu, Sep 16 '19 at 08:57
@A.Meshu I think it is not, because my doubt is also on my other project settings. For example on my use of getElementById — Tms91, Sep 16 '19 at 08:59
Another SO: https://stackoverflow.com/questions/1531093/how-do-i-get-the-current-date-in-javascript — A. Meshu, Sep 16 '19 at 09:36

A. Meshu · Answer 1 · 2019-09-16T09:36:17.553

1

Continue from comment about duplicated or not, take a look:

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('inputDate').value = today;

<input type="date" id="inputDate" />

Please check this also.

edited Sep 16 '19 at 09:36

answered Sep 16 '19 at 09:02

A. Meshu

4,053
2
20
34

thanks, but the problem is not in the javascript function but in my connection between the js file and the html file – Tms91 Sep 16 '19 at 10:38

Cat · Answer 2 · 2019-09-16T10:25:29.777

I've seen similar behavior (where the input field shows a date placeholder instead of my desired date) when I provided a date string that was incorrectly formatted. The input element seems to need a format like yyyy-mm-dd.

Here's a pretty intuitive solution using vanilla JS. The default value of the input element will be the (locale-specific) date.

(And most of the further info you might want about JS Dates can be found here on MDN.)

const
  // Selects input element 
  dateInput = document.getElementById("date"),

  // Defines Date object
  date = new Date(),

  // Extracts component parts of Date object
  year = date.getFullYear(),
  month = date.getMonth(),
  day = date.getDate(),

  // Defines a function to add a leading zero if needed
  pad = part => part < 10 ? "0" + part : part,

  // Formats date to meet the `input` element's expectations -- like: `yyyy-mm-dd`
  // (Adds +1 to month b/c `getMonth()` uses a zero-based array)
  dateString = year + "-" + pad(month + 1) + "-" + pad(day);

// Inserts date string into input element
dateInput.defaultValue = dateString;

// Repeats this process for the "time" parts
/*
const
  timeInput = document.getElementById("time"),
  hours = date.getHours(),
  minutes = date.getMinutes(),
  seconds = date.getSeconds(),
  timeString = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
timeInput.defaultValue = timeString;
*/

<input id="date" type="date" />
<!--
  // Optional input for time
  <input id="time" type="time" />
-->

score 1 · Accepted Answer · answered Sep 18 '19 at 09:08

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.

score 0 · Answer 4 · answered Sep 18 '19 at 09:24

0

The previous code did not work just because I forgot to call the function in HTML, so I just had to add

get_today_date()

But in the end I am not sure if I correctly installed the moment module required for the previuos javascript script.

answered Sep 18 '19 at 09:24

Tms91

3,456
6
40
74

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

4 Answers4