Question

我在下面的这个引导程序插件中遇到了很多问题。

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

我的初始值为"15/05/1992"，初始格式为"DD/MM/YYYY"，现在使用此插件也使用时刻作为基础。我想格式化它＆＃34; 15 / May / 1992＆＃34;但每次我使用'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

2 个答案: