Javascript 提交表单前，在表单字段中将本地时间转换为utc

我有一个带有“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 %}
});

$（文档）.ready（函数（）{
{%if form.instance.pk%}
var$modal=$（“{form.widget_kind}}-updatemodal-{{form.instance.uuid}”）；
var$form=$（“{form.widget_kind}}-updateform-{{form.instance.uuid}”）；
{%else%}
var$modal=$（“{form.widget_kind}}-create-modal”）；
var$form=$（“#{form.widget_kind}}-create form”）；
{%endif%}
//防止多个表单提交。
var=false；
$form.submit（功能（e）{
如果（提交表格）{
e、 预防默认值（）；
}
FORM=真；
});
变量$scheduleSelector=$（“#scheduleSelector”，$form）；
变量$scheduleBtn=$（“#scheduleBtn”，$form）；
变量$scheduleValueDisplay=$（“#计划值显示“，$form）；
{%if form.instance.pk和form.instance.is_scheduled%}
var defaultDateStr=“{form.instance.scheduled_at|date:'c'}”；
{%else%}
var defaultDateStr=“{%now'c%}”；
{%endif%}
var defaultDate=新日期（defaultDateStr）；
$scheduleSelector.FlatPicker({
启用时间：对，
minDate：新日期（“2020-01-01T00:00:00Z”），
monthSelectorType:“静态”，
defaultDate:defaultDateStr，
defaultHour:defaultDate.getUTCHours（），
defaultMinute:defaultDate.getUTCMinutes（），
//altFormat:“M j h:i K\\UTC”，
日期格式：“Y-m-dTH:i:S\\Z”，
//altInput：是的，
//日期格式：“Z”，
分钟增加：1，
onClose：函数（selectedDates、dateStr、instance）{
var selectedDate=新时刻（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”，函数（）{
$form.trigger（“重置”）；
{%if form.instance.pk和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%}
});

}))；

---

这对我来说很有用，它将本地时间转换为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: ""});
  }
});

---

此外，如果使用moment.js使sensery moment.utc（新日期（'07-18-2013'），我也愿意使用moment.js）