Bootstrap DateTimePicker (eonasdan) 格式化日期为 DD/MMM/YYYY

Question

关于下面的 bootstrap 插件，我遇到了很多问题。

http://eonasdan.github.io/bootstrap-datetimepicker/

我有一个 "15/05/1992" 的初始值，它的初始格式是 "DD/MM/YYYY"，现在使用这个插件，它也使用时刻作为它的基础。我想将其格式化为“15/May/1992”，但每次我使用 'DD/MMM/YYYY' 对其进行格式化时，它都无法正常工作。它显示为 "15/Jan/1992"，这是错误的，因为月份应该是 May。

我还测试了另一个日期，如 "19/02/2198"，应用上面相同的步骤，它显示为 "19/Jan/2002"，这是非常非常错误的。我不知道它是否与 moments.js 有关，但我现在真的坚持这个。

任何帮助将不胜感激！谢谢！

HTML

<div class="row">
    <div class="col-md-12">
         <h6>datetimepicker1</h6>
        <div class="form-group">
            <div class="input-group date" id="datetimepicker1">
                <input type="text" class="form-control" value="15/05/1992" />   <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
            </div>
        </div>
    </div>
</div>

脚本。

$('#datetimepicker1').datetimepicker({format : "DD/MMM/YYYY"});

查看示例 http://jsfiddle.net/byx1couq/2/

Answer 1

不要尝试直接设置 value 属性。这样做会一直使用浏览器的语言环境格式，所以你无法真正控制它。

而是使用日期选择器控件 (see docs here) 中的 date 函数。因为它可以接受 moment 对象，所以这是对输入格式进行精细控制的最佳选择。

$('#datetimepicker1').data("DateTimePicker").date(moment("15/05/1992","DD/MM/YYYY"));

Updated fiddle here.

Answer 2

您可以使用 defaultDate 选项初始化选择器值：

$('#datetimepicker1').datetimepicker({
 format : "DD/MMM/YYYY",
    defaultDate: moment("15/05/1992","DD/MM/YYYY")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/src/js/bootstrap-datetimepicker.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

<div class="row">
    <div class="col-md-12">
        <h6>datetimepicker1</h6>
        <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-calendar glyphicon"></span>
                </span>
            </div>
        </div>
    </div>
</div>

避免在 HTML 或使用 jQuery val() 中设置输入值。如果您需要设置一个值，请按照其他答案中的建议使用 date 函数。

Bootstrap DateTimePicker (eonasdan) 格式化日期为 DD/MMM/YYYY

Bootstrap DateTimePicker (eonasdan) format date as DD/MMM/YYYY

datetimepicker

twitter-bootstrap

momentjs

bootstrap-datetimepicker

eonasdan-datetimepicker