Question

我的HTML5中的日期选择器有问题。我想用Javascript设置当前日期，但是我总是得到应该如何提供日期的信息。

这是我的代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<script>

//Declare variables
var today = new Date();

// Set values
$("#datePicker").val(getFormattedDate(today));

// Get date formatted as YYYY-MM-DD
function getFormattedDate (date) {
    return date.getFullYear()
        + "-"
        + ("0" + (date.getMonth() + 1)).slice(-2)
        + "-"
        + ("0" + date.getDate()).slice(-2);
}

</script>
<title>Report</title>
<body>

<h1 align="center">Report f&uuml;r informative Ansichten</h1>

<form action="#" th:action="@{/pdf}" method="post"> 
    <div><input name="datePicker" id="datePicker" type="date" min="1900-01-01" required></div>
    <span class="validity"></span>
    <input type="submit" value="PDF Ausgabe erzeugen"/>
</form>
</body>
</html>

也许有人可以告诉我我在这里做错了吗？

谢谢。

Answer 1

您的代码很好，但是script标记在HTML上方，因此$("#datePicker")为空，因为尚未创建HTML。

将脚本放在HTML下方或等待$(document).ready()

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Report</title>
</head>
<body>

<h1 align="center">Report f&uuml;r informative Ansichten</h1>

<form action="#" th:action="@{/pdf}" method="post"> 
    <div><input name="datePicker" id="datePicker" type="date" min="1900-01-01" required></div>
    <span class="validity"></span>
    <input type="submit" value="PDF Ausgabe erzeugen"/>
</form>


<script>

//Declare variables
var today = new Date();

// Set values
$("#datePicker").val(getFormattedDate(today));

// Get date formatted as YYYY-MM-DD
function getFormattedDate (date) {
    return date.getFullYear()
        + "-"
        + ("0" + (date.getMonth() + 1)).slice(-2)
        + "-"
        + ("0" + date.getDate()).slice(-2);
}

</script>
</body>
</html>

HTML5中的DatePicker设置当前日期

1 个答案: