Question

我已经使用Bootstrap开发了日期选择器

<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>

而jQuery是

$(function() {
          $('#datetimepicker1').datetimepicker({minDate:new Date()});
        });

一切正常，但最后未显示选定的日期和时间。这有什么问题

Answer 1

以下是可以帮助您的示例

您可以通过here

查看有关datetimepicker的更多信息

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>datepicker</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">
</head>
<body>

    <div>Date In TextBox: <input class="form-control" type="text" id="actualDate"></div>
    <br />
    <div class="form-group">
        <label>Select Date</label>
        <div class='input-group'>
            <input type='text' class="form-control" id='datetimepicker1' />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>


    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

    <script>
        $(function () {
            jQuery('#datetimepicker1').datetimepicker({
                timepicker: false,
                onChangeDateTime: function (dp, $input) {
                    $('#actualDate').val($input.val());
                }
            });
        });
    </script>



</body>
</html>

Answer 2

我在Bootstrap 4.1.2中遇到了同样的问题。在3中运行良好。最终单独使用HTML5日期和时间，并且运行良好，因为我不想回滚到Bootstrap 3。

Answer 3

 you can use jquery library easily get the date picker  your needs
 see below example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>datepicker</title>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
   $( "#datepicker" ).datepicker();
   } );
  </script>
  </head>
  <body>

  <div>Date: <input type="text" id="datepicker"></div>


</body>
</html>

日期选择器未显示

3 个答案: