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

时间:2018-06-06 21:55:05

标签: javascript html datepicker

我希望能够通过从输入字段中获取值来设置我正在使用的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(),
});

1 个答案:

答案 0 :(得分:0)

如果你想把当前日期作为“日期选择器”过程的一部分,我会选择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>

试一试。