预填充日期输入 | CSS-Tricks

HTML 有一种特殊的日期输入类型，如下所示：<input type="date">。在支持的浏览器中（非常好），用户将获得用于选择日期的 UI。非常有用的东西，尤其是在它回退到可用的text输入时。但是如何将其设置为特定日期呢？

要设置特定日期，您需要将value设置为 YYYY-MM-DD 格式，如下所示

<input type="date" value="1980-08-26">

小提示：在支持日期输入的浏览器中，placeholder将不起作用。日期输入可以有min和max，因此只能选择特定范围内的日期。这些采用相同的格式。为了好玩，我们在这里使用了 step 值，以便仅可以选择星期二

<input type="date" min="2017-08-15" max="2018-08-26" step="7">

如何将输入默认为今天的日期？不幸的是，没有仅 HTML 的解决方案，但可以使用 JavaScript。

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

let today = new Date().toISOString().substr(0, 10);
document.querySelector("#today").value = today;

// or...

document.querySelector("#today").valueAsDate = new Date();

也可以选择特定的一周或一个月。预填充它们如下所示

<input type="week" value="2014-W02">

<input type="month" value="2018-08">

如果您需要日期和时间，也有一种输入类型。只是为了好玩

<input type="datetime-local" value="2017-06-13T13:00">

或者只是时间！在这里，我们将再次使用 step 只是为了好玩，将其限制为 15 分钟增量

<input type="time" value="13:00" step="900">

实时演示

查看 Chris Coyier 在 CodePen 上的 Pen 预填充 HTML 日期输入（@chriscoyier）。

支持

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器从该版本及更高版本开始支持该功能。

桌面

Chrome	Firefox	IE	Edge	Safari
25	132	否	13	技术预览版

移动/平板电脑

Android Chrome	Android Firefox	Android	iOS Safari
127	127	4.4	18.0

Roger Poole

# 2017年8月29日

我不确定你为什么要向你的访客询问今天的日期。我通常会使用一个隐藏字段来为任何表单条目添加时间戳，该字段会获取时间和日期 - 以我想要的 php 格式。

Chris Coyier

评论永久链接# 2017年8月29日

网络是一个很大的地方；)

也许是一个“食物日志”，你可以在其中输入今天的、昨天的或 4 天前的日志。但默认值是今天。

Leo Frost

# 2017年8月30日

我为花园开发了一个收获清单系统。我使用 datetime-local 输入，并使用 js 运行当前日期时间。日期和时间都很重要，因为某些草药最好在一天中的特定时间采摘，以最大限度地提高油的浓度。就像克里斯说的，网络是一个很大的地方。

$.fn.setNow = function (onlyBlank) {
  var now = new Date($.now())
    , year
    , month
    , date
    , hours
    , minutes
    , formattedDateTime
    ;

  year = now.getFullYear();
  month = now.getMonth().toString().length === 1 ? '0' + (now.getMonth() + 1).toString() : now.getMonth() + 1;
  date = now.getDate().toString().length === 1 ? '0' + (now.getDate()).toString() : now.getDate();
  hours = now.getHours().toString().length === 1 ? '0' + now.getHours().toString() : now.getHours();
  minutes = now.getMinutes().toString().length === 1 ? '0' + now.getMinutes().toString() : now.getMinutes();


  formattedDateTime = year + '-' + month + '-' + date + 'T' + hours + ':' + minutes;

  if ( onlyBlank === true && $(this).val() ) {
    return this;
  }

  $(this).val(formattedDateTime);

  return this;
}

$(function () {
    // Handler for .ready() called.
    $('input[type="datetime-local"]').setNow();

});

Ray Torres

评论永久链接# 2017年8月31日

我们有一个用于创建会议和活动的内部 Web 应用程序，大多数情况下开始日期实际上是今天的日期。

MaxArt

# 2017年8月29日

我不确定使用toISOString是否是一个好主意 - 它根据 UTC 时区格式化日期，因此它可能会生成错误的日期。或者更好的是，另一个时区的日期。
遗憾的是，通常的做法是像这样构建字符串

const dateString = date.getFullYear() + '-'
  + ('0' + (date.getMonth() + 1)).slice(-2) + '-'
  + ('0' + date.getDate()).slice(-2);

