如何从jQuery DatePicker提取日期变量至数据库查询并在HTML显示选中日期

嘿，我来帮你梳理下问题～

1. 先修正页面展示的错误 #

你之前的核心问题出在input元素不能用html()方法设置内容！input是单标签表单元素，它的显示内容存在value属性里，得用val()方法来赋值。

把你原来的JS代码：

$('#date_id').html(input.value);

改成：

$('#date_id').val(input.value);

其实更省心的方式是直接让DatePicker绑定到目标input，选中日期后自动同步值，不用手动赋值：

$(function() {
  // 初始化开始日期选择器，直接绑定到要展示/提交的input
  $("#start_date").datepicker({
    onSelect: function(selectedDate) {
      // 选中日期后自动同步到展示用的元素
      $("#date_id").val(selectedDate);
    }
  });
});

如果只是纯展示（不需要用户编辑），甚至可以用<span>或<p>标签，这时候才用html()：

<p>You entered start date as: <span id="date_display"></span></p>

$("#date_display").html(selectedDate);

2. 提取选中的日期变量 #

要拿到用户选中的日期值，有两种简单方式：

• 在onSelect回调里直接获取selectedDate参数，这就是选中的日期字符串
• 随时通过val()方法获取绑定了DatePicker的input的值：

  var startDate = $("#start_date").val();
  var endDate = $("#end_date").val();
  

拿到的这两个变量就可以直接用于后续传给数据库的操作。

3. 将日期传入数据库 #

通常用AJAX提交到后端接口是最常用的方式，示例代码如下：

// 假设你有一个提交按钮
$("#submit_btn").click(function() {
  var startDate = $("#start_date").val();
  var endDate = $("#end_date").val();
  
  $.ajax({
    url: "/your-backend-api", // 替换成你的后端接口地址
    method: "POST",
    data: {
      start_date: startDate,
      end_date: endDate
    },
    success: function(response) {
      console.log("日期提交成功！");
      // 这里可以处理后端返回的查询结果，比如展示符合条件的记录
    },
    error: function(xhr, status, error) {
      console.error("提交失败：", error);
    }
  });
});

后端接收到start_date和end_date参数后，就可以执行数据库查询，筛选出两个日期之间的记录了。

额外小提示 #

• 建议给DatePicker设置统一的日期格式，确保和数据库的DATE类型格式匹配，比如：

  $("#start_date").datepicker({
    dateFormat: "yy-mm-dd", // 匹配MySQL等数据库的标准日期格式
    onSelect: function(selectedDate) {
      $("#date_id").val(selectedDate);
    }
  });
  

• 如果想用传统表单提交（不用AJAX），直接把绑定了DatePicker的input放进<form>里，设置好name属性即可：

  <form action="/submit-form" method="POST">
    <label>Start Date:</label>
    <input type="text" id="start_date" name="start_date">
    <label>End Date:</label>
    <input type="text" id="end_date" name="end_date">
    <button type="submit">Submit</button>
  </form>
  

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