如何从URL参数设置Flatpickr日期？代码报set不是函数错误

1. 修复set is not a function错误 #

你当前的错误是因为调用了全局flatpickr对象的set方法，而set是实例方法，必须用初始化后得到的实例（也就是你代码里的fp变量）来调用。

修改后的基础代码：

var start_date = new Date("2023-01-01 11:00:00");
const fp = flatpickr('.datetimepicker', {
  dateFormat: "d-M-Y h:i K",
  enableTime: true,
  allowInput: true,
});

// 用实例fp调用set方法，而非全局flatpickr
fp.set('defaultDate', start_date);

2. 通过URL参数设置日期 #

要从URL参数中获取日期并同步到Flatpickr，按以下步骤实现：

• 用URLSearchParams解析URL中的参数
• 验证参数合法性，转换为可识别的Date对象
• 可选择在初始化时直接传入默认日期，或后续动态修改

完整示例代码 #

HTML部分

<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>

<input class="datetimepicker" type="text">

JavaScript部分

// 解析URL参数，示例URL：yourpage.html?selectedDate=2023-01-01T11:00:00
const urlParams = new URLSearchParams(window.location.search);
const urlDateStr = urlParams.get('selectedDate');

// 设置默认日期（URL无参数时启用）
let defaultDate = new Date("2023-01-01 11:00:00");

// 若URL参数存在且格式合法，替换默认日期
if (urlDateStr) {
  const parsedDate = new Date(urlDateStr);
  if (!isNaN(parsedDate.getTime())) {
    defaultDate = parsedDate;
  }
}

// 初始化Flatpickr时直接传入defaultDate配置（比后续调用set更高效）
const fp = flatpickr('.datetimepicker', {
  dateFormat: "d-M-Y h:i K",
  enableTime: true,
  allowInput: true,
  defaultDate: defaultDate
});

// 如需后续动态修改日期，再调用实例的set方法：
// fp.set('defaultDate', new Date("2023-02-01 14:30:00"));

注意事项 #

• URL参数的日期字符串需符合Date对象可解析的格式，推荐使用ISO格式（如2023-01-01T11:00:00），避免解析失败
• 必须通过Flatpickr实例调用set方法，不能直接调用全局flatpickr.set
• 初始化时直接配置defaultDate比初始化后调用set更高效，优先推荐前者

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