📌  相关文章
📜  如何使用 Bootstrap Datepicker 获取更改事件的日期?

📅  最后修改于: 2022-05-13 01:56:01.903000             🧑  作者: Mango

如何使用 Bootstrap Datepicker 获取更改事件的日期?

在本文中,我们将学习如何使用 Bootstrap Datepicker 来获取事件更改的日期。 Bootstrap Datepicker 是一个开源存储库,它提供了一个 API 来将日期时间选择器集成到网站的前端。应具备 HTML、CSS、jQuery 和 Bootstrap 的基本知识。

方法:

  • 创建一个 HTML 文件。
  • 请按照以下代码格式,按照此顺序将一些外部 CSS 链接到 head 标签内的代码。
  • 首先在文件中包含引导 CSS。将引导日期选择器 CSS 添加到您的文件中。最后,您需要将字体 Awesome CSS 添加到您的 HTML 文件中。
  • 按照以下代码格式,按照以下顺序将一些外部 JavaScript 文件附加到 head 标签内的代码中。
  • 首先在您的文件中包含 jquery JavaScript。第二步是将引导 JavaScript 添加到您的文件中。最后,您需要将引导程序 datetimepicker JavaScript 添加到您的 HTML 文件中。
  • 根据需要将类名添加为“ datepicker ”和其他引导类到输入字段
  • 您可以使用来自任何资源(如 font awesome)或任何其他平台的任何图标,通过将图标与输入字段对齐来美化您的输入字段。
  • 然后有必要将日期选择器初始化为输入字段,以便当用户单击该输入字段时,将出现弹出日历,然后他们可以从该提示中选择日期。

示例:在此示例中,我们采用类名为“datepicker”的输入字段,并使用 datepicker() 在此输入上初始化 datepicker。

当用户单击输入字段时会出现一个日历,并且可以从日历中选择一个日期。一旦用户从日历中选择了一个日期,它就会自动写入输入字段。我们为该输入字段添加一个事件监听器 onchange。当在该输入字段中进行选择时,会自动调用 onchange() 回调方法以使用 jQuery val() 方法获取输入字段的值。

HTML


  

    
    
    
    
    
    
  
    

  

    

        GeeksforGeeks     

    
        
                         
                                                                  
        
    
    
        

No Date is Picked

    
          


输出: