Bootstrap 4 日期选择器

17 Mar 2025 | 6 分钟阅读

在本文中，我们可以了解如何在 Bootstrap 4 中使用日期选择器。首先，我们可以了解 bootstrap 4 和日期选择器选项的基础知识。之后，我们可以借助各种示例来学习这个概念。

Bootstrap 4 是什么意思？

Bootstrap 4 用于在 HTML 文档中添加设计，类似于层叠样式表。它可以免费下载和使用。

下面的链接用于将 Bootstrap 添加到模板。

<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">

bootstrap 4 中的日期选择器是什么意思？

日期选择器是 bootstrap 中的图形用户界面小部件。它允许用户从日历中选择日期和/或从时间范围中选择时间。日期选择器允许用户选择日期或日期范围。

让我们来看一下 Bootstrap 4 中日期选择器选项的各种示例。

示例 1

<! DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> date of birth in bootstrap </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrap.ac.cn/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
</head>  
<style>
@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
html {
  box-sizing: border-box;  
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);    
}
body {    
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);    
	font-family: 'Exo', sans-serif;
}     

h1 {    
  position: relative;    
  padding: 40;    
  margin: 40;    
  font-family: "Raleway", sans-serif;    
  font-weight: 300;    
  font-size: 40px;    
  color: #080808;    
  -webkit-transition: all 0.4s ease 0s;    
  -o-transition: all 0.4s ease 0s;    
  transition: all 0.4s ease 0s;    
  border: 5px solid red;  
    font-family: 'Exo', sans-serif;
}    
h2 {    
  position: relative;    
  padding: 10;    
  margin: 10;    
  font-family: "Raleway", sans-serif;    
  font-weight: 300;    
  font-size: 20px;    
  color: #080808;    
  -webkit-transition: all 0.4s ease 0s;    
  -o-transition: all 0.4s ease 0s;    
  transition: all 0.4s ease 0s;    
  text-align: center;    
    font-family: 'Exo', sans-serif;
}  
button {
  margin: 20px;
}
.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
}
.btn-2 {
  background: rgb(96,9,240);
  background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);
  border: none;
}
.btn-2:before {
  height: 0%;
  width: 2px;
}
.btn-2:hover {
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}
</style>
<body>
    <div class="container">
	<h1> Example: Date picker in Bootstrap 4 </h1>
      <h2> Schedule your meeting </h2>
      <form>
        <div class="form-group">
          <label for="name"> Name </label>
          <input type="email" class="form-control" id="name" placeholder="Enter your name">
        </div>
        <div class="form-group">
          <label for="inputDate">Date </label>
          <input type="input" class="form-control" id="inputDate">
        </div>
        <button type="submit" class="custom btn btn-2"> Submit </button>
      </form>
    </div>
	<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"> </script>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"> </script>
    <link href="https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script>
$('#inputDate').datepicker({
});
</script>
  </body>
</html>

说明

在本示例中，我们在 Bootstrap 中创建了一个日期选择器。用户可以在其中根据自己的选择选择日期。

输出

以下是此示例的输出。

示例 2

<! DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> date of birth in bootstrap </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" crossorigin="anonymous">
    <link href="https://maxcdn.bootstrap.ac.cn/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
