Question

我在Bootstrap表单上使用了datepicker。我尝试了十几种不同的方法来更改默认格式，但似乎没有任何效果。在我这里的示例中，我将datepicker配置为使用今天的日期填充该字段。我格式化＆＃34; yyyyMdd＆＃34;当它自动填充今天的日期时起作用。但是，如果您需要从弹出日历中选择其他日期，则会恢复为默认格式。当有人可以从日历中选择日期时，使用自定义日期格式的诀窍是什么？感谢。

  <label class="col-md-1 control-label" for="date">Date:</label>
    <div class="col-sm-3">     
            <div class="input-group date" data-provide="datepicker">
                <input type="text" class="form-control" name="submit_date" id="submit_date" placeholder="" required>
                <div class="input-group-addon">
                   <span class="glyphicon glyphicon-calendar"></span>
                </div>
            </div>
    </div>

<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(function() {
    $("#submit_date").datepicker({
        format: "yyyyMdd"
    }).datepicker("setDate", "0");
});
});//]]> 
</script>

https://jsfiddle.net/radman63/8bb33khm/1/

Answer 1

将ID从输入移至父Div（输入组日期）

<div class="container">
    <div class="row clearfix">      
<form>
 <div class="form-group">
  <label class="col-md-1 control-label" for="date">Date:</label>
        <div class="col-sm-3">      
                <div class="input-group date" id="submit_date" data-provide="datepicker">
                    <input type="text" class="form-control" name="submit_date"  placeholder="" required>
                    <div class="input-group-addon">
                       <span class="glyphicon glyphicon-calendar"></span>
                    </div>
                </div>
        </div>
</div>

JS代码：

$(function() {
  $("#submit_date").datepicker({
    format: "yyyyMdd"
  }).datepicker("setDate", "0");
});

JsFiddle

Answer 2

引导文档中提到了两种方法，我建议的最简单方法是使用引导文档中提到的data属性。您所要做的就是以所需的格式

传递以下数据属性

data-date-format="yyyyMdd"

例如，根据您提交的代码，对其进行如下更新：

<input type="text" data-date-format="yyyyMdd" class="form-control" name="submit_date" id="submit_date" placeholder="" required>

以下是特定的引导程序文档：

https://bootstrap-datepicker.readthedocs.io/en/latest/

希望这会对仍在寻找答案的人有所帮助。

Datepicker：选择日期覆盖格式

2 个答案: