将输入文本传递给日期选择器的初始设置日期答案

【问题标题】：Pass input text to initial set date for date picker将输入文本传递给日期选择器的初始设置日期
【发布时间】：2018-06-06 21:55:05
【问题描述】：

我希望能够通过从输入字段中获取值来设置我正在使用的 JavaScript 日期选择器小部件的初始日期。

输入字段接受“YYYY-MM-DD”的值，希望将此值传递给我正在使用的日期选择器并弹出日期。

<input id="date" type="text" name="date" placeholder="YYYY-MM-DD" />

...

$A.bind(window, 'load', function(){
    // Syntax : setCalendar( ID , TriggeringElement , TargetEditField , EnableComments , clickHandler , config )
$A.setCalendar('UniqueCalendarId', $A.getEl('dateIcon'), $A.getEl('date'), false, undefined, {
    // Allow a date that isn't today to be set as the initial date. If unset, this value is initialized to today's date
    initialDate: new Date(),
});

【问题讨论】：

您想设置一个固定的日期，不允许别人选择日期？不确定我是否理解这个问题。为什么要对静态日期使用“日期选择器”？
另外，在 HTML5 中，您可以尝试输入 type="date"，您不需要 JS 来处理日期选择器。不适用于 IE 11 及更早版本，但全球接受。
对不起，应该更清楚。我想将输入字段中的值传递给日期选择器，因此当它最初弹出时，它将被设置为该日期，用户仍然可以单击另一个日期，它将替换输入字段中曾经存在的内容。目前发生的事情是，如果输入字段中有一个日期（例如 2015-06-05），当我打开日期选择器时，它的初始日期将是当前日期（2018-06-06）

标签： javascript html datepicker

【解决方案1】：

如果您想在“日期选择器”过程中获取当前日期，我会使用 HTML5：

<input id="date" type="date">

可以在这里演示：

<form>
<input id="date" type="date">
</form>

尽管旧版浏览器不支持此功能，但我相信它目前仅限于 IE。在不支持的浏览器上它会优雅地降级为 type="text"，但随后必须手动输入日期。

另外，MDN 在这里提供了一些很好的示例，说明如何与 JS 集成作为 HTML 输入类型的后备。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

如果你绝对想保持“脚本化”，我推荐jQuery datepicker UI。

您可以在哪里执行相同的任务：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

试一试。

【讨论】：