Как сделать jqueryUI datepicker submit в другом формате, чем то, что отображается?

Я работаю над некоторой интернационализацией, используя jQueryUI. У меня есть элемент управления DatePicker на форме, которая правильно работает на французском языке.

Когда я выбираю дату, например 15 августа 2012 года, DatePicker отобразит 15 Aoû, 2012, как и следовало ожидать. Моя проблема однако заключается в том, что при отправке формы значение DatePicker публикуется как "15 Aoû, 2012", которое теперь необходимо перевести на сервер, прежде чем он сможет быть сохранен должным образом.

Мой вопрос в том, есть ли встроенный способ внутри jQueryUI DatePicker, чтобы я мог всегда отправлять его на сервер в согласованном формате, независимо от того, на каком языке отображается элемент управления? Если нет встроенного способа, какие варианты существуют для достижения этого?

Я понимаю, что я могу изменить формат date примерно на 08/15/2012 вместо текстового представления, но это не то, что я хочу сделать.

Ответы

Ответ 1

Для этого есть 2 варианта конфигурации: altField и altFormat. http://api.jqueryui.com/datepicker/#option-altField Если вы укажете altField, это поле также будет обновлено и будет иметь значение altFormat. Обычно вам нужно сделать altField скрытым полем, soyou может игнорировать регулярное поле и отправить db altField.

Ответ 2

Как вы заметили, поставка dateFormat хорошо работает для вновь введенных дат, но не изменяет атрибут value, который уже был добавлен в поле ввода даты. Мне потребовалось некоторое время, и я не уверен, является ли это решение идеальным, но здесь объясняется моя ситуация и код, который его решает. Могут помочь другим с той же проблемой в будущем. В моем примере я использую dd/MM/yyyy как формат отображения.

  • Страница содержит любое количество полей ввода даты, которые могут или не могут иметь атрибут value, предоставленный в формате yyyy-MM-dd, в качестве указанный W3C.
  • Некоторые браузеры будут иметь свой собственный элемент управления ввода для обработки дат. На момент написания этой статьи, например, Opera и Chrome. Они должны ожидать и хранить дату в вышеупомянутом формате, при этом они будут отображаться в соответствии с региональными настройками клиента. Вероятно, вам не нужно/нужно создавать jqueryui datepicker в этих браузерах.
  • Браузеры, у которых нет встроенного элемента управления для ввода полей ввода даты, будут нужны jqueryui datepicker вместе с невидимым полем "alt".
  • Невидимое поле ввода alt с форматом yyyy-MM-dd должно иметь оригинальное имя и уникальный идентификатор, чтобы логика форм продолжала работать.
  • Наконец, значение yyyy-MM-dd поля ввода дисплея должно быть проанализировано и заменено его нужной копией.

Итак, вот код, используя Modernizr, чтобы определить, способен ли клиент самостоятельно визуализировать поля ввода даты. 

if (!Modernizr.inputtypes.date) {
    $('input[type=date]').each(function (index, element) {
        /* Create a hidden clone, which will contain the actual value */
        var clone = $(this).clone();
        clone.insertAfter(this);
        clone.hide();

        /* Rename the original field, used to contain the display value */
        $(this).attr('id', $(this).attr('id') + '-display');
        $(this).attr('name', $(this).attr('name') + '-display');

        /* Create the datepicker with the desired display format and alt field */
        $(this).datepicker({ dateFormat: "dd/mm/yy", altField: "#" + clone.attr("id"), altFormat: "yy-mm-dd" });

        /* Finally, parse the value and change it to the display format */
        if ($(this).attr('value')) {
            var date = $.datepicker.parseDate("yy-mm-dd", $(this).attr('value'));
            $(this).attr('value', $.datepicker.formatDate("dd/mm/yy", date));
        }
    });
}

Ответ 3

Похоже, у кого-то был этот вопрос или аналогичный до вас.

Если вы читаете fooobar.com/questions/139589/..., автор пытался показать дату в одном формате и передать данные в MySQL в другом формате.

Предыдущий ответ в этой ссылке позволяет настроить выбранное значение как переменную. Теперь вам нужно только подключить parseDate к выбранной переменной даты.

<script type="text/javascript">
    $('#cal').datepicker({
             dateFormat: 'dd M yy',
             onSelect: function(dateText, inst) { 
             var dateAsString = dateText; //the first parameter of this function
             var newDateFormat = $.datepicker.parseDate('dd-mm-yyyy', dateAsString);
           }
    });
</script>

Проверьте настройки parseDate для настроек и форматирования.

Надеюсь, это поможет!

Ответ 4

В принципе, вы должны не переформатировать дату. Вместо этого вы должны прочитать объект JavaScript Date из Datepicker, используя метод getDate(). Затем вам нужно передать его на сервер.
Вопрос в том, как. В принципе, то, что вы хотите, это обычный формат. Если вы используете JSON, ответ очень прост, просто поставьте объект даты, а функция JSON stringify() автоматически отформатирует его на ISO8601.

Как вы можете видеть из Википедии, ISO8601 был разработан для надежного обмена датой и временем, поэтому, что вы должны использовать.
Возможно, было бы полезно знать, что современные веб-браузеры поддерживают метод Date object toISOString().

Ответ 5

Как заметил Павел-Дида, Там

метод getDate()

var currentDate = $( ".selector" ).datepicker( "getDate" );

Вот пример того, что он возвращает: Wed Jan 20 2016 00:00:00 GMT+0300.

Вы можете проанализировать его в Javascript, PHP, в SQL или любом другом.

Пример синтаксического анализа MySQL:

select str_to_date('Wed Jan 20 2016 00:00:00 GMT+0300','%a %b %d %Y %H:%i:%s');

Возврат:

2016-01-20 00:00:00

Ответ 6

<input type="text" name='fieldName' id="datepicker" value="" style="width: 100px;" />
<script type="text/javascript">
    $( "#datepicker" ).datepicker( "option", "dateFormat", 'dd/mm/yy' );
    $( "#datepicker" ).datepicker();
</script>