Datepicker：选择日期覆盖格式答案

【问题标题】：Datepicker: Selecting a date overrides formatDatepicker：选择日期覆盖格式
【发布时间】：2016-06-06 16:39:20
【问题描述】：

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

  <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/

【问题讨论】：

你可以从这里使用一些东西：jqueryui.com/datepicker/#date-formats
我想我已经尝试过这种格式，但我不确定。我会再试一次。谢谢。
感谢您的建议。对于您引用的具体示例，您需要通过下拉菜单选择格式。我必须将一种格式“硬编码”到表单中。当我在该站点上使用/使用“常规”格式示例时，它不起作用/不起作用。我认为该站点是我获得当前版本的脚本格式的地方。

标签： jquery twitter-bootstrap date datepicker

【解决方案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

【讨论】：

我看到我在示例中为脚本放置了错误的 HTML，但问题是一样的。我的表格中只有多个日期选择器。我试过你的代码。实际上更糟。它甚至不会在初始加载时使用您的格式，更不用说在您尝试更改它时了。在初始加载时，使用您的代码，该值为“06/06/2016”。
请更新您的 html 代码或在小提琴上显示示例
我更新了 html。这几乎是一样的。大部分只是需要更改的名称和 ID。感谢您的帮助！
这个plugin?我试过了，工作正常。检查页面上的脚本，可能有冲突
好的。我一直在努力。我正在尝试两种方法。一种方法是使用默认的 jquery-ui，另一种方法是使用 bootstrap-datepicker 插件。我几乎可以使用插件版本。它以正确的格式预填充今天的日期，但如果有人从弹出菜单中选择不同的日期，它会恢复为默认格式。我在这里有一个精简版，所以你可以看到我在说什么：jsfiddle.net/radman63/8bb33khm/1。谢谢。

【解决方案2】：

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

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/

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

【讨论】：