日期选择器引导5

问题描述 投票：0回答：5

我已经从 bootstrap4 切换到 bootstrap5，并且我正在努力使用日期选择器。如果有人做过这方面的工作，请帮忙。 我也添加了日期选择器插件，但它仍然不起作用。

日期选择器图标也不起作用。

$(function() {
  $('#datetimepicker1').datetimepicker();
});
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5Oom 
    GNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <!-- Datepicker -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
    datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
  <!-- CDN JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
  </script>
  <!-- Separate Popper and Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
  <!-- datepicker -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
    datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js" integrity="sha512- 
    GDey37RZAxFkpFeJorEUwNoIbkTwsyC736KNSYucu1WJWFK9qTdzYub8ATxktr6Dwke7nbFai
    oypzbDOQykoRg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <title>Date Picker</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class='col-sm-6'>
        <div class="form-group">
          <div class='input-group date' id='datetimepicker1'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

datepicker bootstrap-5
5个回答
49
投票

日期时间选择器：

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-  datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js
适用于 Bootstrap 3，不适用于 Bootstrap 5。

改用 HTML5 日期输入...

<label for="startDate">Start</label>
<input id="startDate" class="form-control" type="date" />

https://codeply.com/p/zU0EWDmIfn

3
投票

我认为这将作为 bootstrap 5 DatePicker 使用。

使用下面的cdn链接

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

使用下面的代码作为日期输入表单

<form>
        <div class="row form-group">
            <label for="date" class="col-sm-1 col-form-label">Date</label>
            <div class="col-sm-4">
                <div class="input-group date" id="datepicker">
                    <input type="text" class="form-control">
                    <span class="input-group-append">
                        <span class="input-group-text bg-white d-block">
                            <i class="fa fa-calendar"></i>
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </form>

使用以下函数调用日期输入

<script type="text/javascript">
    $(function() {
        $('#datepicker').datepicker();
    });
</script>
3
投票

bootstrap-datepicker 的一个替代品是 vanillajs-datepicker。它适用于 bootstrap 5 以及其他 css 框架。

对于 使用 bootstrap 5 进行样式设置必须引用正确的 css 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanil[email protected]/dist/css/datepicker-bs5.min.css">

并且按钮类必须在创建日期选择器时设置

const datepicker = new Datepicker(elem, {
  buttonClass: 'btn',
});

我从 Bootstrap 3 切换过来，使用 html5 日期输入会需要更多工作，因为使用了很多日期范围。这些也受支持，您只需使用 

DateRangePicker
构造函数即可。

2
投票

您还可以尝试 Bootstrap 5 的日期选择器的实现：

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 5 DatePicker</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <input id="datepicker" width="276" />
    <script>
        $('#datepicker').datepicker({
            uiLibrary: 'bootstrap5'
        });
    </script>
</body>
</html>

Codepen：https://codepen.io/atatanasov/pen/WNyxMoN

1
投票

我为

datetimepicker
准备了
bootstrap 5
。我为此使用了 datepicker 和 clockpicker 插件。如果您自己的语言不是英语，您还可以将 
.js file
中的日历内容翻译为您的语言。

您也可以在codepen上控制代码：https://codepen.io/yusufdogandev/pen/OJBNmPP

$(function () {
  $("#datepicker").datepicker();
});

$(".clockpicker").clockpicker();

$.fn.datepicker.dates["en"] = {
  days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
  daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
  daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
  months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  today: "Today",
  clear: "Clear",
  format: "mm/dd/yyyy",
  titleFormat: "MM yyyy" /* Leverages same syntax as 'format' */,
  weekStart: 0,
};
body {
  margin-top: 3em !important;
  display: flex;
  justify-content: center;
  background-color: white;
}

span i.bi.bi-clock::before {
  font-size: large;
  margin-top: 10px !important;
  margin-left: 5px !important;
}

[placeholder]:focus::-webkit-input-placeholder {
  transition: text-indent 0.5s 0.5s ease;
  text-indent: -100%;
  opacity: 1;
}

input[type="text"],
textarea {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
}

input[type="text"]:focus,
textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
}

input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid rgb(5, 5, 5);
}

input[class="form-control"],
textarea {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
}

input[class="form-control"]:focus,
textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
}

input[class="form-control"] {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid rgb(5, 5, 5);
}

span.input-group-text.bg-light.d-block {
  background-color: #fff !important;
  border: none !important;
}
.input-group-append {
  cursor: pointer;
}

i.fa.fa-calendar {
  padding: 4px;
}
.datepicker td,
th {
  text-align: center;
  padding: 8px 12px;
  font-size: 14px;
}
.datepicker {
  top: 6em !important;
  border: 1px solid black;
}
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Date-Time Picker</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.css" integrity="sha512-BB0bszal4NXOgRP9MYCyVA0NNK2k1Rhr+8klY17rj4OhwTmqdPUQibKUDeHesYtXl7Ma2+tqC6c7FzYuHhw94g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css" integrity="sha512-MT4B7BDQpIoW1D7HNPZNMhCD2G6CDXia4tjCdgqQLyq2a9uQnLPLgMNbdPY7g6di3hHjAI8NGVqhstenYrzY1Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <label for="date" class="col-1 col-form-label">Date</label>
        <div class="col">
          <div class="input-group date" id="datepicker">
            <input type="text" class="form-control" id="date" placeholder="Date Of Birth" />
            <span class="input-group-append">
              <span class="input-group-text bg-light d-block">
                <i class="fa fa-calendar"></i>
              </span>
            </span>
          </div>
        </div>
        <label for="date" class="col-1 col-form-label">Time</label>
        <div class="col">
          <div class="input-group clockpicker" data-placement="bottom" data-align="bottom" data-autoclose="true">
            <input type="text" class="form-control" placeholder="Time Of Birth" />
            <span class="input-group-addon">
              <i class="bi bi-clock"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/jquery-clockpicker.min.js" integrity="sha512-x0qixPCOQbS3xAQw8BL9qjhAh185N7JSw39hzE/ff71BXg7P1fkynTqcLYMlNmwRDtgdoYgURIvos+NJ6g0rNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.js" integrity="sha512-1QoWYDbO//G0JPa2VnQ3WrXtcgOGGCtdpt5y9riMW4NCCRBKQ4bs/XSKJAUSLIIcHmvUdKCXmQGxh37CQ8rtZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="date-picker.js"></script>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.