JavaScript 如何仅在点击图标时显示日历

Bootstrap 是广泛使用的CSS框架之一，用于开发交互式用户界面。Bootstrap捆绑了许多组件、插件和实用工具，使网页设计变得更容易。

date-picker 是Bootstrap提供的一种交互式功能，可从下拉日期选择日历中选择日期，直接反映在输入字段中，无需手动输入日期。日期选择器可根据用户需求进行自定义。日历是以下拉形式打开还是完全专注于输入字段，取决于用户的需求。但是，这两种选项都可以供用户选择。下拉日历是以一个小的覆盖层的形式可用，并在用户在网页上日历之外的任何地方点击后自动消失。通过jQuery和JavaScript函数实现了日历的这种功能。以下是在单击图标时显示日历的Date-picker示例。

方法1：

使用input-group-prepend类将日历图标附加到要输入日期的输入字段上。
使用input-group-text类设置图标的span。
当单击图标时，触发 setDatepicker() 函数，setDatepicker()函数接受当前事件作为参数。
然后，使用JavaScript的parent()和attr()方法获取图标的根（父级）的类名。由于获取了类名，接下来用‘.’替换类名中的空格。
这一步很重要，因为在jQuery的 datepicker ()函数中需要使用类选择器来指定类名。datepicker()函数指定了日期的格式、日历的方向、关闭和自动聚焦的行为。一旦显示日历，用户可以选择日期，而该日期将反映在输入字段中。

示例： 此示例展示了上述解释的方法的使用

<!DOCTYPE html> 
<html> 
<head> 
    <!-- Importing jquery cdn -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
  
    <script src= 
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity= 
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"> 
    </script> 
  
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity= 
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"> 
    </script> 
  
    <!-- Importing icon cdn -->
    <link rel="stylesheet" href= 
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
  
    <!-- Importing core bootstrap cdn -->
    <link rel="stylesheet" href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity= 
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous"> 
  
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity= 
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"> 
    </script> 
  
    <!-- Importing datepicker cdn -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"> 
    </script> 
</head> 
  
<body> 
    <!-- Container class contains the date field -->
    <div class="container" style="max-width: 250px;"> 
        <div class="form-group m-1"> 
            <label class="font-weight-bold" for="dob"> 
                Date of Birth: 
            </label> 
  
            <!-- Input field along with  
                calendar icon and -->
            <div class="input-group date"> 
                <!-- Sets the calendar icon -->
                <span class="input-group-prepend"> 
                    <span class="input-group-text"> 
                        <i class="fa fa-calendar" 
                            onclick="setDatepicker(this)"> 
                        </i> 
                    </span> 
                </span> 
  
                <!-- Accepts the input from calendar -->
                <input class="form-control" type="text" 
                    name="dob" id="dob" value=""> 
            </div> 
        </div> 
    </div> 
  
    <!-- JavaScript to control the actions 
         of the date picker -->
    <script type="text/javascript"> 
        function setDatepicker(_this) { 
  
            /* Get the parent class name so we  
                can show date picker */ 
            let className =  $(_this).parent() .parent().parent().attr('class'); // Remove space and add '.' let removeSpace = className.replace(' ', '.'); // jQuery class selector$ ("." + removeSpace).datepicker({ 
                format: "dd/mm/yyyy", 
  
                // Positioning where the calendar is placed 
                orientation: "bottom auto", 
                // Calendar closes when cursor is  
                // clicked outside the calendar 
                autoclose: true, 
                showOnFocus: "false" 
            }); 
        } 
    </script> 
</body> 
</html>

输出
JavaScript 如何仅在点击图标时显示日历

方法2： 第二种方法相对较简单。它用较少的代码行完成了目标。这段代码主要使用了jQuery。

日期选择按钮图像也起到了与前一个示例中的图标相同的作用。buttonImageOnly不仅为按钮添加了图像，还在文档中添加了图像。
当我们点击图像时，日历显示出来，用户可以选择日期，而选择的日期会立即反映在输入框中。这个按钮图像是预先下载并存储在本地设备中的。当在日历外点击时，日历关闭。

示例： 这个示例展示了上面所解释的方法的使用。

<html> 
<head> 
    <!-- Importing jquery cdn -->
    <link href= 
"http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" 
        rel="Stylesheet"
        type="text/css" /> 
  
    <script type="text/javascript" 
        src="http://code.jquery.com/jquery-1.7.2.min.js"> 
    </script> 
  
    <script type="text/javascript" 
        src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"> 
    </script> 
  
    <!-- JavaScript function to display the calendar -->
    <script language="javascript"> 
         $(document).ready(function () {$ ("#txtdate").datepicker({ 
                showOn: "button", 
  
                // Button image stored on local device 
                buttonImage: "./icons8-calendar-48.png",     
                buttonImageOnly: true 
            }); 
        }); 
    </script> 
  
    <!-- Customizing the datepicker button image -->
    <style type="text/css"> 
        .ui-datepicker-trigger {  
            max-height: 28px; 
        } 
    </style> 
</head> 
  
<body> 
    <form class="form-group"> 
        Date : 
        <input id="txtdate" type="text" 
            class="form-control"> 
    </form> 
</body> 
</html>

输出

JavaScript 如何仅在点击图标时显示日历