如何使用 bootstrap 获取日期选择器？

Question

我想要日期选择器。我不要时间。我收到一条错误消息，例如

我的html编码是；

<div class="col-md-2 padding-size">
    <div class="form-group">
         <div class="input-group date" id="datetimepicker1">
              <input type='text' class="form-control" placeholder="Issue Date"/>
                    <span class="input-group-addon">
                          <span class="glyphicon glyphicon-calendar"></span>
                    </span>
          </div>
     </div>
 </div>

脚本代码

<link rel="stylesheet" href="css\bootstrap.css">
    <link rel="stylesheet" href="css\bootstrap.min.css">
    <link rel="stylesheet" href="css\style.css">
    <link rel="stylesheet" href="css\font-awesome.min.css">
    <link rel="stylesheet" href="css\bootstrap-social.css">
    <link rel="stylesheet" href="css/style.css">

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




    <script src="js\jquery.min.js"></script>
    <script src="js\bootstrap.min.js"></script>
    <script src="js\jquery-3.1.0.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">

     <script type="text/javascript">
     $(function () 
    {

         $('#datetimepicker1').datepicker(
         {

         });
    });
 </script>

当我点击那个文本框或日历插件时，我无法获得那个日历。谢谢

Answer 1

您需要找零钱。删除 div 的 id 并将该 id 放入带有 type="text" 的输入标签中，如下所示

  <div class="col-md-2 padding-size">
    <div class="form-group">
         <div class="input-group date" >
              <input type='text' class="form-control" placeholder="Issue Date" id="datetimepicker1"/>
                    <span class="input-group-addon">
                          <span class="glyphicon glyphicon-calendar"></span>
                    </span>
          </div>
     </div>
 </div>

然后使用相同的 id 添加以下脚本

      <script type="text/javascript">
     $(function () 
    {

         $('#datetimepicker1').datepicker(
         {

         });
    });
 </script>

Answer 2

你不能使用.datepicker()，它必须是.datetimepicker()。如果你不想要时间，只需设置format参数：

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' });
    });
</script>

参考文章 - Bootstrap datetimepicker options

Answer 3

使用下面的代码：

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link href="http://cdn.jsdelivr.net/bootstrap.datepicker/0.1/css/datepicker.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/bootstrap.datepicker/0.1/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
    $(function(){
    $("#datepicker").datepicker(
                {viewMode: 'month',
                 format: 'dd-mm-yyyy'
            });
    });
</script>
</head>
<body>
<div class="input-append date" id="datepicker" data-date="02-2012">
 <input  type="text" readonly="readonly" name="date" >    
 <span class="add-on"><i class="icon-th"></i></span>      
</div>  
</body>
</html>

通过更改格式参数，根据需要更改日期格式。看看这个 http://jsfiddle.net/Kz2sW/

如何使用 bootstrap 获取日期选择器？

How to get date picker using bootstrap?

asp.net

jquery-ui-datepicker

aspxgridview