Блог

У меня есть форма Django с полем даты «scheduled_at» и с помощью 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 %}
});
  

});

Это то, что сработало для меня, это преобразует местное время в utc, и это значение, которое отправляется при отправке формы. Единственный оставшийся вопрос, который у меня здесь есть, заключается в том, нужно ли мне изменить фактическую дату, чтобы учесть различия в local / 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: ""});
  }
});