📜  如何使用多模式jtsage-datebox插件?

📅  最后修改于: 2021-08-30 11:55:04             🧑  作者: Mango

在本文中,我们将学习为 Bootstrap (3&4)、jQueryMobile 和 Bulma 使用多模式日期和时间选择器插件。 jQuery datebox插件完全基于 JavaScript、HTML 和 CSS 技术。

该插件的一些主要功能如下

  • 它可以限制任何条件,如日期、时间和持续时间。
  • 许多回调和触发器可用于创建、打开、关闭、更改、销毁事件。
  • 该工具提供了可滑动的列或周等功能。

请从链接下载所需的预编译文件并将其保存在您的工作文件夹中以供实施。

HTML 代码的头部部分:以下 HTML 代码片段包含头部部分,其中包含执行以下所有示例所需的所有常见预编译文件。

注意:请在您的代码中包含以下所有库链接以及正确的文件路径。

html

        
    
 
        
 
        
    
        
    
    
    
     
    
    
    
    
    
     
    
     
    
     
    
    
    
    
    
     
    
     
    
     
    
         
    
        
    
    
    
    
    
    
    
        
    
    
    
 
    


html



 
  
     
  
 
  


    
                
                
                                  
        
    


html



 
 
 
 
    
     


   

Datebox in Bulma

    
        
          
            
                          
            
              
                  
                                    
               
            
        
        
        


html



       
    
    
        
    
    
     


    
        
            

DateBox

        
        
                                      
                                      
            
              
                                      
              
                                      
                    
          
            

jQuery Mobile datebox Information

        
    
 


示例 1:以下日期和时间选择器演示了 Bootstrap 4。不要忘记在 Bootstrap 代码中包含 Bootstrap(3 & 4) 预编译文件,如下所示。

html




 
  
     
  
 
  


    
                
                
                                  
        
    

输出:

以下是控制台中显示的输出,用于演示回调函数的工作。

示例 2:以下代码演示了 Bulma。不要忘记在您的 Bulma 代码中包含 Bulma预编译文件,如下所示。

html




 
 
 
 
    
     


   

Datebox in Bulma

    
        
          
            
                          
            
              
                  
                                    
               
            
        
        
        

输出:以下是开发者选择的模式为“datebox”时的输出

以下是开发者选择的模式为“slidebox”时的输出。

注意:开发者可以根据应用的需求尝试不同的模式,实现各种回调函数和其他 JavaScript 选项。演示中只显示了几个选项。

示例 3:以下代码演示了 jQuery 移动代码的日期和时间选择器。不要忘记在您的移动设计代码中包含 jQuery 移动预编译文件,如下所示。可以根据需要实现与第一个示例中所示相同的回调函数。

html




       
    
    
        
    
    
     


    
        
            

DateBox

        
        
                                      
                                      
            
              
                                      
              
                                      
                    
          
            

jQuery Mobile datebox Information

        
    
 

输出: