При использовании jquery datepicker, как правильно обращаться с людьми, печатающими даты в разных форматах?

У меня есть следующий код:

$('#MilestoneStartDate').datepicker({
    dateFormat: 'dd M yy'
});

и все работает отлично, если вы используете мышь, чтобы щелкнуть по дате во всплывающем окне, чтобы ввести дату, но если человек вводит дату или вставки даты в текстовое поле в другом формате, чем указано выше (например, "1/1/2016" ), когда у меня есть этот код:

 var startDate = $('#MilestoneStartDate').datepicker("getDate");

переменная startDate отображается как текущая дата (хотя, очевидно, 1/1/2016 не является текущей датой)

Каков наилучший способ справиться с этими ситуациями? Должен ли я мешать людям печатать и вставлять даты или есть способ сделать преобразование формата?

Ответ 1

getDate метод datepicker возвращает тип даты, а не строку.

Вам нужно отформатировать возвращаемое значение в строке, используя формат даты. Использовать функцию datepicker formatDate:

var startDate = $('#MilestoneStartDate').datepicker('getDate');
$.datepicker.formatDate('dd M yy', startDate);

Полный список спецификаторов формата доступен здесь.

ИЗМЕНИТЬ

$('#MilestoneStartDate').datepicker("getDate");

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

Итак, чтобы справиться с этой ситуацией, используйте следующий код.

$(function(){    
    $('#MilestoneStartDate').datepicker({
         dateFormat: 'dd M yy'
    });    
});

var strSelectedDate = new Date($('#MilestoneStartDate').val());
var formatedDate = $.datepicker.formatDate('dd M yy', strSelectedDate);
alert(formatedDate);

Рабочая демонстрация

Согласно комментарию @Boris Serebrov

Ключ new Date ($ ('# MilestoneStartDate'). val()) - он фактически пытается "угадать" формат, поэтому такие вещи, как "2 марта 2016 года", "Марш 2 2016" или "2016, 2 марта" будут правильно проанализированы.

Шаг за шагом:

Случай 1:

Здесь strSelectedDate укажите дату в стандартном формате, скажем, если я выберу 02 Mar 2016 из всплывающего окна даты, она даст

Ср Мар 02 2016 00:00:00 GMT + 0530

Теперь

$.datepicker.formatDate('dd M yy', strSelectedDate);

укажите дату вашего формата, например, ниже.

02 марта 2016 г.

Случай: 2

Как вы упомянули в своем вопросе, если пользователь вручную вводит дату, например, 1/1/2016 strSelectedDate дает вам стандартную дату, например, ниже.

Пт Янв 01 2016 00:00:00 GMT + 0530

Тогда

$.datepicker.formatDate('dd M yy', strSelectedDate);

предоставит вам фальшивую дату

01 января 2016 г.

Какая правильная дата, как ожидалось.

Случай 3:

Теперь, если пользователь пишет некорректную дату вручную, как 112016, а затем strSelectedDate возвращает Invalid Date, поэтому здесь вы можете выполнить некоторую проверку на стороне клиента, чтобы ввести правильную дату.

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

Ответ 2

Короткий ответ: пусть пользователь исправляет свои ошибки (вы можете разрешить вставку, это не проблема). Просто придерживайтесь простого механизма проверки.

Длинный ответ:

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

Итак, если пользователь вставляет ошибочную дату в свой элемент управления датой, тогда, когда она нажимает кнопку отправки, ваш ui должен отображать сообщение об ошибке: "дата не имеет правильного формата. dd M yy".

Помните, что пользователь действительно может вставить что угодно, даже такую строку, как "izeoif zoi"; так что вам НЕОБХОДИМО проверять валидацию.

Когда пользователь является виновником, она должна исправить свои ошибки (я полагаю).

Очень часто сообщать пользователю, что элемент управления ошибочен: например, я предполагаю, что вы знаете это сообщение об ошибке: "Имя требуется". Это та же идея здесь.

Как отметил @Eric Guan, вы можете использовать подсказки, чтобы помочь пользователю получить представление о вашем формате даты в первую очередь (прежде чем она набирает/вставляет что-либо).

Ответ 3

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

Это считается хорошим UX и так часто используется, что большинство пользователей его ожидали.

Кроме того, вы не можете разбирать все введенные даты, например, некоторые страны используют MM/DD/YYYY, а другие используют DD/MM/YYYY, и кто скажет, если 01/07/2015 является седьмым января или первым июлем, просто невозможно сказать, не зная формат.

Поскольку вы используете jQuery UI, здесь быстрый способ проверить датупиксера с помощью встроенного виджета Tooltip

$('#MilestoneStartDate').datepicker({
    dateFormat: 'dd M yy'
}).on({
	change : function() {
        if ( !this.checkValidity() ) {
        	$(this).tooltip({
				close: function( event, ui ) {  ui.tooltip.stop() }
			});
            setTimeout(function(x) { $(x).tooltip('open') }, 0, this);
        } else {
        	$(this).tooltip('destroy');
        }
    }
}).datepicker('setDate', new Date());

.ui-datepicker{ z-index: 999999999!important;}
.ui-tooltip-content {font-size: 14px;}

<link href="https://code.jquery.com/ui/1.11.4/themes/trontastic/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<p>Type an invalid date</p>
<input id="MilestoneStartDate" pattern="[0-9]{2}\s[a-zA-Z]{3}\s[0-9]{4}" title='valid format is : "10 Mar 2015"' >

Ответ 4

Вы можете отключить текстовое поле от людей для редактирования и поместить значок рядом с ним. Люди должны нажать на значок и ввести дату. Таким образом, копия пасты не будет работать здесь.

Ответ 5

Валидация - хорошая идея. Также вы можете написать свой собственный плагин для изменения форматов дат или посмотреть на это: https://plugins.jquery.com/formatDateTime/

Ответ 6

Лучше запретить пользователю вводить или вставлять даты. Сделайте свое текстовое поле даты только с помощью readonly='readonly'

Ответ 7

Вы можете изменить дату пользователя на действительную дату, когда пользователь заканчивает вводить дату,
Функция будет поддерживать каждый формат:

дм-гг или дм-гггг
д/м/гг или д/м/гггг
dmyy или dmyyyy

будет отображаться как дм-гггг

      //initializing the datePicker
       $('#datePickerId').datepicker ({
        format: 'dd-mm-yy',
        shortYearCutoff: 0,
        autoclose: true,
        todayHighlight: true,
      })

        //change to the correct format
         $('#datePickerId').datepicker()
                 .on("hide", function(e) {
                   var temp=e.delegateTarget.firstElementChild.value.split('-');
                   if(temp.length==3 && temp[2].length<=3)
                   {
                    var year;
                    if(temp[2].length==2)
                      year="20";
                      else if(temp[2].length==3)
                        year="2";
                        else year="200";

                    $(e.delegateTarget).datepicker("setDate", new Date(temp[1]+'-'+temp[0]+'-'+year+temp[2]));
                    e.delegateTarget.firstElementChild.value=temp[0]+'-'+temp[1]+'-'+year+temp[2];
                   }
          });