Question

HTML5输入类型非常棒，Opera的新内置日期选择器轻而易举，Chrome至少支持带有旋转轮实现的新输入类型。

但有没有办法将日期字段的默认值设置为今天的日期？使用Opera，我可以从日期选择器中选择“今天”，只要我点击Chrome中的任一步骤按钮，它就会从今天的日期开始递增/递减。

我并不羞于编写这个小问题的解决方案，但我觉得两个浏览器都完全了解当前日期但不会自动将其弹出（至少作为占位符）似乎很愚蠢）。

Answer 1

与任何HTML输入字段一样，除非使用value属性指定默认值，否则浏览器将为空。

不幸的是，HTML5没有提供在value属性（我可以看到）中指定“今天”的方法，只提供2011-09-29有效日期，如YYYY-MM-DD。

TL; DR 使用{{1}}日期格式或不显示

Answer 2

JavaScript Date对象为所需格式提供了足够的内置支持，以避免手动执行：

添加此项以获得正确的时区支持：

Date.prototype.toDateInputValue = (function() {
    var local = new Date(this);
    local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
    return local.toJSON().slice(0,10);
});

jQuery的：

$(document).ready( function() {
    $('#datePicker').val(new Date().toDateInputValue());
});

纯JS：

document.getElementById('datePicker').value = new Date().toDateInputValue();

Answer 3

这对我有用：

document.getElementById('datePicker').valueAsDate = new Date();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Answer 4

以下代码效果很好：

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

请注意，这取决于PHP。

Answer 5

您可以通过javascript填充默认值，如下所示： http://jsfiddle.net/7LXPq/

$(document).ready( function() {
    var now = new Date();
    var month = (now.getMonth() + 1);               
    var day = now.getDate();
    if (month < 10) 
        month = "0" + month;
    if (day < 10) 
        day = "0" + day;
    var today = now.getFullYear() + '-' + month + '-' + day;
    $('#datePicker').val(today);
});

我可能会花一些额外的时间来查看月份和日期是否为单位数字，并在前面加上额外的零...但这应该会给你一个想法。

编辑：添加了额外零点检查

Answer 6

如果您使用的是PHP

，请遵循标准的Y-m-d格式

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

Answer 7

HTML

<input type="date" id="theDate">

IS

$(document).ready(function() {
    var date = new Date();

    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;

    var today = year + "-" + month + "-" + day;       
    $("#theDate").attr("value", today);
});

demo 如果你不想使用jQuery，你可以做这样的事情

HTML

<input type="date" id="theDate">

JS

var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;

var today = year + "-" + month + "-" + day;       
document.getElementById("theDate").value = today;

demo

Answer 8

在HTML5中，没有办法将日期字段的默认值设置为今天的日期？如其他答案所示，可以使用JavaScript设置该值，如果您希望根据加载页面时用户的当前日期设置默认值，这通常是最佳方法。

HTML5定义valueAsDate元素的input type=date属性，并使用它，您可以直接从创建的对象设置初始值，例如按new Date()。但是，例如IE 10不知道该属性。（它也缺乏对input type=date的真正支持，但这是一个不同的问题。）

所以在实践中你需要设置value属性，它必须符合ISO 8601标准。现在这可以很容易地完成，因为我们可以期待当前使用的浏览器支持toISOString方法：

<input type=date id=e>
<script>
document.getElementById('e').value = new Date().toISOString().substring(0, 10);
</script>

Answer 9

如果您在浏览器中执行与日期和时间相关的任何操作，则需要使用Moment.js：

moment().format('YYYY-MM-DD');

moment()返回表示当前日期和时间的对象。然后，您可以调用其.format()方法，以根据指定的格式获取字符串表示形式。在这种情况下，YYYY-MM-DD。

完整示例：

<input id="today" type="date">
<script>
document.getElementById('today').value = moment().format('YYYY-MM-DD');
</script>

Answer 10

我测试过的最简单的工作版本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="date" id="date" name="date">
<script>
    $('#date').val(new Date().toJSON().slice(0,10));
</script>

Answer 11

非常简单，只需使用PHP，ASP，JAVA等服务器端语言，甚至可以使用javascript。

这是解决方案

