2

关于下面的这个引导插件，我遇到了很大的问题。

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/

4

2 回答 2

3

不要尝试value直接设置属性。这样做将始终使用浏览器的区域设置格式，因此您无法真正控制它。

相反，请使用date日期选择器控件中的函数（请参阅此处的文档）。由于它可以接受一个moment对象，因此这是您对输入格式进行精细控制的最佳选择。

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

在这里更新了小提琴。

于 2016-02-04T06:55:45.583 回答
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()。如果您需要设置一个值，请按照其他答案中的建议使用日期函数。

于 2016-02-04T08:40:37.550 回答