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

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

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

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

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

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

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

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

html

 
  
     
  
 
         
        jQuery.extend(jQuery.jtsage.datebox.prototype.options, {
            mode : "calbox",
 
            /* Display */
            displayMode : "inline",           
            lockInput: false,
 
            displayDropdownPosition : "bottomRight",           
            useImmediate     : true,
            useFocus         : true,
            useButton : true,
 
            /* Callbacks */
             beforeOpenCallbackArgs : [ "helloback call", "bye"],
             beforeOpenCallback     : function(a, b)
                                            {
                                            console.log(a);
                                            console.log(b);
                                            return true;
                                            },
 
            closeCallbackArgs : [ "hi close", "bye close"],
            closeCallback     : function(a, b)
                                          {
                                          console.log(a);
                                          console.log(b);
                                          },
 
            calDateList     : [
                                          ["1980-04-25", "JT's Date of Birth"],
                                          ["1809-02-12", "Lincoln's Birthday"] ],
            calShowDateList : true,
            slideDateList     : [ ["1980-04-25", "JT's Date of Birth"],
                                           ["1809-02-12", "Lincoln's Birthday"] ],
             slideShowDateList : true,
 
             minHour : 9,
             maxHour : 5,
 
             minTime : "9:00",
             maxTime : "17:00",
 
            slideUsePickers       : true,
            slideYearPickMax      : 2020,
            slideYearPickMin      : 1950,
             
            minuteStep   : 15,
 
            /* Control Buttons */
             closeTodayButton    : true,       
            useCancelButton     : true,
            useClearButton      : true,           
            useTodayButton      : true,       
            useCollapsedBut     : true,           
        });
    


           
               
        
            
                        DateBox
            
        
        
    

输出：

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

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

html

 
 
 
 
        jQuery.extend(jQuery.jtsage.datebox.prototype.options,
                     {
            /* Modes can be changed as per user*/            
            mode : "slidebox",
 
            /* Display */
            displayMode : "dropdown",
             
            /* Linked fields */
            linkedField : false,   
            slideShowDateList : true,
             
            calDateList     : [ ["1980-04-25", "JT's Date of Birth"],
                                          ["1809-02-12", "Lincoln's Birthday"] ],
            calShowDateList : true,
 
            slideDateList     : [ ["1980-04-25", "JT's Date of Birth"],
                                         ["1809-02-12", "Lincoln's Birthday"] ],
            slideShowDateList : true,
             
            calUsePickers       : true,
            slideUsePickers       : true,
 
            calUsePickers       : true,           
            slideUsePickers       : true,           
            useCancelButton     : true,           
            useTodayButton      : true,           
            useCollapsedBut     : true,
             
            useCancelButton     : true,
            useClearButton      : true,           
            useTodayButton      : true,           
            useCollapsedBut     : true,
        });
    
    
     body{
     width:550px;
     padding:10px,10px;
     }
     h3{
      margin:0 auto;
      padding:20px,20px;
     }
    
     


   Datebox in Bulma 
    
        
 
        
            
             DateBox
            
            
              
                  
                 
                  
               
            
        
           
    

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

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

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

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

html

       
    
    
    
        
    
    
        jQuery.extend(jQuery.jtsage.datebox.prototype.options, {
            /* Mode */       
            mode : "datebox",
 
            /* Display */
            displayMode : "dropdown",
            displayDropdownPosition : "bottomMiddle",
             
            linkedField : false,
 
            calDateList     : [ ["1980-04-25", "JT's Date of Birth"],
                              ["1809-02-12", "Lincoln's Birthday"] ],
            calShowDateList : true,
 
            slideDateList     : [ ["1980-04-25", "JT's Date of Birth"],
                             ["1809-02-12", "Lincoln's Birthday"] ],
            slideShowDateList : true,
 
            calUsePickers       : true,
            slideUsePickers       : true,           
            useCancelButton     : true,
            useClearButton      : true,           
            useTodayButton      : true,           
        });
    
     


    
        
            DateBox 
        
        
                         
            
            Year Pick
            
            
            
 
            
            Year Pick
            
            
 
            
            Year Picker - Flipbox
            
                       
        
 
        
            jQuery Mobile datebox Information
        
    
 

输出：