[英]JavaScript Date and Time Picker
I've been searching everywhere but I can't seem to find what I'm looking for. 我一直在到处搜索,但似乎找不到我想要的东西。 I'm trying to find a basic Date and time picker as well as just a time picker that uses JavaScript.
我试图找到一个基本的日期和时间选择器以及使用JavaScript的时间选择器。
My page is HTML5 and I know about the input types of datetime-local
and time
but they don't produce the correct format. 我的页面是HTML5,我知道
datetime-local
和time
的输入类型,但是它们不能产生正确的格式。
For datetime-local
, the date and time is formated as: 对于
datetime-local
,日期和时间的格式为:
yyyy-mm-ddThh:mm
I'm trying to find a way to just have the data saved in the field as mm-dd-yyyy hh:mm am/pm
using JavaScript. 我正在尝试找到一种方法来使用JavaScript将数据保存为
mm-dd-yyyy hh:mm am/pm
。
The page is simple so the user just fills in the above and then the date and time is stored in an element to be called using document.getElememtById
该页面很简单,因此用户只需填写以上内容,然后将日期和时间存储在要使用
document.getElememtById
调用的元素中
Same with the time only, looking for just a time JavaScript that uses the 12 hour format and the value is stored in an element called by getElementById
. 仅与时间相同,只寻找使用12小时格式的时间JavaScript,并将该值存储在
getElementById
调用的元素中。
I found things like libraries which I don't need for this simple page. 我发现像库这样的东西,对于这个简单的页面我是不需要的。
HTML5 introduced a bunch of new types you can use on a traditional input. HTML5引入了一堆可以在传统输入中使用的新类型。
Browsers can use these types to show you context-specific keyboards (on touch screen devices), provide native input validation, and, in the case things like dates, surface a native date picker. 浏览器可以使用这些类型来显示特定于上下文的键盘(在触摸屏设备上),提供本机输入验证,并且在诸如日期之类的情况下,可以显示本机日期选择器。
<input type="date">
To automatically set a [type="date"]
input to today's date with vanilla JS, we'll use the JavaScript Date()
object. 为了使用香草JS自动将
[type="date"]
输入设置为今天的日期,我们将使用JavaScript Date()
对象。
First, we'll get our field (let's assume it has an ID of #today) and create a new Date()
object. 首先,我们将获取字段(假设其ID为#today)并创建一个新的
Date()
对象。
var field = document.querySelector('#today');
var date = new Date();
The [type="date"]
field looks different visually depending on where you live and what browser you're using (it shows dates in local format norms), but the value follows a YYYY-MM-DD
format. [type="date"]
字段在外观上会有所不同,具体取决于您的住所和所用的浏览器(它以本地格式规范显示日期),但是该值遵循YYYY-MM-DD
格式。
We can get each of those values from our date, convert them to a string with toString()
, and concatenate them into a single value. 我们可以从日期中获取每个值,使用
toString()
将它们转换为字符串,然后将它们连接为单个值。
getFullYear()
to get the year in a four-character format. getFullYear()
以四字符格式获取年份。 getMonth()
to get the month. getMonth()
获取月份。 getDate()
to get the day. getDate()
获取日期。 For some absurd reason, the getMonth() method returns the month as a number starting with 0 (January is 0, February is 1, etc.). 出于某些荒谬的原因,getMonth()方法以数字开头(以1(1月为0,2月为1,依此类推))返回月份。 We need to add 1 to our result to get the correct month.
我们需要在结果中加1以得到正确的月份。
Because they're numbers and not strings, both getMonth()
and getDate()
are missing leading zeros for single digit months/days. 由于它们是数字而不是字符串,因此
getMonth()
和getDate()
都缺少单位月/日的前导零。 We can use the padStart()
method to add those if missing. 我们可以使用
padStart()
方法添加那些缺少的内容。
Our finished result looks like this. 我们的最终结果如下所示。
field.value = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0) +
'-' + date.getDate().toString().padStart(2, 0);
Add some helper text to our input label on the proper format that we can hide if the date input type is supported. 如果支持日期输入类型,则以我们可以隐藏的正确格式将一些辅助文本添加到我们的输入标签中。 Add a pattern attribute to validate against for unsupported browsers.
添加模式属性以针对不支持的浏览器进行验证。 Add a placeholder attribute with the pattern as well.
还要添加一个带有模式的占位符属性。
<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"
The JavaScript to set the date won't change, but we can add some additional code to remove the pattern, placeholder, and helper text if not needed. 设置日期的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);
Here is a working example by Chris Fardinand 这是克里斯·法迪南(Chris Fardinand)的工作示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.