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

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

日期选择器是Bootstrap提供的一种这样的交互式功能，可以从下拉日历中选择日期，该日期直接反映在输入字段中，从而消除了手动输入日期的麻烦。可以根据用户要求自定义日期选择器。日历是以仅单击图标的下拉菜单形式打开还是完全集中于输入字段，这取决于用户的需求。但是，这两个选项都是打开的，可供选择。下拉日历是一个小的叠加层，一旦用户单击网页上日历之外的任何位置，它就会自动消失。日历的这种功能可以通过jQuery和JavaScript函数实现。以下是日期选择器的示例，单击该图标时将显示日历。

方法1：

• 日历图标将附加到使用input-group-prepend类输入日期的输入字段。
• 使用输入组文本类设置图标的跨度。
• 单击该图标会触发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"
            });
        }
    

  

输出

方法2：第二种方法相对容易一些。它用更少的代码行完成了目标。此代码主要使用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 :
        
    

输出