<?php
  $timezone = "Asia/Colombo";
  date_default_timezone_set($timezone);
  $today = date("Y-m-d");
?>
<html>
  <body>
    <input type="date" value="<?php echo $today; ?>">
  </body>
</html>

Answer 12

使用moment.js在2行中解决这个问题， html5日期输入类型只接受“YYYY-MM-DD”这种格式。我这样解决了我的问题。

var today = moment().format('YYYY-MM-DD');
 $('#datePicker').val(today);

这是解决此问题的最简单方法。

Answer 13

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

$(document).ready( function() {
    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) ;


   $('#datePicker').val(today);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="datePicker" type="date" />

Answer 14

如果您需要填写输入日期时间，可以使用：

<input type="datetime-local" name="datetime" 
       value="<?php echo date('Y-m-d').'T'.date('H:i'); ?>" />

Answer 15

这就是我在我的代码中所做的，我刚刚测试过它工作正常，输入类型=“日期”不支持自动设置curdate，所以我用来克服这个限制的方式是使用PHP代码一个简单的像这样的代码。

<html>
<head></head>
    <body>
        <form ...>
            <?php
                echo "<label for='submission_date'>Data de submissão</label>";
                echo "<input type='date' name='submission_date' min='2012-01-01' value='" . date('Y-m-d') . "' required/>";
            ?>
        </form>
    </body>
</html>

希望它有所帮助！

Answer 16

对于NodeJS（带SWIG模板的Express）：

<input type="date" id="aDate" name="aDate" class="form-control" value="{{ Date.now() | date("Y-m-d") }}" />

Answer 17

最简单的解决方案似乎忽略了将使用UTC时间，包括投票率很高的时间。下面是一些现有答案的简化的ES6非jQuery版本：

const today = (function() {
    const now = new Date();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    return `${now.getFullYear()}-${month}-${day}`;
})();
console.log(today); // as of posting this answer: 2019-01-24

Answer 18

最简单通用的答案：

<input type="date" value="2020-12-31">

PHP 答案：

<input type="date" value="<?= date("Y-m-d") ?>">

日期格式应始终为“yyyy-mm-dd”

Answer 19

这是您真正需要在服务器端执行的操作，因为每个用户的本地时间格式不同，更不用说每个浏览器的行为也不同。

HTML日期输入值应采用以下格式： yyyy-mm-dd ，否则将不显示值。

ASP CLASSIC或VBSCRIPT：

current_year = DatePart("yyyy",date) 
current_month = DatePart("m",date) 
current_day = DatePart("d",date) 

IF current_month < 10 THEN
current_month = "0"&current_month
END IF
IF current_day < 10 THEN
current_day = "0"&current_day
END IF

get_date = current_year&"-"&current_month&"-"&current_day
Response.Write get_date

今天日期的输出：2019-02-08

然后在您的html中： <input type="date" value="<% =get_date %>"

PHP

只需使用以下命令： <input type="date" value="<?php echo date("Y-m-d"); ?>">

Answer 20

new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)

Answer 21

通过Javascript：

schtasks.exe /Delete /TN "My App"

Answer 22

如果您使用ruby，可以使用此选项将默认值设置为今天的日期和时间：

root@xxx:/# apt-get install herokuish
Reading package lists... Done
Building dependency tree
Reading state information... Done
herokuish is already the newest version (0.3.18).
herokuish set to manually installed.
The following packages were automatically installed and are no longer required:
  libcgi-fast-perl libcgi-pm-perl libclass-accessor-perl libfcgi-perl libio-string-perl libsub-name-perl libsystemd-journal0
