Как отправить значение datepicker для AngularStrap без часовой пояс?

Мне интересно, можно ли использовать AngleStrap datepicker, не сохраняя информацию о часовом поясе пользователя. В нашем приложении мы хотим обрабатывать объекты Контракта, срок действия которых истекает.

При добавлении или редактировании объекта контракта есть поле datepicker для выбора даты. Происходит следующее:

Пользователь выбирает дату (например, 2013-10-24)
Angular связывает объект даты javascript с полем ng-model
Объект привязанной даты находится в пользовательском часовом поясе (например, GMT + 3).
Пользователь отправляет форму
Дата отправляется на сервер с помощью службы Angular $http

На шаге 5 дата преобразуется в формат UTC. Выбранная дата была GMT + 3 2013-10-24 в полночь, но конвертация UTC меняет дату на 2013-10-23 в 9 вечера.

Как мы можем предотвратить преобразование или использовать даты UTC в течение всего процесса? Мы не хотим, чтобы дата контракта менялась в зависимости от пользовательского локального часового пояса. Вместо этого мы хотим, чтобы дата была всегда в 2013-10-24 годах, независимо от того, какой часовой пояс.

Нашим текущим решением было внесение небольших изменений в библиотеку AngularStrap, чтобы дата не изменилась при отправке на сервер.

Если бы мы могли получить пользовательский часовой пояс на сервере, мы могли бы сделать другое преобразование там, но сервер не имеет этой информации.

Все идеи оценены!

Ответ 1

Проблема не в AngularStrap. Его как раз как работают даты javascript и как JSON форматирует их для передачи. Когда вы включаете объект даты javascript в строку JSON, он форматирует строку как UTC.

Например, я в штате Юта, и сейчас 07:41 в 2013-10-24. Если я создам новую дату javascript и распечатаю ее на консоли, она скажет:

Thu Oct 24 2013 07:41:19 GMT-0600 (MDT)

Если я строю ту же дату (используя JSON.stringify(date), я получаю:

"2013-10-24T13:41:47.656Z"

который вы видите, не находится в моем текущем часовом поясе, но находится в UTC. Таким образом, преобразование происходит непосредственно перед отправкой формы на сервер, когда он преобразуется из объекта javascript в строку JSON.

Самый простой способ сделать это - просто изменить дату на строку по своему выбору до отправки даты на сервер. Поэтому вместо того, чтобы позволить JSON изменить дату на UTC (если вы не заботитесь о времени суток), вы можете просто сделать что-то вроде этого:

var dateStrToSend = $scope.date.getUTCFullYear() + '-' + ($scope.date.getUTCMonth() + 1) +  '-' + $scope.date.getUTCDate();

Это даст вам строку в формате UTC, которая выглядит как '2013-10-24', а затем вы можете отправить ее на сервер вместо формата JSON, который включает информацию о времени. Надеюсь, это поможет.

ОБНОВЛЕНИЕ: Как сказал @Matt Johnson, есть два способа сделать это. Вы сказали: How could we prevent the conversion, or use UTC dates during the whole process?. Если вы хотите использовать UTC, используйте приведенное выше объяснение. Если вы хотите просто "предотвратить преобразование", вы можете использовать следующее:

var dateStrToSend = $scope.date.getFullYear() + '-' + ($scope.date.getMonth() + 1) +  '-' + $scope.date.getDate();

Ответ 2

Немного поздно, но я провел день на этом, и кто-то может найти это полезным.

Другой способ сделать это декларативно - использовать атрибуты dateType, dateFormat и modelDateFormat. Установите их либо в конфигурации, либо в формате HTML, например,

angular.module('app').config(function ($datepickerProvider) {
    angular.extend($datepickerProvider.defaults, {
        dateFormat: 'dd-MMMM-yyyy',
        modelDateFormat: "yyyy-MM-ddTHH:mm:ss",
        dateType: "string"
    });
});

DateFormat - это формат, который будет отображаться для пользователя в группе выбора даты, в то время как modelDateFormat - это формат, который он будет преобразован, прежде чем привязываться к вашей модели.

У меня также были значения по умолчанию, исходящие от сервера, которые мне нужно было привязать к datepicker при загрузке страницы. Поэтому мне пришлось обновить формат серверных сериализованных дат в JSON, чтобы он соответствовал modelDateFormat. Я использую Web API, поэтому я использовал ниже.

var jsonSettings = Formatters.JsonFormatter.SerializerSettings;
jsonSettings.DateFormatString = "yyyy-MM-ddTHH:mm:ss";

Ответ 3

"Angular способ" заключается в использовании службы $filter для форматирования даты, возвращаемой datepicker.

Пример (HTML):

{{inpDate | date: 'dd-MM-yyyy'}}

Пример (JS):

$scope.processDate = function(dt) {
return $filter('date')(dt, 'dd-MM-yyyy');
}

Plunker здесь