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 calender from url string parameter.

Below is the code

  var start_date = #{@start_date}
  const fp = flatpickr('.datetimepicker', {
    dateFormat: "d-M-Y h:i K", 
    enableTime: true,
    allowInput: true,
  });
  flatpickr.set('defaultDate', start_date);

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