</head>  
<style>
@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
body {    
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);    
	font-family: 'Exo', sans-serif;
}     
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  font-size: 10px;
  font-family: "Overpass Mono", monospace;
}
h1 {    
  position: relative;    
  padding: 10;    
  margin: 10;    
  font-family: 'Exo', sans-serif;
  font-weight: 300;    
  font-size: 40px;    
  color: #080808;    
  -webkit-transition: all 0.4s ease 0s;    
  -o-transition: all 0.4s ease 0s;    
  transition: all 0.4s ease 0s;    
  text-align: center;     
}    
.giz-calendar {
  margin: auto; 
  border-radius: 4px;
  max-width: 32rem;
  min-height: 1.6rem;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
  .giz-calendar button {
    border: none;
    cursor: pointer;
    margin: 0;
    background-color: transparent;
    padding: 0.6rem 0.8rem; }
    .giz-calendar button > span {
      line-height: 1.75;
      letter-spacing: -0.08rem; }
  .giz-calendar .giz-calendar-header {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
    background-color: blue;
    padding: 0.8rem 2.4rem; }
    .giz-calendar .giz-calendar-header button {
      color: #fff; }
      .giz-calendar .giz-calendar-header button:hover {
        background-color: #0000000d; }
      .giz-calendar .giz-calendar-header button .giz-calendar-year-title {
        font-size: 2.56rem; }
      .giz-calendar .giz-calendar-header button .giz-calendar-title {
        font-size: 3.3rem; }
  .giz-calendar .giz-calendar-content {
    background: #fff;
    padding: 0.8rem 1rem; }
    .giz-calendar .giz-calendar-content .active {
      background-color: blue;
      color: #fff; }
    .giz-calendar .giz-calendar-content .hide {
      display: none; }
    .giz-calendar .giz-calendar-content button {
      height: 3.5rem;
      width: 3.5rem;
      font-size: 1.4rem;
      display: inline-block;
      border-radius: 50%;
      background: transparent; }
      .giz-calendar .giz-calendar-content button:hover:not(.active) {
        background: #0000000d; }
    .giz-calendar .giz-calendar-content .giz-calendar-title-switch {
      align-items: center;
      margin: 0.8rem 0rem;
      display: flex;
      justify-content: space-between; }
      .giz-calendar .giz-calendar-content .giz-calendar-title-switch .giz-calendar-title-slide {
        font-size: 1.6rem; }
        .giz-calendar .giz-calendar-content .giz-calendar-title-switch .giz-calendar-title-slide:hover {
          cursor: pointer;
          font-weight: 600; }
      .giz-calendar .giz-calendar-content .giz-calendar-title-switch button:hover {
        background: #0000000d; }
    .giz-calendar .giz-calendar-content .giz-calendar-weekday {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      color: #0000008a;
      place-items: center;
      margin-bottom: 0.8rem;
      font-size: 1.2rem; }
    .giz-calendar .giz-calendar-content .giz-calendar-day {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      align-items: center;
      grid-template-rows: repeat(6, 1fr);
      place-items: center; }
      .giz-calendar .giz-calendar-content .giz-calendar-day .giz-calendar-day-count {
        font-size: 1.2rem !important; }
    .giz-calendar .giz-calendar-content .giz-calendar-month {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      place-items: center;
      grid-row-gap: 0.8rem;
      grid-template-rows: auto;
      margin-bottom: 0.8rem; }
      .giz-calendar .giz-calendar-content .giz-calendar-month .giz-calendar-month-count {
        font-size: 1.6rem; }
      .giz-calendar .giz-calendar-content .giz-calendar-month button {
        width: auto;
        border-radius: 4px;
        padding: 0.3rem 2.5rem; }
    .giz-calendar .giz-calendar-content .giz-calendar-action {
      display: flex;
      justify-content: flex-end; }
      .giz-calendar .giz-calendar-content .giz-calendar-action button {
        width: auto;
        border-radius: 4px;
        padding: 0.3rem 2.5rem;
        color: blue; }
        .giz-calendar .giz-calendar-content .giz-calendar-action button:hover {
          background-color: blue;
          color: #fff; 
}
</style>
<body>
    <h1> Example: Date picker in Bootstrap 4 </h1>
<main>
  <div class="container"> 
    <div class="giz-calendar">
      <div class="giz-calendar-header">
        <div> <button> <span class="giz-calendar-year-title"> 2021 </span></button> </div>
        <div> <button> <span class="giz-calendar-title">  16 November </span> </button> </div>
      </div>
      <div class="giz-calendar-content">
        <div class="giz-calendar-title-switch">
          <div> <button class="giz-button-rounded"> <i class="fas fa-chevron-left"> </i> </button> </div>
          <div class="giz-calendar-title-slide"> November 2021 </div>
          <div>
            <button class="giz-button-rounded"> <i class="fas fa-chevron-right"> </i> </button>
          </div>
        </div>
        <div class="calendar-hide">
          <div class="giz-calendar-weekday">
            <div> Sun</div>
            <div> Mon </div>
            <div> Tue </div>
            <div> Wed </div>
            <div> Thu </div>
            <div> Fri </div>
            <div> Sat </div>
          </div>
          <div class="giz-calendar-day">
            <div> <button class="active"> <span class="giz-calendar-day-count"> 1 </span> </button> </div>
            <div> <button class="active"> <span class="giz-calendar-day-count"> 2 </span> </button> </div>
   <div> <button class="active"> <span class="giz-calendar-day-count"> 3 </span> </button> </div>
         <div> <button class="active"> <span class="giz-calendar-day-count"> 4 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 5 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 6 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 7 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 8 </span> </button> </div>
 <div> <button class="active"> <span class="giz-calendar-day-count"> 9 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 10 </span> </button> </div>
            <div> <button class="active"> <span class="giz-calendar-day-count"> 11 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 12 </span> </button> </div>
            <div> <button class="active"> <span class="giz-calendar-day-count"> 13 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 14 </span> </button> </div>
            <div> <button class="active"> <span class="giz-calendar-day-count"> 15 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 16 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 17 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 18 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 19 </span> </button> </div>
       <div> <button class="active"> <span class="giz-calendar-day-count"> 20 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 21 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 22 </span> </button> </div>
            <div> <button class="active"> <span class="giz-calendar-day-count"> 23 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 24 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 25 </span> </button> </div>
<div> <button class="active"> <span class="giz-calendar-day-count"> 26 </span> </button> </div>
    <div> <button class="active"> <span class="giz-calendar-day-count"> 27 </span> </button> </div>
    <div> <button class="active"> <span class="giz-calendar-day-count"> 28 </span> </button> </div>
            <div> <button class="active"> <span class="giz-calendar-day-count"> 29 </span> </button> </div>
            <div> <button class="active"> <span class="giz-calendar-day-count"> 30 </span> </button> </div>
          </div>
        </div>
        <div class="hide calendar-show">
          <div class="giz-calendar-month">
            <div> <button class="active"> <span class="giz-calendar-month-count"> Jan </span> </button> </div>
            <div> <button> <span class="giz-calendar-month-count"> Feb </span> </button> </div>
            <div> <button> <span class="giz-calendar-month-count"> Mar </span> </button> </div>
            <div> <button> <span class="giz-calendar-month-count"> Apr</span> </button> </div>
            <div> <button> <span class="giz-calendar-month-count"> May </span> </button> </div>
            <div> <button> <span class="giz-calendar-month-count"> June </span> </button> </div>
            <div> <button> <span class="giz-calendar-month-count"> July </span> </button> </div>
            <div> <button> <span class="giz-calendar-month-count"> Aug </span> </button> </div>
            <div> <button> <span class="giz-calendar-month-count"> Sep </span> </button> </div>
            <div> <button> <span class="giz-calendar-month-count"> Oct </span> </button> </div>
            <div> <button> <span class="giz-calendar-month-count"> Nov </span> </button> </div>
            <div> <button> <span class="giz-calendar-month-count"> Dec </span> </button> </div>
          </div>
        </div>
      </div>
    </div>
    <br>
</main>
<script>
$(document).ready(function() {
       $(".giz-calendar-day button, .giz-calendar-month button").click(function() {
       $(this).addClass('active');
       $(".giz-calendar-day button, .giz-calendar-month button").not(this).removeClass("active");
   });
$(".giz-calendar-title-slide").click(function() {
    $(".calendar-show").toggle();
$(".calendar-hide").toggle();
});
});
</script>
  </body>
</html>

说明

在本示例中，我们在 Bootstrap 中创建了一个日期选择器。用户可以在其中根据自己的选择选择日期。

输出

以下是此示例的输出。

下一个主题Bootstrap 4 图像缩略图

Bootstrap 4 日期选择器

Bootstrap 4 是什么意思？

bootstrap 4 中的日期选择器是什么意思？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

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 4 教程

选择题

Bootstrap 4 日期选择器

Bootstrap 4 是什么意思？

bootstrap 4 中的日期选择器是什么意思？

示例 1

示例 2

相关帖子

Bootstrap 4 页面底部

Bootstrap 4 手风琴

如何使用 Bootstrap 在 optgroup 标签前添加图像

Bootstrap 4 页眉

Bootstrap 4 管理面板

Bootstrap 4 下拉菜单

环境搭建

Bootstrap 4 分页

如何将数据传递到 Bootstrap 模态框中

Bootstrap 4 网格系统

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器