Воюем с форматом даты в JavaScript. Приведение формата даты в поле input в календаре системы TeamSense к более красивому виду.

Воюем с форматом даты в JavaScript. Приведение формата даты в поле input в календаре системы TeamSense к более красивому виду. Изменяем формат отображения даты в поле ввода даты в системе Team Sense (календаро на FullCalendar) в диалоговом jQuery окне добавления/редактирования данных о событии (уроке английского).

Суть проблемы: Дата выводится в непригодном для обычного пользователя виде. Например, посмотрите на картинке справа: Wed Nov 14 2012 09:00:00 GMT+0400 (MSK). (слева для поля "начало" уже исправлено согласно желаниям и насущным потребностям клиента).

Приведение формата даты в поле input к более красивому виду

Работаем: То, что видим в правом поле, это хорогий вид с машинной точки зрения. Как показал опыт, с таким форматом не возникает проблем (во всех браузерах!). Но человечность требует усилий.

1-ая проблема: в разных браузерах в поле input дата показывается по разному.

В Chrome и Mozilla всё одно, Safari и Opera (и IE пожалуй тоже) по-другому. Соответственно и скрипты php обрабатывая её, обрабатывают её с разным конечным результатом. Из-за чего система работает по разному в зависимости от того, каким браузером пользуется клиент. Это недопустимо.

Проблема возникает из формата, в котором передаём дату в функцию обработки Javascript – Date() object. Как факт, упираемся в то, что Internet Explorer и Safari не могут распознать дату в формате “yyyy-mm-dd” и "садятся". Ниже представлены форматы, которые одинаково правильно работают для всех браузеров. Используйте их, чтобы избежать ошибок.

  1. var d = new Date(2011, 01, 07); // yyyy, mm-1, dd  
  2. var d = new Date(2011, 01, 07, 11, 05, 00); // yyyy, mm-1, dd, hh, mm, ss  
  3. var d = new Date("02/07/2011"); // "mm/dd/yyyy"  
  4. var d = new Date("02/07/2011 11:05:00"); // "mm/dd/yyyy hh:mm:ss"  
  5. var d = new Date(1297076700000); // milliseconds  
  6. var d = new Date("Mon Feb 07 2011 11:05:00 GMT"); // ""Day Mon dd yyyy hh:

Мы заменили формат 2012-10-25 на 10/25/2012, как рекомендуют 3 или 4 строки. Правда возник сдвиг по месяцу: ноябрь вдруг стал 10-м месяцем. И это стало 2-й проблемой.

2-ая проблема: Javascript метод getMonth() отсчитывает месяцы с нуля!

Как оказалось, это грешок метода getMonth(), который мы не могли не использовать для дробления даты на части. Смотрите.

var startdateField = (calEvent.start.getMonth()+1)+'/'+calEvent.start.getDate()+'/'+calEvent.start.getFullYear(); //10/3/2011 
  • getDate() - возвращает день месяца,
  • getFullYear() - год в 4 цифры (кстати getYear() - вернёт 4 цифры для годов с >2000, 19xx - она вернёт только последние 2 цифры, поэтому лучше всегда пользоваться getFullYear()),
  • и только getMonth почему-то отсчитывает месяцы с нулевого (0 - январь, 11 - декабрь). Поэтому мы к значению, возвращаемому getMonth() прибавляем единичку.

В итоге мы добились чего хотели – дать пользователям поле для ввода времени (и только) и избавить его от необходимость напрягать мозги при виде строки вида Wed Nov 14 2012 09:00:00 GMT+0400 (MSK). Мы реализовали это во 2-й версии TeamSense.

 

18.11.2012

Доработки в Календаре расписания.

Важные изменения

В полях начала и окончания урока оставлено только ВРЕМЯ (часы:минуты, можно без нуля впереди, то есть допускаются — 9:18, 09:18, 9:1, 9:01); Период при добавлении нового урока устанавливается с дня, на который нажали по 1 год вперёд. При редактировании урока доступны поля, чтобы изменить эти границы, при создании эти поля скрыты как лишние. 

До:

Teamsense редактирование и добавление событий в fullcalendar с некрасивым форматом даты

После:

Teamsense редактирование и добавление событий в fullcalendar с красивым форматом даты

Настроено правильное обновление всего календаря после редактирования или создания нового урока (без дубликатов повторяющихся разовыми (синенькими) уроками)

Настроено и проверено для Chrome, Safari, Mozilla Firefox, Opera. На IE должно тоже работать, но не проверял. 

Полезно почитать подробнее (то, что помогло мне решить проблему):

Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:
Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.

Leave a Comment

Fields with * are required.

Картинка с кодом валидации
Пожалуйста введите символы с картинки. Регистр букв неважен.