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

403

HTML5输入类型很棒，Opera的新内置日期选择器轻而易举，Chrome至少已通过自旋轮实现支持新输入类型。

但是，有什么方法可以将date字段的默认值设置为今天的日期吗？使用Opera时，我可以从日期选择器中选择“今天”，然后单击Chrome中的任一步骤按钮，它就会从今天的日期开始递增/递减。

我不愿意为这个小问题编写解决方案的代码，但对我来说，两个浏览器都完全了解当前日期，却不会自动将其弹出（至少作为占位符），对我来说似乎很可笑。

html  date  input 
— 伊恩·布朗
source
1
— Blazemonger 2014年
可能对您有帮助。stackoverflow.com/questions/ 14212527/…
— 穆萨
— villamejia
4
var date = new Date（）; //创建日期对象var min_date = date.toISOString（）。slice（0,10）; ////获取当前日期的特定部分“2018年2月2日”
— 居纳伊居尔泰金
<input type =“ date” value =“ YYYY-MM-DD” />
— Boris Detry

Answers:

288

像任何HTML输入字段一样，浏览器会将其保留为空，除非使用value属性指定了默认值。

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

TL; DR使用YYYY-MM-DD日期格式，否则将不显示

— 达
source
50
对于.net用户：DateTime.Today.ToString（“ yyyy-MM-dd”）
— dvdmn 2014年
3
请注意，月份和日期前面的“ 0”是必需的：“ 2011-09-29”有效，“ 2011-9-29”无效。
— nico
2
Ruby：（也）DateTime.now.strftime("%Y-%m-%d")
— Adam Grant
43
@MartinBarker不是date('Y-m-d')吗，因为它需要前导零？
— SGR 2016年
15
对于JavaScript：myDate.toLocaleDateString('en-CA')诀窍
— Ulysse BN
218

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();
— 贿赂
source
1
当心您是否支持移动设备。在Android 4.0.3（至少）上，我遇到了以下问题：通过弹出日期控件选择的新日期会附加到今天的日期上，而不是替换为今天的日期。例如，您最终可以使用2013-03-252013-03-27而不是2013-03-25，并且用户无法更改它。
— 本·克莱顿2013年
1
@Web_Designer足够公平。您需要先调整local.setMinutes(this.getMinutes() - this.getTimezoneOffset());（最终得到答案），然后再进行调整。
— brianary 2013年
1
这仅设置value 属性，不设置属性，因此如果重置表单，则默认为无值。而且，使用toISOString会更清楚，无论如何toJSON调用。
— RobG 2015年
1
@apraetor实际上，反之亦然，因为只有支持日期输入的浏览器才受支持valueAsDate（除了IE，Firefox，也许还有Safari，基本上除了Chrome，Opera，Edge和某些移动浏览器以外的所有东西）。一切都支持value我的解决方案使用的属性，即使在不支持的浏览器中日期输入回落到文本输入时，另一个解决方案也会出错或失败。
— brianary
2
这个答案对我input[type=datetime-local]slice(0,19)
— 有用，
188

这对我有用：

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

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLInputElement

— 安德烈
source
1
在所有浏览器中都可以使用吗？和移动版本一样？经过测试？
— Usman Younas
2
@UsmanY这是HTML5规范的一部分，因此任何支持HTML5输入类型的都应支持valueAsDate。html.spec.whatwg.org/multipage/forms.html#dom-input-valueasdate
— wersimmon
@harbichidian日期输入的建议比valueAsDate的建议早一会儿。您是否有指向该属性的浏览器支持的链接？
— brianary
3
该日期将转换为UTC时间。如果您在-0600的2018-03-27下午6点设置valueAsDate为new Date()，则字段值将设置为2018-03-28。参见austinfrance.wordpress.com/2012/07/09/…–
— Aupajo，
1
就像@Aupajo所说的，如果您不想使用UTC时间，这会设置错误的日期。
— ADJenks
81

以下代码运行良好：

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

请注意，这依赖于PHP。

— 伊瑟姆·穆罕默德（Isham Mohamed）
source
64
您的答案完全取决于php。
— Yëco
1
如果您的联系表单在PHP页面上（例如，在WordPress页面或简码上），则此方法非常有效。非常感谢伊舍姆！
— tristanojbacon 2012年
5
您可以更改<?php echo date('Y-m-d', strtotime(date('Y/m/d'))); ?>为<?php echo date('Y-m-d'); ?>
— Murray Smith
7
这根据HTML文档的创建日期（在服务器中，在服务器的时区中）设置日期。实际填写该字段时，它不必与当前日期匹配。如果您需要执行取决于用户端的操作，则客户端JavaScript会更好。
— Jukka K. Korpela
1
您还可以使用短标签<？= date（'Ym-d'）; ？>。少“回音”
— sashok_bg 2015年
36

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

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

编辑：添加检查为额外的零

— 杰夫
source
在Opera中（在Opera 12 / Windows上进行了测试），如果您不按月和按月输入前导零，则此方法将无效。
— 雷纳托
24

的HTML

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

JS

$(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);
});

演示

如果您不想使用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;

演示

22

在HTML5中，没有办法将date字段的默认值设置为今天的日期吗？如其他答案所示，可以使用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>
— Jukka K.Korpela
source
6
或者，如果您希望它兼容Y10K：= new Date().toISOString().split('T')[0];
— Blazemonger，2014年
1
toISOString返回UTC日期和时间，因此可能无法显示用户所在时区的正确日期。例如，如果用户使用UTC + 0800，则从午夜到08:00，他们将获得昨天的日期。
— RobG 2015年
18

