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

Question

我在下面的这个引导插件方面遇到了很大的问题。

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

我有一个初始值"15/05/1992"，其初始格式为"DD/MM/YYYY"，现在使用这个插件，它也使用moments 作为它的基础。我想像“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 函数。