converting local time to utc in form field before submitting form

Question

I have a Django form with a "scheduled_at" date field, and using flatpickr.js to render the date selector.

Currently, when an end user opens the calendar to select the 'scheduled_by" date, it is showing the current date/time in UTC. What I'm trying to do is show the current date/time using the browsers local time, so that the end user doesn't have to do calculate timezone differences in their head when selecting the date.

The backend is expecting UTC, so I need to convert the local date/time the user has selected into UTC on the front end before the form is submitted, but I'm not sure what is the best way to do this given the existing code.

<script type="text/javascript">
$(document).ready(function() {

{% if form.instance.pk %}
var $modal = $("#{{ form.widget_kind }}-update-modal-{{ form.instance.uuid }}");
var $form = $("#{{ form.widget_kind }}-update-form-{{ form.instance.uuid }}");
{% else %}
var $modal = $("#{{ form.widget_kind }}-create-modal");
var $form = $("#{{ form.widget_kind }}-create-form");
{% endif %}

// Prevent multiple form submissions.
var formSubmitting = false;
$form.submit(function(e) {
  if (formSubmitting) {
    e.preventDefault();
  }
  formSubmitting = true;
});

var $scheduleSelector = $("#schedule-selector", $form);
var $scheduleBtn = $("#schedule-btn", $form);
var $scheduleValueDisplay = $("#schedule-value-display", $form);

{% if form.instance.pk and form.instance.is_scheduled %}
var defaultDateStr = "{{ form.instance.scheduled_at|date:'c' }}";
{% else %}
var defaultDateStr = "{% now 'c' %}";
{% endif %}

var defaultDate = new Date(defaultDateStr);

$scheduleSelector.flatpickr({
  enableTime: true,
  minDate: new Date("2020-01-01T00:00:00Z"),
  monthSelectorType: "static",
  defaultDate: defaultDateStr,
  defaultHour: defaultDate.getUTCHours(),
  defaultMinute: defaultDate.getUTCMinutes(),
  //altFormat: "M j h:i K \\UTC",
  dateFormat: "Y-m-dTH:i:S\\Z",
  //altInput: true,
  //dateFormat: "Z",
  minuteIncrement: 1,

  onClose: function(selectedDates, dateStr, instance) {
    var selectedDate = new moment(selectedDates[0]);
    $scheduleValueDisplay.text(selectedDate.format("MMM D h:mm A UTC"));
    $scheduleBtn.attr("value", selectedDate.format("YYYY-MM-DDTHH:mm:ss[Z]"));
    $scheduleBtn.css({display: ""});
  }
});

$modal.on("hide.bs.modal", function() {
  $form.trigger("reset");

  {% if form.instance.pk and form.instance.is_scheduled %}
    $scheduleValueDisplay.text("{{ form.instance.scheduled_at|date:'M j g:i A T' }}");
    $scheduleBtn.css({display: ""});
  {% else %}
    $scheduleValueDisplay.text("");
    $scheduleBtn.css({display: "none"});
  {% endif %}
});

});

Answer 1

This is what worked for me, this converts the local time to utc, and this is the value that gets sent on form submit. The only remaining question I have here is if I need to modify the actual date to account for local/utc differences.

  $scheduleSelector.flatpickr({
  enableTime: true,
  minDate: new Date("2020-01-01T00:00:00"),
  monthSelectorType: "static",
  useCurrent: true,
  //defaultDate: defaultDateStr,
  defaultHour: defaultDate.getHours(),
  defaultMinute: defaultDate.getMinutes(),
  altFormat: "Y-m-d h:i K",
  dateFormat: "Y-m-dTH:i:S\\K",
  //altInput: true,
  //dateFormat: "Z",
  minuteIncrement: 1,

  onClose: function(selectedDates, dateStr, instance) {
    var selectedDate = new moment(selectedDates[0]).utc();
    $scheduleValueDisplay.text(selectedDate.format("MMM D h:mm A UTC"));
    $scheduleBtn.attr("value", selectedDate.format("YYYY-MM-DDTHH:mm:ss[Z]"));
    $scheduleBtn.css({display: ""});
  }
});