Question

我想让我的DateTimePicker格式为yyyy-mm-dd，因为它是我在数据库中插入的格式。

这是标记：

<div class="col-sm-6">
   <div class="input-group date" data-provide="datepicker">
     <input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
       <div class="input-group-addon">
         <span class="glyphicon glyphicon-th"></span>
       </div>
    </div>
</div>

以下是我编写的用于更改格式的代码，但它不起作用：

$(document).ready(function() {    
    $(function () {        
        $('.datepicker').datetimepicker({
            format: 'YYYY-MM-DD'
        });
    });    
});

Answer 1

  $('.datetimepicker').datetimepicker({
    timepicker: false,
    format: 'Y-m-d',
    closeOnDateSelect: true,
    scrollInput: false
  });

Answer 2

在您的jQuery代码中，它使用了一个datepicker类，但您没有正确使用它。你应该像下面那样使用它

<div class="col-sm-6">
    <div class="input-group date datepicker">
        <input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
        <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
        </div>
    </div>
</div>

无论如何，您不必在数据库中使用相同的格式，因为您可以在以后使用正确的数据库格式更新后端代码上的日期。

Answer 3

问题在于您的jQuery选择器，您应该使用$('[data-provide="datepicker"]')代替$('.datepicker')或在您的输入中添加datepicker类。

这是一个工作示例：

$('[data-provide="datepicker"]').datetimepicker({
  format: 'YYYY-MM-DD'
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="col-sm-6">
   <div class="input-group date" data-provide="datepicker">
     <input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
       <div class="input-group-addon">
         <span class="glyphicon glyphicon-th"></span>
       </div>
    </div>
</div>

无法更改Bootstrap DateTimePicker的格式

3 个答案: