优化器的 JavaScript：添加日期时间选择器

已发表: 2021-05-11

我们都经历过：在表单中手动添加日期的令人沮丧的任务。

现在，我不了解你，但是当我在寻找日期格式时，我的大脑会超速运转。你要去 MM/DD/YYYY 吗？如果我们想要 YYYY-MM-DD 怎么办？二月又有多少天？

这篇博文将带您了解一些 JavaScript 函数，这些函数将通过在表单中添加 DateTime Picker 输入字段来帮助优化您的代码。

业务案例：添加日期时间选择器

在这个假设场景中，我们得出以下假设：

因为我们看到日期字段的完成率很低，我们预计为支持的浏览器添加日期时间选择器会导致潜在客户增加。我们将使用完成率来衡量这一点。

为了检验这个假设，我们将应用以下更改：

实验中使用的代码

现在让我们进入有趣的部分！

为了执行更改，我们在测试页面上运行下面的 JavaScript 代码。复制代码并亲自尝试！

 var dateInput = document.querySelector("#date");
支持的变量=真；
var test = document.createElement("input");
尝试 {
  test.type = "日期";
} 抓住 (e) {
  支持=假；
}
如果（支持）{
  dateInput.setAttribute("类型", "日期");
  dateInput.setAttribute("值", getFormattedDate(0));
  dateInput.setAttribute("min", getFormattedDate(-1));
  dateInput.setAttribute("max", getFormattedDate(1));
}
函数 getFormattedDate(changeYear) {
  var 今天 = 新日期（）；
  var dd = String(today.getDate()).padStart(2, "0");
  var mm = String(today.getMonth() + 1).padStart(2, "0");
  var yyyy = today.getFullYear() + changeYear;
  格式化日期 = yyyy + "-" + mm + "-" + dd；
  返回格式化日期；
}

守则细目

1. 新语法

分解首先回顾了上面示例中的所有新语法。 由于本文是系列文章的一部分，因此请务必查看该系列其他文章中的语法完整文档（包括发布在 Convert 博客上的这篇文章）。

try {} catch (error) {} 是一个语句，您可以使用它来尝试特定代码并在需要时捕获错误。当代码运行，并且没有发生错误时，它会跳过 catch。

如果它返回一个错误，它将捕获它。该脚本现在将执行 catch 主体之间的代码。因为它在函数中传递了错误，所以可以通过console.log 来查找具体问题。

通常，当您遇到错误时，代码将停止执行。此语句将允许您在预期出现错误时继续执行脚本。

.type 是一种设置 DOM 中元素的属性值“type”的方法。

.getDate() 是一种返回日期对象的日期的方法。它将以数字形式返回日期。

.padStart(targetLength, padString) 是一种方法，它允许我们用不同的字符填充我们想要的数量的字符串。您传递要在 targetLength 参数中填充字符串的次数。您在 padString 参数中传递用作填充的字符串。填充时会考虑 padString 的长度。

.getMonth() 是一种将日期对象的月份作为数字返回的方法。它从 0 开始计数，所以这将是一月。 11 号将是 12 月。

String() 是一种尝试将向下传递的参数转换为字符串值的方法。当您要将数字转换为字符串时，通常会使用此方法。

.getFullYear() 是一种返回日期对象年份的方法。

在使用函数时，return 是一个常见且重要的语句。有时您需要运行一个函数来获取数据并在其他地方使用它。函数中的返回状态将结束函数执行并返回语句正确的任何内容。

2. 逻辑

 var dateInput = document.querySelector("#date");

我们首先使用 querySelector 方法选择日期输入字段。我们将 id=”date” 添加到我们的输入字段以使用 #date 作为我们的选择器。我们将元素分配给我们新声明的 dateInput 变量。

 支持的变量=真；

然后我们声明支持的变量。我们将布尔值 true 分配给我们新声明的变量。如果浏览器不支持日期时间选择器，我们稍后会更改此值。

 var test = document.createElement("input");

我们需要创建一个输入字段，我们将纯粹用于检查是否支持此类型。我们使用 .createElement 方法来做到这一点。

我们将“输入”作为字符串传递来创建输入元素。我们将此元素保存到新声明的测试变量中。

