我一直在到处寻找，但似乎找不到我要找的东西。我正在尝试找到一个基本的日期和时间选择器以及一个使用 JavaScript 的时间选择器。
我的页面是 HTML5，我知道 datetime-local 和 time 的输入类型，但它们不会产生正确的格式。
对于datetime-local，日期和时间格式为：
yyyy-mm-ddThh:mm
我正在尝试找到一种方法，使用 JavaScript 将字段中的数据保存为 mm-dd-yyyy hh:mm am/pm。
页面很简单，所以用户只需填写上面的内容，然后将日期和时间存储在要使用document.getElememtById调用的元素中
与仅时间相同，仅查找使用 12 小时格式的时间 JavaScript，其值存储在 getElementById 调用的元素中。
我找到了这个简单页面不需要的库之类的东西。
【问题讨论】：
标签： javascript html datetime time datepicker
HTML5 引入了一系列可用于传统输入的新类型。
浏览器可以使用这些类型向您显示特定于上下文的键盘（在触摸屏设备上），提供本地输入验证，并且在日期等情况下，显示本地日期选择器。
<input type="date">
要使用 vanilla 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
【讨论】：