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

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

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

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

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

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

Мы заменили формат 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 год вперёд. При редактировании урока доступны поля, чтобы изменить эти границы, при создании эти поля скрыты как лишние. 

До:

После:

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

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

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

• JavaScript new Date() Returning NaN in IE or Invalid Date in Safari
• JavaScript Tutorial Date()
• JavaScript. Метод getMonth()