Use 'apt autoremove' to remove them.
0 upgraded, 0 newly installed, 0 to remove and 1 not upgraded.
1 not fully installed or removed.
After this operation, 0 B of additional disk space will be used.
Do you want to continue? [Y/n] y
Setting up dokku (0.7.2) ...
Purging old database entries in /usr/share/man...
Processing manual pages under /usr/share/man...
Purging old database entries in /usr/share/man/fr.UTF-8...
Processing manual pages under /usr/share/man/fr.UTF-8...
Purging old database entries in /usr/share/man/tr...
Processing manual pages under /usr/share/man/tr...
Purging old database entries in /usr/share/man/fi...
Processing manual pages under /usr/share/man/fi...
Purging old database entries in /usr/share/man/ko...
Processing manual pages under /usr/share/man/ko...
Purging old database entries in /usr/share/man/da...
Processing manual pages under /usr/share/man/da...
Purging old database entries in /usr/share/man/pt_BR...
Processing manual pages under /usr/share/man/pt_BR...
Purging old database entries in /usr/share/man/nb...
Processing manual pages under /usr/share/man/nb...
Purging old database entries in /usr/share/man/ro...
Processing manual pages under /usr/share/man/ro...
Purging old database entries in /usr/share/man/hu...
Processing manual pages under /usr/share/man/hu...
Purging old database entries in /usr/share/man/vi...
Processing manual pages under /usr/share/man/vi...
Purging old database entries in /usr/share/man/id...
Processing manual pages under /usr/share/man/id...
Purging old database entries in /usr/share/man/pl...
Processing manual pages under /usr/share/man/pl...
Purging old database entries in /usr/share/man/uk...
Processing manual pages under /usr/share/man/uk...
Purging old database entries in /usr/share/man/sv...
Processing manual pages under /usr/share/man/sv...
Purging old database entries in /usr/share/man/fr...
Processing manual pages under /usr/share/man/fr...
Purging old database entries in /usr/share/man/zh...
Processing manual pages under /usr/share/man/zh...
Purging old database entries in /usr/share/man/sl...
Processing manual pages under /usr/share/man/sl...
Purging old database entries in /usr/share/man/es...
Processing manual pages under /usr/share/man/es...
Purging old database entries in /usr/share/man/it...
Processing manual pages under /usr/share/man/it...
Purging old database entries in /usr/share/man/eo...
Processing manual pages under /usr/share/man/eo...
Purging old database entries in /usr/share/man/fr.ISO8859-1...
Processing manual pages under /usr/share/man/fr.ISO8859-1...
Purging old database entries in /usr/share/man/pt...
Processing manual pages under /usr/share/man/pt...
Purging old database entries in /usr/share/man/sk...
Processing manual pages under /usr/share/man/sk...
Purging old database entries in /usr/share/man/ja...
Processing manual pages under /usr/share/man/ja...
Purging old database entries in /usr/share/man/de...
Processing manual pages under /usr/share/man/de...
Purging old database entries in /usr/share/man/hr...
Processing manual pages under /usr/share/man/hr...
Purging old database entries in /usr/share/man/zh_CN...
Processing manual pages under /usr/share/man/zh_CN...
Purging old database entries in /usr/share/man/zh_TW...
Processing manual pages under /usr/share/man/zh_TW...
Purging old database entries in /usr/share/man/cs...
Processing manual pages under /usr/share/man/cs...
Purging old database entries in /usr/share/man/sr...
Processing manual pages under /usr/share/man/sr...
Purging old database entries in /usr/share/man/el...
Processing manual pages under /usr/share/man/el...
Purging old database entries in /usr/share/man/ru...
Processing manual pages under /usr/share/man/ru...
Purging old database entries in /usr/share/man/nl...
Processing manual pages under /usr/share/man/nl...
Purging old database entries in /usr/local/man...
Processing manual pages under /usr/local/man...
0 man subdirectories contained newer manual pages.
0 manual pages were added.
0 stray cats were added.
0 old database entries were purged.
docker:x:999:dokku
Setting up storage directories
Setting up plugin directories
Migrating old plugins
Enabling all core plugins
find: File system loop detected; ‘/var/lib/dokku/core-plugins/available/named-containers/named-containers’ is part of the same file system loop as ‘/var/lib/dokku/core-plugins/available/named-containers’.
find: File system loop detected; ‘/var/lib/dokku/core-plugins/enabled/named-containers/named-containers’ is part of the same file system loop as ‘/var/lib/dokku/core-plugins/enabled/named-containers’.
find: File system loop detected; ‘/var/lib/dokku/plugins/available/named-containers/named-containers’ is part of the same file system loop as ‘/var/lib/dokku/plugins/available/named-containers’.
find: File system loop detected; ‘/var/lib/dokku/plugins/enabled/named-containers/named-containers’ is part of the same file system loop as ‘/var/lib/dokku/plugins/enabled/named-containers’.
dpkg: error processing package dokku (--configure):
 subprocess installed post-installation script returned error exit status 1
