Javascript 如何在单击日历图标时弹出日历？

我正在工作中，我想在点击日历图标时弹出日历

我用来放置开始日期和结束日期的HTML代码是：

<div class="dates">
   <div class="start_date">
      <input class="form-control start_date mb-4" type="text" placeholder="start date">
      <span class="fa fa-calendar start_date_calendar" aria-hidden="true "></span>
   </div>
   <div class="end_date">
      <input class="form-control  end_date mb-4" type="text" placeholder="end date">
      <span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
   </div>
</div>

问题陈述：

我想知道我必须使用什么js/jquery代码才能在点击左侧和右侧的日历图标时弹出日历（在下面的屏幕截图中用箭头标记）

我尝试放置以下代码，但不知何故，我无法在点击日历图标时弹出日历

<script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
</script>

$（函数（）{
$（“#日期选择器”）.datepicker（）；
} );

---

您可以尝试

Bootstrap-Datepicker

或

JQuery日期选择器

---

您可以尝试

Bootstrap-Datepicker

或

JQuery日期选择器

---

看起来您正在使用jQuery的日期选择器

您正在尝试执行这一行

$( "#datepicker" ).datepicker();

但是您没有任何id为datepicker的元素

如果希望在单击时将整个输入更改为datepicker，请尝试将id datepicker添加到输入中。将id datepicker与类开始日期一起添加到输入中

<div class="dates">
  <div class="start_date">
    <input class="form-control start_date mb-4" type="text" placeholder="start date" id="datepicker">
    <span class="fa fa-calendar start_date_calendar" aria-hidden="true "> 
    </span>
  </div>
  <div class="end_date">
    <input class="form-control  end_date mb-4" type="text" placeholder="end date">
    <span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
  </div>
</div>

---

看起来您正在使用jQuery的日期选择器

您正在尝试执行这一行

$( "#datepicker" ).datepicker();

但是您没有任何id为datepicker的元素

如果希望在单击时将整个输入更改为datepicker，请尝试将id datepicker添加到输入中。将id datepicker与类开始日期一起添加到输入中

<div class="dates">
  <div class="start_date">
    <input class="form-control start_date mb-4" type="text" placeholder="start date" id="datepicker">
    <span class="fa fa-calendar start_date_calendar" aria-hidden="true "> 
    </span>
  </div>
  <div class="end_date">
    <input class="form-control  end_date mb-4" type="text" placeholder="end date">
    <span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
  </div>
</div>

---

在使用引导时，我建议使用

在您的站点中，为日期输入字段提供一个

id

，并按如下方式初始化

$（文档）.ready（函数（）{
$（“#startdate”）.datepicker（）；
$（“#enddate”）.datepicker（）；
});
在使用引导时，我建议使用

在您的站点中，为日期输入字段提供一个
id
，并按如下方式初始化


$（文档）.ready（函数（）{
$（“#startdate”）.datepicker（）；
$（“#enddate”）.datepicker（）；
});
只需日历图标的Id，然后使用javascript单击相应图标的操作


$（文档）.ready（函数（）{
$（“#日历1”）。单击（函数（事件）{
$（'.start_date'）.datepicker（'show'）；
});
$（“#日历2”）。单击（函数（事件）{
$（'.end_date'）.datepicker（'show'）；
});
});
只需日历图标的Id，然后使用javascript单击相应图标的操作


$（文档）.ready（函数（）{
$（“#日历1”）。单击（函数（事件）{
$（'.start_date'）.datepicker（'show'）；
});
$（“#日历2”）。单击（函数（事件）{
$（'.end_date'）.datepicker（'show'）；
});
});

您可能需要使用正确的id并将datetimepicker插件绑定到该id上。看看这个：@alfonzjanfrithz小提琴能用吗？是的，从我这方面来说，非常好。@user5447339我建议你用Vignesh Raja的解决方案。最好在输入字段上显示焦点弹出窗口，而不是在日历图标上使用单击事件。这允许用户从日历中选择或键入日期。我已经在我的日历中添加了Vignesh Raja更改，但似乎不起作用。我收到以下错误
未捕获的TypeError:$（…）。datepicker不是ferhan.ferohost.com/：231的函数
你能看看我的代码吗？我犯了哪些错误？你可以在chrome浏览器中按CTRL+U来查看我的源代码，我很确定你知道。你可能想使用正确的id并将datetimepicker插件绑定到它。看看这个：@alfonzjanfrithz小提琴能用吗？是的，从我这方面来说，非常好。@user5447339我建议你用Vignesh Raja的解决方案。最好在输入字段上显示焦点弹出窗口，而不是在日历图标上使用单击事件。这允许用户从日历中选择或键入日期。我已经在我的日历中添加了Vignesh Raja更改，但似乎不起作用。我收到以下错误
未捕获的TypeError:$（…）。datepicker不是ferhan.ferohost.com/：231的函数
你能看看我的代码吗？我犯了哪些错误？在chrome浏览器中按CTRL+U可以查看我的源代码，我很肯定你知道这一点。@Nihat我想知道你是否可以给我一个指针，告诉我如何在主网站上使用它。在你的项目中包括Bootstrap或JQuery，并遵循JSFIDLE示例说明。@Nihat我想知道你是否可以给我一个指针，告诉我如何在主网站上使用它。在你的项目中包括Bootstrap或JQuery，并遵循JSFIDLE示例指令。我已经在我的中推送了您的更改，但它似乎不起作用。我收到以下错误
未捕获的TypeError:$（…）。datepicker不是ferhan.ferohost.com/：231的函数你能看看我的错误吗？你可以在chrome浏览器中按CTRL+U来查看我的源代码，我很确定你知道这一点。我已经在我的浏览器中推送了你的更改，但它似乎不起作用。我得到了以下错误
Uncaught类型