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 引入了一堆可以在传统输入中使用的新类型。

浏览器可以使用这些类型显示特定于上下文的键盘（在触摸屏设备上），提供本机输入验证，并且在诸如日期之类的情况下，可以显示本机日期选择器。

<input type="date">

自动设置今天的日期

要使用香草JS自动将[type="date"]输入设置为今天的日期，我们将使用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);

这是克里斯·法迪南（Chris Fardinand）的作品example

JavaScript日期和时间选择器

1 个答案:

自动设置今天的日期

让我们做一些事情：