Errors were encountered while processing:
 dokku
N: Ignoring file '50unattended-upgrades.ucf-dist' in directory '/etc/apt/apt.conf.d/' as it has an invalid filename extension
E: Sub-process /usr/bin/dpkg returned an error code (1)

Answer 23

由于没有默认方法将值设置为今天的日期，我会说这应该取决于它的应用程序。如果您希望最大限度地提高受众对日期选择器的曝光度，请使用服务器端脚本（PHP，ASP等）来设置默认值。

但是，如果它是用于CMS的管理控制台，并且您知道用户将始终信任JS或您的站点受信任，那么您可以安全地使用JS来填充默认值，如jlbruno。

Answer 24

一个简单的解决方案！

gen

Answer 25

HTML本身没有默认方法可以将今天的日期插入输入字段。但是，与任何其他输入字段一样，它将接受一个值。

您可以使用PHP获取今天的日期并将其输入到表单元素的值字段中。

<?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = "$year-$month-$day";

    // Send to the browser the input field with the value set with the date string
    echo "<input type='date' value='$date_string' />";
?>

值字段接受格式YYYY-MM-DD作为输入，因此只需创建一个与输入值接受的格式相同的变量$date_string，并用今天取来的年，月和日填充它约会和瞧！你有一个预选的日期！

希望这会有所帮助：）

修改

如果您希望将输入字段嵌套在HTML而不是PHP中，则可以执行以下操作。

<?php // Fetch the year, month and day $year = date(Y); $month = date(m); $day = date(d); // Merge them into a string accepted by the input field $date_string = "$year-$month-$day"; ?> <html> <head>...</head> <body> <form> <input type="date" value="<?php print($date_string); ?>" /> </form> </body> </html>

我意识到这个问题曾经被问过一段时间（2年前），但我仍然需要一段时间才能在互联网上找到一个明确的答案，所以这可以为任何正在寻找答案的人提供服务。希望它能帮助每个人：）

另一个编辑：

几乎忘记了，过去曾经让我感到痛苦的事情总是忘记在PHP中使用date（）函数创建脚本时设置默认时区。

语法为date_default_timezone_set(...);。可以找到文档here at PHP.net和the list of supported timezones to insert into the function can be found here。这总是很烦人，因为我在澳大利亚，如果我没有正确设置，一切都会被推迟10小时，因为它默认为UTC + 0000，我需要UTC + 1000，所以要谨慎：）

Answer 26

我遇到了同样的问题，我用简单的JS修复了它。输入：

<input type="date" name="dateOrder" id="dateOrder"  required="required">

JS

<script language="javascript">
document.getElementById('dateOrder').value = "<?php echo date("Y-m-d"); ?>";
</script>

重要：JS脚本应该在最后一个代码行中，或者在输入之后，因为如果您之前放置此代码，脚本将找不到您的输入。

Answer 27

两个答案都不正确。

使用纯JavaScript的简短单行代码说明了当地时区，并且不需要定义其他功能：

const element = document.getElementById('date-input');
element.valueAsNumber = Date.now()-(new Date()).getTimezoneOffset()*60000;

<input id='date-input' type='date'>

这将获取以毫秒为单位的当前日期时间（从纪元开始），并应用以毫秒为单位的时区偏移量（分钟*每毫秒6万分钟）。

您可以使用element.valueAsDate来设置日期，但是您可以额外调用Date()构造函数。

Answer 28

JavaScript

document.getElementById('date-field').value = new Date().toISOString().slice(0, 10);

jQuery

$('#date-field').val(new Date().toISOString().slice(0, 10));

另一个选项

如果您要自定义日期，月份和年份，请按照自己的意愿加总或减对于月份，从表0开始，这就是为什么需要将月份与1相加的原因。

function today() {
        let d = new Date();
        let currDate = d.getDate();
        let currMonth = d.getMonth()+1;
        let currYear = d.getFullYear();
        return currYear + "-" + ((currMonth<10) ? '0'+currMonth : currMonth )+ "-" + ((currDate<10) ? '0'+currDate : currDate );
    }

应用今日功能

document.getElementById('date-field').value = today();

$('#date-field').val(today());

Answer 29

