title: converting local time to utc in form field before submitting form
body: <p>I have a Django form with a &quot;scheduled_at&quot; date field, and using flatpickr.js to render the date selector.</p>
  <p>Currently, when an end user opens the calendar to select the 'scheduled_by&quot; 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.</p>
  <p>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.</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function() {
  
  {% if form.instance.pk %}
  var $modal = $(&quot;#{{ form.widget_kind }}-update-modal-{{ form.instance.uuid }}&quot;);
  var $form = $(&quot;#{{ form.widget_kind }}-update-form-{{ form.instance.uuid }}&quot;);
  {% else %}
  var $modal = $(&quot;#{{ form.widget_kind }}-create-modal&quot;);
  var $form = $(&quot;#{{ form.widget_kind }}-create-form&quot;);
  {% endif %}
  
  // Prevent multiple form submissions.
  var formSubmitting = false;
  $form.submit(function(e) {
    if (formSubmitting) {
      e.preventDefault();
    }
    formSubmitting = true;
  });
  
  var $scheduleSelector = $(&quot;#schedule-selector&quot;, $form);
  var $scheduleBtn = $(&quot;#schedule-btn&quot;, $form);
  var $scheduleValueDisplay = $(&quot;#schedule-value-display&quot;, $form);
  
  {% if form.instance.pk and form.instance.is_scheduled %}
  var defaultDateStr = &quot;{{ form.instance.scheduled_at|date:'c' }}&quot;;
  {% else %}
  var defaultDateStr = &quot;{% now 'c' %}&quot;;
  {% endif %}
  
  var defaultDate = new Date(defaultDateStr);
  
  $scheduleSelector.flatpickr({
    enableTime: true,
    minDate: new Date(&quot;2020-01-01T00:00:00Z&quot;),
    monthSelectorType: &quot;static&quot;,
    defaultDate: defaultDateStr,
    defaultHour: defaultDate.getUTCHours(),
    defaultMinute: defaultDate.getUTCMinutes(),
    //altFormat: &quot;M j h:i K \\UTC&quot;,
    dateFormat: &quot;Y-m-dTH:i:S\\Z&quot;,
    //altInput: true,
    //dateFormat: &quot;Z&quot;,
    minuteIncrement: 1,
  
    onClose: function(selectedDates, dateStr, instance) {
      var selectedDate = new moment(selectedDates[0]);
      $scheduleValueDisplay.text(selectedDate.format(&quot;MMM D h:mm A UTC&quot;));
      $scheduleBtn.attr(&quot;value&quot;, selectedDate.format(&quot;YYYY-MM-DDTHH:mm:ss[Z]&quot;));
      $scheduleBtn.css({display: &quot;&quot;});
    }
  });
  
  $modal.on(&quot;hide.bs.modal&quot;, function() {
    $form.trigger(&quot;reset&quot;);
  
    {% if form.instance.pk and form.instance.is_scheduled %}
      $scheduleValueDisplay.text(&quot;{{ form.instance.scheduled_at|date:'M j g:i A T' }}&quot;);
      $scheduleBtn.css({display: &quot;&quot;});
    {% else %}
      $scheduleValueDisplay.text(&quot;&quot;);
      $scheduleBtn.css({display: &quot;none&quot;});
    {% endif %}
  });
  </code></pre>
  <p>});
  </p>