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

给定一个输入元素:

<input type="date" />

有没有办法将日期字段的默认值设置为今天的日期?

当前回答

在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' />";
?>

value字段接受YYYY-MM-DD格式作为输入，因此只需创建一个与输入值接受的格式相同的变量$date_string，并用从今天的日期和voilá获取的年、月和日填充它!你有一个预先选择的日期!

希望这对你有所帮助。

编辑:

如果希望输入字段嵌套在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(…);。可以在PHP.net上找到相关文档，可以在这里找到要插入函数的支持时区列表。这总是很烦人，因为我在澳大利亚，如果我没有正确设置，一切总是向后推10个小时，因为它默认为UTC+0000，我需要UTC+1000，所以要小心:)

2014-01-20 05:55:05

其他回答

这是服务器端真正需要做的事情，因为每个用户的本地时间格式不同，更不用说每个浏览器的行为不同了。

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="<? "=日期(“Y-m-d”);”? > >

2019-02-08 10:50:16

由于没有将值设置为今天日期的默认方法，所以我认为这应该取决于它的应用程序。如果您希望最大限度地让受众了解日期选择器，那么可以使用服务器端脚本(PHP、ASP等)设置默认值。

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

2011-08-08 16:23:34

即使过了这么久，这也能帮到别人。这是一个简单的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"  />

2019-12-04 17:08:23

你可以通过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);
});

我可能会多花点时间看看月份和日期是否是个位数，并在它们前面加上额外的零……但这应该能给你一个概念。

编辑:增加检查额外的零。

2011-08-08 13:28:17

一个简单的解决方案:

<input class="set-today" type="date">
<script type="text/javascript">
    window.onload= function() {
        document.querySelector('.set-today').value=(new Date()).toISOString().substr(0,10));
    }
</script>

2018-07-22 14:37:53

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

推荐文章

最新文章

标签