通过应用以下代码，这非常简单

<input type="date" value="<?= date('Y-m-d', time()); ?>" />

Date函数将通过在time()中获取日期来返回当前日期。

Answer 30

即使在所有这些时间之后，它也可能会帮助某个人。这是简单的JS解决方案。

JS

  let date = new Date();
  let today = date.toISOString().substr(0, 10);
  //console.log("Today: ", today);//test
  document.getElementById("form-container").innerHTML =
    '<input type="date" name="myDate" value="' + today + '" >';//inject field

HTML

 <form id="form-container"></form>

类似的解决方案可以在 Angular 中使用，而无需任何其他库即可转换日期格式。对于Angular（由于通用组件代码，代码已缩短）：

//so in myComponent.ts 
//Import.... @Component...etc...
date: Date = new Date();
today: String; //<- note String
//more const ...
export class MyComponent implements OnInit {
   //constructor, etc.... 
   ngOnInit() {
      this.today = this.date.toISOString().substr(0, 10);
   }
}
//so in component.html 
<input type="date" [(ngModel)]="today"  />

Answer 31

由于日期类型仅接受格式“ yyyy-MM-dd”，因此您需要相应地设置日期值的格式。

这是解决方案，

{{1}}

Answer 32

$(document).ready(function(){
  var date = new Date();

  var day = ("0" + date.getDate()).slice(-2); var month = ("0" + (date.getMonth() + 1)).slice(-2);

  var today = date.getFullYear()+"-"+(month)+"-"+(day) ;
});

$('#dateid').val(today);

Answer 33

谢谢彼得，现在我改变了我的代码。

<input type='date' id='d1' name='d1'>

<script type="text/javascript">
var d1 = new Date();
var y1= d1.getFullYear();
var m1 = d1.getMonth()+1;
if(m1<10)
    m1="0"+m1;
var dt1 = d1.getDate();
if(dt1<10)
dt1 = "0"+dt1;
var d2 = y1+"-"+m1+"-"+dt1;
document.getElementById('d1').value=d2;
</script>

Answer 34

面向未来的解决方案，也是 .split("T")[0] 的替代方案，它不会在内存中创建字符串数组，将使用 String.slice()，如下所示：

new Date().toISOString().slice(0, -14);

这里给出的很多答案，例如 slice(0, 10)、substring(0, 10) 等将来都会失败。
他们使用 Date.toJSON() 返回 Date.toISOString():

<块引用>

toISOString() 方法以简化的扩展 ISO 格式 (ISO 8601) 返回字符串，其长度始终为 24 或 27 个字符（分别为 YYYY-MM-DDTHH:mm:ss.sssZ 或 ±YYYYYY-MM-DDTHH:mm:ss.sssZ）。时区始终为零 UTC 偏移量，如后缀“Z”所示。

一旦年份变成 5 位数，这些答案就会失败。

datePickerId.value = new Date().toISOString().slice(0, -14);

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

Answer 35

对于那些使用ASP VBScript的人

<%
'Generates date in yyyy-mm-dd format
Function GetFormattedDate(setDate)
strDate = CDate(setDate)
strDay = DatePart("d", strDate)
strMonth = DatePart("m", strDate)
strYear = DatePart("yyyy", strDate)
If strDay < 10 Then
  strDay = "0" & strDay
End If
If strMonth < 10 Then
  strMonth = "0" & strMonth
End If
GetFormattedDate = strYear & "-" & strMonth & "-" & strDay
End Function
%>

然后在身体中，你的元素应该看起来像这样

<input name="today" type="date" value="<%= GetFormattedDate(now) %>" />

干杯！

Answer 36

使用javascript可以轻松实现此目的。

    var date = new Date();
    var datestring = ('0000' + date.getFullYear()).slice(-4) + '-' + ('00' + (date.getMonth() + 1)).slice(-2) + '-' + ('00' + date.getDate()).slice(-2) + 'T'+  ('00' +  date.getHours()).slice(-2) + ':'+ ('00' + date.getMinutes()).slice(-2) +'Z';
    document.getElementById('MyDateTimeInputElement').value = datestring;

如何将输入类型日期默认值设置为今天？

36 个答案:

demo

对于NodeJS（带SWIG模板的Express）：