单击日历图标，如何使日历弹出? [英] How to make the calendar popup on click of a calendar icon ?

问题描述

我正在网站上工作，我想在其中单击日历图标时弹出日历.

I am working on the website in which I want to popup the calendar on hitting calendar icon.

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

The HTML code which I have used in order to place Start Date and End Date are:

<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代码才能在点击左右日历图标时使日历弹出(在下面的屏幕快照中由箭头标记).

I am wondering what js/jquery code what I have to use in order to make the calendar popup on hitting calendar icon at the left and the right (marked by an arrow in the screenshot below).

我尝试放置以下代码，但是以某种方式我无法在点击日历图标时弹出日历.

I tried placing the following code but somehow I am not able to popup the calendar on hitting calendar icon.

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

推荐答案

在使用Bootstrap时，我建议使用 Bootstrap Datepicker .

As you are using Bootstrap, I recommend using Bootstrap Datepicker.

在您的站点中，在日期输入字段中输入id并按如下所示进行初始化.

In your site, give an id to the date input fields and initialize as below.

$(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">

这篇关于单击日历图标，如何使日历弹出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！