我们将使用以下 try 语句来检查是否支持我们的更改：

 尝试 {

首先编写 try 关键字。我们用大括号打开语句。

该函数将尝试这些括号之间的所有内容。它只会运行代码以查看是否发生错误。

 test.type = "日期";

我们可以通过将日期类型设置为我们的测试输入字段来测试是否支持日期类型。如果没有发生错误，我们知道浏览器支持它。

 } 抓住 (e) {

然后，我们在右括号之后写下我们的 catch 语句。当我们发现错误时，大括号之间的部分将运行。

通过将“e”作为参数，我们可以在 catch 语句中使用它。例如，您可以使用它来控制台记录特定错误。

 支持=假；

如果我们发现错误，我们需要将支持的变量更改为 false。稍后我们将使用此值来确定是否要执行更改。

然后，用右括号关闭 catch 语句。

 如果（支持）{

我们将使用支持的变量的值来运行 if 语句。如果变量成立，它将运行该语句。这样，我们确保浏览器不受支持。

 dateInput.setAttribute("类型", "日期");

要添加日期时间选择器，我们只需将具有值日期的属性类型添加到我们的 dateInput 变量中。根据浏览器的不同，它现在会显示一个图标，您可以单击该图标来选择日期。

 dateInput.setAttribute("值", getFormattedDate(0));

我们还想在输入字段中添加一个默认日期。您可以通过添加将日期保存为字符串的 value 属性来设置日期字段的默认日期。

使用我们定义的函数 getFormattedDate 以正确的格式获取今天的日期。该函数可以通过在调用时输入一个数字作为参数来添加或删除年份。

 dateInput.setAttribute("min", getFormattedDate(-1));

这样，我们可以使用这一行将选择器的最小日期设置为今天之前的 1 年。您可以通过传递 -1 作为参数来做到这一点。这将限制用户选择最小日期之前的日期。

 dateInput.setAttribute("max", getFormattedDate(1));

对用户可以选择的最大数量执行相同的操作。通过传递“1”作为参数来设置一年后的最大年份。

用大括号关闭 if 语句。现在，此更改将在输入字段中可见。

我们仍然需要定义 if 语句中使用的函数。我们希望此函数以以下格式返回日期：yyyy-mm-dd。

 函数 getFormattedDate(changeYear) {

为了达到这个结果，首先使用 function 关键字来定义一个。我们将名称 getFormattedDate 赋予我们的函数。

要稍微控制返回的日期类型，请将 changeYear 设置为参数。

我们可以使用 this 作为函数体中的关键字来控制函数调用时传递的内容。

 var 今天 = 新日期（）；

通过创建一个新的日期对象来启动这个函数体。创建新日期对象的那一刻将是存储的时间。这意味着我们可以将新对象分配给新声明的今天变量。

 var dd = String(today.getDate()).padStart(2, "0");

getDate 方法获取我们日期的日期。当天数为个位数时，它会使用 padStart 方法在数字前添加一个 0。

否则，这将是我们输入字段的错误格式。我们还需要将数字转换为字符串，以便稍后连接我们的数字。否则，程序将使用加法。

 var mm = String(today.getMonth() + 1).padStart(2, "0");

在这里，我们使用 getMonth 来获取今天日期的月份。我们通过在返回的数字上加 1 来做一个小的修正。然后，如果数字是一位数字，我们用零填充数字。此方法可确保我们拥有正确的月份数据格式。

 var yyyy = today.getFullYear() + changeYear;

接下来，我们使用 getFullyear 方法获取今天的年份。使用传递给函数的数字来更改年份。

 格式化日期 = yyyy + "-" + mm + "-" + dd；

然后，我们使用字符串连接将所有变量组合成一个格式化的日期。

 返回格式化日期；

我们返回 formattedDate 变量，以便函数调用者可以使用它。

最后，我们用大括号结束我们的函数并结束我们的脚本。脚本可以在声明之前使用此函数，因为函数被提升到代码的顶部。变量也是如此。如果将 formattedDate 函数移到 if 语句上方，代码可能会运行得更快一些。

3. 运动

因此，既然您已经制定了整个过程，那么剩下的就是让您尝试一下。别忘了玩得开心！

继续并更改输入字段，因此 min 字段包含距今天正好两年的日期。然后，添加两年后的最大日期。祝你好运！

想不通？在LinkedIn上给我发消息，我会帮你的！

如果您错过了我们的上一篇文章，请查看如何在您的网站上插入总折扣部分以及其他高级转换优化技术。