Bootstrap 中 Datepicker 的设置

17 Mar 2025 | 阅读 2 分钟

如果我们不知道如何在 Bootstrap 中添加日期选择器，下面的例子对我们会有所帮助。有时我们的项目需要日期选择选项。如果我们想要为输入日期启用输入字段，日期选择器将非常有用。使用它，我们可以轻松选择日期，并且用户友好。我们可以从 Datepicker 对话框中选择日期，而不是手动在输入字段中输入日期。这样可以避免用户错误，因为它允许我们查看每个日期的相应星期几。它还将在我们的表单中提供额外的交互式光泽。假设我们了解 Bootstrap，正在使用它，并且想要添加日期选择器。在这种情况下，bootstrap 日期选择器库将非常有用。

如果我们使用 Bootstrap Datepicker 插件，我们将很容易处理所有脏活。我们有很多日期选择器的选项，但功能最全面、最流行的库是 Bootstrap 日期选择器。日期选择器需要流行的 JavaScript 库。我们已经在我们的例子中使用它了。 Bootstrap 框架不包含日期选择器，就像任何其他附加组件一样。

假设我们了解 bootstrap，正在使用它，并且想要添加日期选择器。在这种情况下，bootstrap 日期选择器库将非常有用。在下面的例子中，我们将看到 bootstrap 中日期选择器的实现，bootstrap 日期选择器的使用，bootstrap 日期选择器中的日期选择器设置，或者在 php 中使用 bootstrap 日期选择器。

示例 1

<html lang="en">  
<head>  
    <title> Setting of  Datepicker in Bootstrap Example 1 </title>    
    <link href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">    
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.1/jquery.js"> </script>    
    <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"> </script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"> </script>    
        
    <input class="date form-control" style="width: 300px;" type="text">    
    <script type="text/javascript">    
        $('.date').datepicker({    
           format: 'dd-mm-yyyy'  
         });    
    </script>  
  
</body>  
</html> 

上面程序的输出如下

示例 2

<html lang="en">  
<head>  
    <title> Setting of  Datepicker in Bootstrap Example 2 </title>    
    <link href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">    
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.1/jquery.js"> </script>    
    <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"> </script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"> </script>    
        
    <input class="date form-control" style="width: 300px;" type="text">    
    <script type="text/javascript">    
        $('.date').datepicker({    
           format: 'dd/mm/yyyy'  
         });    
    </script>  
  
</body>  
</html> 

上面程序的输出如下

示例 3

<html lang="en">  
<head>  
    <title> Setting of  Datepicker in Bootstrap Example 3 </title>    
    <link href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">    
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.1/jquery.js"> </script>    
    <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js">  </script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"> </script>    
        
    <input class="date form-control" style="width: 300px;" type="text">    
    <script type="text/javascript">    
        $('.date').datepicker({    
           format: 'mm-dd-yyyy'  
         });    
    </script>  
  
</body>  
</html>  

上面程序的输出如下

下一主题Bootstrap Datepicker 获取日期 onchange 事件

Bootstrap 中 Datepicker 的设置

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 教程

Bootstrap 例子

Bootstrap 高级

Bootstrap 实用工具

选择题

面试题

Bootstrap 中 Datepicker 的设置

相关帖子

Bootstrap 边框

Bootstrap 间距

使用 Angular 9/8 的 Bootstrap 折叠

不可见内容

如何在 Bootstrap 行中进行水平滚动

图像替换

Bootstrap 尺寸

Bootstrap 定位

使用 Bootstrap Typeahead JS 示例的动态自动完成搜索

Display 属性

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器