JavaScript 日期和时间选择器

Question

我一直在到处寻找，但似乎找不到我要找的东西。我试图找到一个基本的日期和时间选择器以及一个使用 JavaScript 的时间选择器。

我的页面是 HTML5，我知道 datetime-local 和 time 的输入类型，但它们不会生成正确的格式。

对于 datetime-local，日期和时间的格式为:

yyyy-mm-ddThh:mm

我正在尝试找到一种方法，使用 JavaScript 将数据以 mm-dd-yyyy hh:mm am/pm 形式保存在字段中。

页面很简单，用户只需填写上面的内容，然后将日期和时间存储在一个元素中，使用 document.getElememtById

调用

与时间相同，只查找使用 12 小时格式的时间 JavaScript，并且值存储在由 getElementById 调用的元素中。

我发现了这个简单页面不需要的库之类的东西。

Answer 1

HTML5 引入了一系列可用于传统输入的新类型。

浏览器可以使用这些类型向您显示特定于上下文的键盘(在触摸屏设备上)，提供 native 输入验证，并且在日期等情况下，显示 native 日期选择器。

<input type="date">

自动设置今天的日期

自动设置 [type="date"]使用 vanilla JS 输入今天的日期，我们将使用 JavaScript Date()对象。

首先，我们将获取我们的字段(假设它的 ID 为#today) 并创建一个新的 Date()对象。

var field = document.querySelector('#today');
var date = new Date();

[type="date"]根据您居住的地方和使用的浏览器，该字段在视觉上看起来会有所不同(它以本地格式规范显示日期)，但该值遵循 YYYY-MM-DD格式。

我们可以从我们的日期中获取这些值中的每一个，将它们转换为带有 toString() 的字符串，并将它们连接成一个值。

• 我们将使用 getFullYear()以四字符格式获取年份。
• 我们将使用 getMonth()获取月份。
• 我们将使用 getDate()得到这一天。

出于某些荒谬的原因，getMonth() 方法返回以 0 开头的数字形式的月份(一月为 0，二月为 1，等等)。我们需要将结果加 1 以获得正确的月份。

因为它们是数字而不是字符串，所以都是 getMonth()和 getDate()缺少个位数月/日的前导零。我们可以使用 padStart()如果缺少，则添加这些方法。

我们的最终结果如下所示。

field.value = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0) +
    '-' + date.getDate().toString().padStart(2, 0);

让我们做一些事情:

以正确的格式向我们的输入标签添加一些帮助文本，如果支持日期输入类型，我们可以隐藏这些文本。添加模式属性以针对不受支持的浏览器进行验证。还添加带有模式的占位符属性。

<label for="today">
    The Date
    <span class="description"> Please use the YYYY-MM-DD format</span>
</label>
<input
    id="today"
    type="date"
    pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" placeholder="YYYY-MM-DD"

设置日期的 JavaScript 不会改变，但如果不需要，我们可以添加一些额外的代码来删除模式、占位符和帮助文本。

// Variables
var field = document.querySelector('#today');
var date = new Date();

// If [type="date"] is supported, update the DOM
if (isDateSupported()) {

    // Remove attributes
    field.removeAttribute('pattern');
    field.removeAttribute('placeholder');

    // Remove the helper text
    var helperText = document.querySelector('[for="today"] .description');
    if (helperText) {
        helperText.parentNode.removeChild(helperText);
    }

}

// Set the value
field.value = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0) +
    '-' + date.getDate().toString().padStart(2, 0);

这是一个有效的 example通过克里斯 Fardinand