在提交表单之前在表单字段中将本地时间转换为 UTC答案

【问题标题】：converting local time to utc in form field before submitting form在提交表单之前在表单字段中将本地时间转换为 UTC
【发布时间】：2020-10-16 15:41:46
【问题描述】：

我有一个带有“scheduled_at”日期字段的 Django 表单，并使用 flatpickr.js 呈现日期选择器。

目前，当最终用户打开日历以选择“scheduled_by”日期时，它以 UTC 显示当前日期/时间。我要做的是使用浏览器本地时间显示当前日期/时间，以便最终用户在选择日期时不必在头脑中计算时区差异。

后端需要 UTC，因此我需要在提交表单之前将用户选择的本地日期/时间转换为前端的 UTC，但我不确定执行此操作的最佳方法是什么现有代码。

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

});

【问题讨论】：

如果有意义的话，我也愿意使用 moment.js
试试 moment.utc(new Date('07-18-2013'))

标签： javascript datetime flatpickr

【解决方案1】：

这对我有用，它将本地时间转换为 utc，这是表单提交时发送的值。我这里剩下的唯一问题是我是否需要修改实际日期以考虑本地/UTC 差异。

  $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: ""});
  }
});

【讨论】：