Datepicker调用getDate()返回null问题求助

你使用的是原生HTML5 <input type="date"> 控件，但却调用了jQuery UI Datepicker的getDate()方法——这个方法仅对已初始化jQuery UI Datepicker的元素生效，而你的输入框从未被初始化为jQuery UI日期选择器，因此返回null是正常的。

根据你的需求，有两种可行的处理方式：

方式一：直接使用原生HTML5日期控件的取值逻辑 #

既然用了原生date类型输入框，无需依赖jQuery UI，直接通过val()获取值即可，还可按需转换为Date对象：

$(".datePickerOrders").change(async (event) => {
  // 获取原生输入框的字符串格式日期（YYYY-MM-DD）
  const dateStr = $(event.target).val();
  // 转换为Date对象（可选，根据业务需求决定）
  const selectedDate = new Date(dateStr);
  console.log(selectedDate);
});

方式二：改用jQuery UI Datepicker（若需其扩展功能） #

如果确实需要使用jQuery UI Datepicker的特性，需先完成初始化，同时建议将输入框类型改为text（避免原生控件与jQuery UI组件冲突）：

修改后的HTML #

<label for="datePickerOrders" class="labelDateOrders">Date:</label>
<input type="text" id="dateFood" class="datePickerOrders" name="datePickerOrders">

初始化并绑定事件的JS代码 #

// 第一步：初始化jQuery UI Datepicker
$(".datePickerOrders").datepicker();

// 绑定change事件获取日期
$(".datePickerOrders").change(() => {
  const selectedDate = $(".datePickerOrders").datepicker("getDate");
  console.log(selectedDate);
});

// 更推荐使用Datepicker自带的onSelect事件（触发时机更精准）
$(".datePickerOrders").datepicker({
  onSelect: function(dateText, inst) {
    const selectedDate = $(this).datepicker("getDate");
    console.log(selectedDate);
  }
});

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