如何让 javascript 以 HTML 形式预设今天的日期

Question

我正在用 Django 开发一个项目。我有一个 html 网页，其中包含一个带有日期字段的表单。我希望 javascript 在我的用户登陆该网页后立即用今天的日期对其进行编译，以便 he/she 得到一种 "default date".

我的 html 页面 (templates/aggiungi_terminologia.html) 中有日期字段：

<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>

然后是表格末尾的 javascript 调用：

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

然后，在我的 javascript 函数中 (static/js/get_today_date.js):

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

并且由于我使用的是 moment.js，所以我在 settings.py> INSTALLED_APPS , [=19= 中添加了 'moment' ]

并在我的主机上安装 moment I 运行：

pip install django-staticfiles-moment

但是当我运行服务器时，我在该字段上得到的是：

我的控制台正在返回：

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

为什么 javascript 没有替换日期？我怎样才能让它发挥作用？注意：问题出在js、html和django

之间的连接上

Answer 1

接重复与否评论，看一下：

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" />

请同时检查 this。

Answer 2

当我提供格式错误的日期字符串时，我看到了类似的行为（输入字段显示日期占位符而不是我想要的日期）。输入元素似乎需要像 yyyy-mm-dd 这样的格式。

这是一个使用 vanilla JS 的非常直观的解决方案。 input 元素的默认值将是（特定于语言环境的）日期。

（您可能需要的关于 JS 日期的大部分进一步信息都可以找到 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" />
-->

Answer 3

已解决

这是我所做的。

在名为

的 javascript 文件中

get_today_date.js

存储在路径

static/js/get_today_date.js

我插入了

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;
}

按照此处的建议 .

然后在 HTML 页面中，在结束 </body> 标记之前，我插入了

{% load static %}

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

而且效果很好。

没有安装模块的时刻，即使我的控制台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

我的应用运行良好。

Answer 4

之前的代码没有运行只是因为我忘记调用HTML中的函数所以我只好添加

get_today_date()

但最后我不确定我是否正确安装了以前的 javascript 脚本所需的 moment 模块。

如何让 javascript 以 HTML 形式预设今天的日期

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

html

javascript

forms

date

getelementbyid