如何使用 JavaScript 仅在图标上单击显示日历？

Bootstrap 是用于开发交互式用户界面的广泛首选的 CSS 框架之一。 Bootstrap 捆绑了大量组件、插件和实用程序，使网页设计变得更加容易。

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

方法一：

• 日历图标被附加到使用 input-group-prepend 类输入日期的输入字段。
• 图标的跨度是使用 input-group-text 类设置的。
• 单击图标时会触发setDatepicker()函数，而 setDatepicker()函数接受当前事件作为参数。
• 接下来，使用 JavaScript 的 parent() 和 attr() 方法获取图标的根(父)的类名。当接下来获得类名时，类名中的空格被替换为“.”。
• 这一步很重要，因为在 jQuery datepicker ()函数的类选择器中需要类名。 datepicker()函数指定日期格式、日历方向、关闭和自动对焦行为。显示日历后，用户可以选择日期并反映在输入字段中。

html

  

    
    
    
  
    
    
  
    
    
  
    
    
  
    
    
  
    
    
  
    
    
    

  

  
    
    
        
            
                Date of Birth:
            
  
            
            
                
                
                    
                        
                        
                    
                
  
                
                
            
        
    
  
    
    
        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"
            });
        }
    

  

输出

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

• 日期选择器按钮 Image 也与上一个示例中的图标具有相同的用途。 buttonImageOnly 不仅向按钮添加图像，还向文档添加图像。
• 当我们点击图像时，日历就会显示出来，用户可以选择日期，该日期会立即反映在输入字段中。此处的按钮图像已预先下载并存储在本地设备中。在日历外单击时，日历将关闭。

html

  

    
    
  
    
    
  
    
    
  
    
    
        $(document).ready(function () {
            $("#txtdate").datepicker({
                showOn: "button",
  
                // Button image stored on local device
                buttonImage: "./icons8-calendar-48.png",    
                buttonImageOnly: true
            });
        });
    
  
    
    
        .ui-datepicker-trigger { 
            max-height: 28px;
        }
    

  

    
        Date :
        
    

输出