Bootstrap 3 Datepicker：如何将日期传入POST表单？

嘿，我来帮你搞定这个问题！我之前也多次用Datepicker做过类似的功能，把日期从GET改成POST其实只需要调整几个关键点，咱们一步步来：

第一步：修正HTML结构，给表单和输入框正确赋值 #

你现在的name="eintritt"加在了外层div上，这是无效的——表单提交只会识别input元素的name属性。另外，你需要把Datepicker的输入框放到一个<form>标签里，这样才能通过POST提交数据。修改后的HTML如下：

<form id="date-submit-form" method="POST" action="你的后端处理地址">
  <div class="input-group date" id="datetimepicker_benutzer_detail_start">
    <!-- 把name属性移到input上 -->
    <input type="text" class="form-control" name="eintritt" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
  <!-- 添加一个提交按钮，方便触发提交 -->
  <button type="submit" class="btn btn-default mt-2">提交日期</button>
</form>

第二步：确保Datepicker选中的日期同步到输入框 #

大多数Datepicker插件（比如bootstrap-datetimepicker）会自动把选中的日期同步到对应的input里，但我们可以通过插件的事件回调确认这一点，同时保证日期格式符合后端要求。调整你的JavaScript代码：

$(function () {
  $('#datetimepicker_benutzer_detail_start').datetimepicker({
    // 这里设置你需要的日期格式，比如YYYY-MM-DD HH:mm:ss
    format: 'YYYY-MM-DD',
    // 其他配置选项...
  }).on('dp.change', function(e) {
    // 当日期改变时，你可以在这里做额外处理，比如打印日志确认
    console.log('当前选中的日期:', e.date.format('YYYY-MM-DD'));
  });
});

第三步：选择提交方式（两种可选） #

方式1：普通表单提交（页面刷新） #

上面的form已经设置了method="POST"，点击提交按钮后，浏览器会自动把input[name="eintritt"]的日期值以POST方式发送到action指定的后端地址。后端可以通过对应语言的方式获取值，比如PHP用$_POST['eintritt']，Java用request.getParameter("eintritt")。

方式2：AJAX POST提交（无刷新） #

如果不想刷新页面，你可以监听表单的提交事件，用jQuery的$.post发送异步请求：

$('#date-submit-form').on('submit', function(e) {
  // 阻止默认的表单刷新提交
  e.preventDefault();
  
  // 获取选中的日期值
  const selectedDate = $('input[name="eintritt"]').val();
  
  // 发送POST请求
  $.post('你的后端处理地址', { eintritt: selectedDate }, function(response) {
    // 请求成功后的处理，比如提示用户
    alert('日期提交成功！');
    console.log('后端响应:', response);
  }).fail(function(error) {
    // 请求失败的处理
    console.error('提交失败:', error);
    alert('提交出错，请重试！');
  });
});

几个注意点 #

• 一定要保证input的name属性正确，这是表单传值的核心。
• 确认Datepicker的日期格式和后端期望的格式一致，避免解析错误。
• 如果用AJAX提交，确保你的项目已经正确引入了jQuery库。

内容的提问来源于stack exchange，提问作者dida110