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

【问题标题】：How to make the calendar popup on click of a calendar icon ?如何在单击日历图标时弹出日历？
【发布时间】：2018-07-10 02:57:15
【问题描述】：

我正在处理website，我想在点击日历图标时弹出日历。

我用来放置开始日期和结束日期的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>

【问题讨论】：

您可能想要使用正确的 id 并将 datetimepicker 插件绑定到它。看看这个：jsfiddle.net/go6ygh6q
@alfonzjanfrithz 小提琴在工作吗？
是的，从我这边完全没问题..
@user5447339 我建议您使用 Vignesh Raja 的解决方案。最好在输入字段上显示弹出窗口，而不是在日历图标上使用单击事件。这允许用户从日历中选择或输入日期。
我已经在我的domain 中推送了 Vignesh Raja 更改，但它似乎不起作用。我收到以下错误Uncaught TypeError: $(...).datepicker is not a function at ferhan.ferohost.com/:231 你能看看我的代码我在做什么错误吗？你可以在chrome浏览器中按CTRL+U查看我的源代码，我很确定你知道。

标签： javascript jquery html css datepicker

【解决方案1】：

当您使用 Bootstrap 时，我建议您使用 Bootstrap Datepicker。

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

$(document).ready(function(){
    $("#startdate").datepicker();
    $("#enddate").datepicker();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css"/>

<input id="startdate">
<input id="enddate">

【讨论】：

我会将您的文件包含在我的域中，并且会通知您它是否有效。

【解决方案2】：

你可以试试Bootstrap Datepicker

https://jsfiddle.net/codeandcloud/acq7t97c/

或JQuery Datepicker

http://jsfiddle.net/klenwell/LcqM7/

【讨论】：

@Nihat 我想知道你能否给我一个指导，我如何在主网站上使用它。
在您的项目中包含 Bootstrap 或 JQuery 并按照 jsfiddle 示例说明进行操作。

【解决方案3】：

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

你正在尝试执行这一行

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

但您没有任何带有 id 日期选择器的元素。

如果您希望整个输入在单击时更改为日期选择器，请尝试将 id 日期选择器添加到您的输入中。使用类 start_date 将 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>

【讨论】：

我已将您的更改推送到我的domain，但它似乎不起作用。我收到以下错误Uncaught TypeError: $(...).datepicker is not a function at ferhan.ferohost.com/:231 你能看看我的code 我在做什么错误吗？你可以在chrome浏览器中按CTRL+U查看我的源代码，我很确定你知道。

【解决方案4】：

只是一个日历图标的ID，然后使用javascript点击相应图标的操作

        $(document).ready(function() {
          $('#calendar1').click(function(event) {
            $('.start_date').datepicker('show');
          });


          $('#calendar2').click(function(event) {
            $('.end_date').datepicker('show');
          });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <div class="container">
    <div class="row">
    <div class="col-md-3">
        <div class="input-group">
          <div class="input-group-addon" id="calendar1">
            <i class="fa fa-calendar"></i>
          </div>
          <input type="text" name="start_date" id="start_date" class="form-control start_date" data-inputmask="'alias':'mm/dd/yyyy'" data-mask="" value="">
        </div>
    </div>
    <div class="col-md-3">
        <div class="input-group">
          <div class="input-group-addon" id="calendar2">
            <i class="fa fa-calendar"></i>
          </div>
          <input type="text" name="end_date" id="end_date" class="form-control end_date" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask="" value="">
        </div>
        </div>
        </div>
        </div>

【讨论】：