如果您要在浏览器中执行与日期和时间有关的任何操作，则要使用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>
— 加布里埃尔·加西亚（Gabriel Garcia）
source
如果您已经有可用的moment（）或计划在Web应用程序中进行更多日期工作，那么此解决方案就很容易了。时刻解决了很多问题。
— secretwep
10

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

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

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

— 乌迈尔·哈立德（Umair Khalid）
source
8

Java脚本

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());
— 医学博士伊亚辛·阿拉法特
source
7

非常简单，只需使用服务器端语言，例如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>
— 特固古鲁
source
7 
<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" />
展开摘要

— 圣塔努
source
5

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

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

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

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

最简单的解决方案似乎忽略了将使用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
— 右旋糖原
source
您应说明要将输入元素分配给哪个属性。value还是valueAsDate？看起来不错。
— ADJenks
4

这就是我在代码中所做的，我刚刚进行了测试，并且工作正常，输入type =“ date”不支持自动设置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>

希望能帮助到你！

— 琴巴
source
1
嗨，欢迎来到SO，请添加更多信息以支持您的代码，并确保提出问题的人员需要基于PHP的解决方案。
— 湿婆
4

两个最重要的答案都是错误的。

使用纯JavaScript的简短的一列式说明了当地时区，并且不需要定义其他功能：

const element = document.getElementById('date-input');
element.valueAsNumber = Date.now()-(new Date()).getTimezoneOffset()*60000;
<input id='date-input' type='date'>
展开摘要

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

您可以使用设置日期，element.valueAsDate但是您需要对Date()构造函数进行额外的调用。

— 罗维科
source
4

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

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="<?= date("Y-m-d"); ?>">

— csandreas1
source
4

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

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

Date函数将以中的日期返回当前日期time()。

— Gowtham Ag
source
2

通过Javascript：

var today = new Date();

document.getElementById("theDate").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
— Charnstyle
source
2 
new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)
— 金麂皮
source
1
请在回答中添加描述。
— bawa g
1

如果您使用的是ruby，则可以使用它来将默认值设置为今天的日期和时间：

<input type="datetime-local" name="time" value="<%= Time.now.strftime('%Y-%m-%dT%H:%M') %>" />
— 肖恩
source
1

一个简单的解决方案：

<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>
— 牙膏
source
1
@GeorgeJempty如果UTC中的当前时间与当前日期不同，则不会这样做。它将以UTC（而不是您当地的时区）返回当前日期。
— ADJenks '19
@adjenks嘿，我发现这是个理想的测试时间，直到午夜10分钟
— Dexygen
@adjenks我终于抽出了六行来避免UTC陷阱，并在几个现有的类似jQuery / non-ES6答案上略有改善：stackoverflow.com/a/54341296/34806
— Dexygen，
答案在行尾有一个额外的“）”，在“新的Date（）”周围有多余的支出。应该是： document.querySelector('.set-today').value=new Date().toISOString().substr(0,10);
— Kirby L. Wallace
0

由于没有默认的方法将值设置为今天的日期，因此我想这应该取决于它的应用。如果您希望最大程度地增加受众对日期选择器的了解，请使用服务器端脚本（PHP，ASP等）来设置默认值。

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

— 斯拉夫
source
0

我有同样的问题，我用简单的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脚本应该在最后一行代码中或输入之后，因为如果您将此代码放在前面，则脚本将找不到您的输入。

— 马龙
source
2
如果您仍在使用PHP，为什么还要打扰JavaScript？
— Blazemonger，2014年
0

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

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

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

我意识到这个问题是前一段时间（两年前）提出的，但是仍然花了我一段时间才能在互联网上找到明确的答案，所以这可以服务于任何正在寻找答案并希望它的人极大地帮助每个人:)

另一个编辑：

几乎忘记了，过去对我来说是一件痛苦的事，每当在PHP中使用date（）函数编写脚本时，总是忘记设置默认时区。

语法为date_default_timezone_set(...);。文档可以发现在这里PHP.net并可以在这里找到支持时区插入到功能列表。自从我在澳大利亚以来，这一直很烦人，如果我没有正确设置，一切都会被推迟10个小时，因为它默认为UTC + 0000，而我需要UTC + 1000，所以要小心:)

— 踩帽子
source
0

谢谢彼得，现在我更改代码。

<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>
— 尼克·史密斯
source
3
拜托，拜托，请不要在实际的应用程序中使用document.write-使用它有很多问题。
— 彼得·哈特
彼得，你能解释什么概率。你懂得 ？
— Nikhil sHETH
彼得，还提到了如何在输入类型=日期中获取当前日期作为默认值
— Nikhil sHETH 2013年
1
并不是说它不起作用，而是总的来说，使用document.write是不好的做法。发生这种情况的原因有很多，下面是一些示例：stackoverflow.com/questions/802854/… 如果绝对必须在客户端的javascript中执行此操作，则可以在元素和文档上使用id。 getElementById以获取元素并对其进行更改，类似于此页面上的其他一些答案。
— 彼得·哈特
0

对于使用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) %>" />

干杯!

— 瑞安·邓菲
source
0

即使经过了所有这些时间，它可能也会对某人有所帮助。这是简单的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"  />
— StefaDesign
source
对于只需要使用默认值来说，这太麻烦了。
— 改革了
您要指出两个独立示例中的哪一个？两个示例中都有4行代码。...第一个示例是纯html + js，因此，如果您不计算注释，请创建容器并复制粘贴其3行代码。同样的角度的例子，这就是我留下评论的原因。不知道你的意思
— 。...– StefaDesign
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.