I have a text field with flatpickr but I don't know how to set date from parameter values

Question

I have a text field with Flatpickr enabled everything works fine, but I don't know how to set a date to Flatpickr date calendar from URL string parameter.

Here is my code:

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,
});

flatpickr.set('defaultDate', start_date);

<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">

I get JavaScript error set is not the function.

Answer 1

Instead of using flatpickr.set() you can use the Flatpickr flatpickr.setDate() method. (view documentation)

Example:

const fp = flatpickr(".datetimepicker", {
  dateFormat: "d-M-Y h:i K",
  enableTime: true,
  allowInput: true,
});

fp.setDate(new Date("2023-01-01 11:00:00"));

<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.3.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">