时间戳

首页 > 解决方案 > Bootstrap Datetimepicker 不适用于 asp.net

asp.net - Bootstrap Datetimepicker 不适用于 asp.net

问题描述

有我的代码，但是引导程序无法正常工作。我制作了这段代码并从 Visual Studio 下载了所有包，请告诉 ma 解决方案。请帮我。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="Scripts/moment.js"></script>
    <script src="Scripts/bootstrap-datetimepicker.js"></script>
    <title></title>
</head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div style="overflow:hidden;">
        <div class="form-group">
            <div class="row">
                <div class="col-md-8">
                    <div id="datetimepicker12"></div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker12').datetimepicker({
                    inline: true,
                    sideBySide: true
                });
            });
        </script>
    </div>
        </div>
    </form>
</body>
</html>

标签： asp.netbootstrap-4

解决方案

您css和js文件的顺序在这里非常重要，您的date time picker.

我已经稍微改进了您的代码，看看这是否适合您！

<!--- Date Time Picker Css --->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">

<!--- Bootstrap CSS --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!--- Jquery --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>



<!--- Your Form --->
<form id="form1" runat="server">
  <div class="form-group" style="margin: 50px;">
    <div class="row">
      
      <div class="col-md-8">
        <label class="control-label">MY Date Time Picker</label>
        
        <!--- Included datetime picker --->
        <div class='input-group date' id='datetimepicker12'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
        
      </div>
    </div>
  </div>
</form>

<!-- your own javascript -->
<script type="text/javascript">
  $(function() {
    $('#datetimepicker12').datetimepicker();
  });
</script>



<!-- CDN JS Deliver --> 
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>

<!-- Bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- CDN js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js">
</script>

推荐阅读