Ben

# 2017年8月29日

我想知道为什么 Chrome 和 Edge 使用等宽字体来设置所有这些日期输入的样式……

Greg Foreman

# 2017年8月29日

Firefox 的当前版本是 55，因此从技术上讲，直到 11 月中旬发布 57 之前，Firefox 都不直接支持它。Caniuse 有一段脚注说它可以通过“使用 dom.forms.datetime 标志”在 55 版本中使用。你是怎么做到的？

Ben

评论永久链接# 2017年8月30日

打开 Firefox，转到地址“about:config”，验证通知，然后搜索字符串“dom.forms.datetime”并双击它，您将在浏览器中激活对这些输入的支持。

Muhammad Rehan Saeed

# 2017年8月30日

大多数人目前如何处理日期和其他输入类型，我怀疑大多数开发人员都在使用某种 JavaScript 日期选择器。

使用内置的浏览器输入类型是否真的成为主流网站开始使用的东西？缺乏 Safari 支持是一个打击，该浏览器在几个方面似乎都落后了。

Arno

评论永久链接# 2017年9月7日

我在我们的网上商店实现了这一点。

起初它是一个简单的字段。使用 Modernizr (Modernizr.inputtypes.date) 我检测日期字段的支持。根据支持情况，我将其转换为日期字段或加载 js 日期选择器。

值得付出努力，因为我们有很多移动用户，他们最受益于原生日期选择器。JS 日期选择器有太多的小按钮。

由于我们位于比利时，并且我们的日期格式为 dd/mm/yy，因此您确实需要进行一些 js 转换，否则您可以直接使用预填充值的 date-inputfield。

Leo Frost

# 2017年8月30日

我为我的花园写了一个收获清单。在其中，我使用 datetime-local 输入以及一些 js 来获取今天的日期。时间很重要，因为某些草药需要在一天中的特定时间采摘以最大限度地提高其油产量（薄荷/柠檬草/牛至/茶叶/罗勒）

以下是我用来使其工作的大致代码片段。

$.fn.setNow = function (onlyBlank) {
  var now = new Date($.now())
    , year
    , month
    , date
    , hours
    , minutes
    , formattedDateTime
    ;

year = now.getFullYear();
  month = now.getMonth().toString().length === 1 ? '0' + (now.getMonth() + 1).toString() : now.getMonth() + 1;
  date = now.getDate().toString().length === 1 ? '0' + (now.getDate()).toString() : now.getDate();
  hours = now.getHours().toString().length === 1 ? '0' + now.getHours().toString() : now.getHours();
  minutes = now.getMinutes().toString().length === 1 ? '0' + now.getMinutes().toString() : now.getMinutes();

formattedDateTime = year + '-' + month + '-' + date + 'T' + hours + ':' + minutes;

if ( onlyBlank === true && $(this).val() ) {
    return this;
  }

$(this).val(formattedDateTime);

return this;
}

$(function () {
    // Handler for .ready() called.
    $('input[type="datetime-local"]').setNow();

});

Jordan

# 2017年8月30日

让老式的 Safari 成为唯一不支持此功能的现代浏览器……看来我还要使用 jQuery 的日期选择器几年。至少您可以设置它的样式，并且老实说，设计师会想要设置日期选择器的样式。

Todd

评论永久链接# 2017年8月31日

您可以在 Webkit 中设置一些日期选择器元素的样式

Todd

# 2017年8月31日

MomentJs 非常适合处理日期，如果有人感兴趣的话。

Iman YCH

# 2017年9月10日

大家好，

当您想出于多种原因（例如生日或订单最晚送达时间）获取用户的日期时，它非常好，非常需要 :)

不错！

postnuclearmorning

# 2017年9月14日

如何设置这个疯狂的东西的样式？

使用以下方法删除所有悬停控制器
input[type=date] { &::-webkit-clear-button { display: none; } &::-webkit-inner-spin-button { display: none; } &::-webkit-calendar-picker-indicator { display: none; } }

这将使这个东西毫无用处，没有日历弹出窗口，什么也没有。有没有办法启用和设置日历弹出窗口（无需第三方工具）而不显示 picker-indicator？阅读这方面的文章将非常棒。

此评论线程已关闭。如果您有重要信息要分享，请联系我们。