从内联/嵌入式引导日期选择器中获取值答案

【问题标题】：Getting the value from the inline/embedded bootstrap datepicker从内联/嵌入式引导日期选择器中获取值
【发布时间】：2016-10-12 12:48:26
【问题描述】：

我从嵌入式/内联引导程序 datetimepicker 获取所选值时遇到问题。

这是我的代码：

<div class="col-lg-8 datepicker_area" style="background: red;">
                <div style="overflow:hidden;">
                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-8">
                                <div id="datetimepicker" data-date="12/03/2012 12:00 PM"></div>
                                <input type="hidden" name="date" id="my_hidden_input" value="">
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">

                        $("#datetimepicker").on("changeDate", function(event) {
                            $("input[type='hidden'][name='date']").val(
                                    $('#datetimepicker').datepicker('getFormattedDate')
                            )
                        });

                        $(function () {
                            $('#datetimepicker').datetimepicker({
                                inline: true,
                                sideBySide: true
                            });

                            $('#datetimepicker').datetimepicker();
                            $('#datetimepicker').on("changeDate", function() {
                                $('#my_hidden_input').val(
                                        $('#datetimepicker').datetimepicker('getFormattedDate')
                                );
                            });


                        });
                    </script>
                </div>

            </div>

我的隐藏输入没有任何反应。他没有保存其中的价值。

我从引导文档中获得了代码。

有人知道它是如何工作的吗？谢谢。

【问题讨论】：

标签： javascript twitter-bootstrap datepicker

【解决方案1】：

根据 Bootstrap 3 Datepicker，您需要 dp.change 事件。

参考：http://eonasdan.github.io/bootstrap-datetimepicker/Events/

替换你的changeDate事件$('#datetimepicker').on("changeDate", function() {}); 到 $('#datetimepicker').on('dp.change', function(event) {});

您可以使用event.date 获取日期，甚至更好，格式化日期event.date.format('MM/DD/YYYY h:mm a')

示例： $('#datetimepicker').on('dp.change', function(event) { alert(event.date); });

请参考以下解决方案：

$(function() {
  $('#datetimepicker').datetimepicker({
    inline: true,
    sideBySide: true
  });
  $('#datetimepicker').on('dp.change', function(event) {
    //console.log(moment(event.date).format('MM/DD/YYYY h:mm a'));
    //console.log(event.date.format('MM/DD/YYYY h:mm a'));
    $('#selected-date').text(event.date);
    var formatted_date = event.date.format('MM/DD/YYYY h:mm a');
    $('#my_hidden_input').val(formatted_date);
    $('#hidden-val').text($('#my_hidden_input').val());
  });
});

#selected-date,
#hidden-val {
  font-weight: bold;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div>
  Selected Date: <span id="selected-date"></span>
  <br/>
  <br/>Value of hidden field: <span id="hidden-val"></span>
  <br/>
</div>
<div class="col-lg-8 datepicker_area" style="background: red;">
  <div style="overflow:hidden;">
    <div class="form-group">
      <div class="row">
        <div class="col-md-8">
          <div id="datetimepicker" data-date="12/03/2012 12:00 PM"></div>
          <input type="hidden" name="date" id="my_hidden_input" value="">
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

抱歉，回答迟了。谢谢！它帮助非常好。我不知道事件发生了变化。 :)
@Florianb 我很高兴它有帮助。 :)

【解决方案2】：

将隐藏的输入移到 div（内联 datetimepicker 的容器）内。而且，datetimepicker 会自动使用它。在 4.17.47 版本上测试。

<div class="col-md-8">
   <div id="datetimepicker" data-date="12/03/2012 12:00 PM">
       <input type="hidden" name="date" id="my_hidden_input" value="">
   </div>
</div>

【讨论】：

【解决方案3】：

以下隐藏输入对我有用

<input type="hidden" name="date" id="my_hidden_input" value="">

通过 id 将 datetimepicker 直接分配给隐藏元素

<script>
    $(function(){
        $('#my_hidden_input').datetimepicker({
            inline: true, 
            sideBySide: true
        });
    });
</script>

【讨论】：