Значения даты и времени используются для многих важных функций, таких как поиск, проверка и генерация отчетов. В веб-приложениях нет стандартного формата дат, поскольку люди в разных часовых поясах и странах предпочитают разные форматы. Поэтому адаптация к любому формату даты может быть проблемой для разработчика переднего плана. Сегодня мы увидим, как эффективно использовать функции даты и времени в JavaScript.
Начало работы с объектом Date
Базовый конструктор Date не принимает параметров и инициализируется текущей датой, как показано ниже.
Мы ясно видим, что итоговая дата зависит от вашего местного часового пояса, так как отображаются два разных часовых пояса.
var today = new Date(); // Thu Feb 27 2013 15:15:25 GMT+1000 (EST) // Thu Feb 27 2013 10:45:25 GMT+0530 (IST)
Существует два основных способа использования объекта Date :
- Пользовательские даты могут быть созданы путем предоставления формата или конкретной даты в качестве параметра для конструктора
Date.date1 = new Date ( "January 6, 2013" ); - Затем мы можем работать с созданными датами, используя десятки встроенных функций. Следующий код показывает, как извлечь каждый компонент даты, используя доступные функции.
date1 = new Date ( "January 6, 2013" ); date = date1.getDate(); year = date1.getFullYear(); month = date1.getMonth();
Давайте обсудим некоторые основные вещи, которые вы должны знать при использовании функций даты. Как правило, мы будем использовать компоненты date, month и year. Даты могут быть от 1 до 31, а месяцы — от 0 до 11. Следующий код создает объект Date и устанавливает день месяца 20-го числа.
date1 = new Date (); date1.setDate(20);
Также вам разрешается использовать числа, которые не попадают в вышеуказанные диапазоны, для генерации будущих или прошлых дат. Рассмотрим следующий пример, в котором используются значения за пределами указанных диапазонов.
date1 = new Date (); date1.setDate(-1); date1.setMonth(-1);
Предположим, что текущая дата — 20 февраля 2013 года. Приведенный выше код изменится со второй по последнюю дату предыдущего месяца предыдущего года, который будет 30 декабря 2012 года. Аналогично, вы можете использовать значения больше 31 для даты и 11 за месяц, чтобы сгенерировать будущие даты. Узнав, как использовать объект Date для генерации дат, используя различные методы, давайте посмотрим, как мы можем форматировать даты.
Форматирование даты
Единого общего формата для дат не существует, и нам нужно показывать строки даты в разных форматах в зависимости от ситуации. По сути, это двусторонний процесс, в котором мы должны сначала преобразовать строку в объект Date а затем преобразовать ее обратно в строку в формате, который мы предпочитаем. Начальный процесс состоит из преобразования строки, предоставленной пользовательским вводом, в объект Date . Давайте рассмотрим некоторые из распространенных методов ввода данных для дат.
Раньше у нас были поля с простым текстом или три поля параметров для выбора месяца, дня и года. В настоящее время элементы пользовательского ввода значительно улучшены, и средства выбора даты стали современным способом выбора дат. Помимо сборщиков дат, календари JavaScript являются широко используемым компонентом, который мы должны рассмотреть в этом начальном процессе. Даты этих компонентов извлекаются в виде строк. Если строка даты содержит общий формат, мы можем просто создать объект Date , передав значение поля ввода, как показано ниже.
// Assume date is 2013-02-15 var current = $("start_date").value(); var date1=new Date(current);
Если вы работаете с календарями, дата будет указана в качестве атрибута данных HTML5 вместо свойства value. Пример этого показан ниже.
var current = $ ("start_date"). attr ("date-current"); var date1 = новая дата (текущая);
Большинство сборщиков дат и календарей предоставляют широкий спектр предопределенных форматов, которые вы можете использовать. Но, если компонент не предоставляет общий формат или дата указана в виде кода, тогда мы должны создать объект Date вручную, используя функции, как показано ниже.
var month = {"JAN":"01","FEB":"02"}; var current = "2013-FEB-22"; var date_components = current.split("-"); var current_year = date_components[0]; var current_month= month[date_components[1].toString()]; var current_day = date_components[2]; current = current_year+"-"+current_month+"-"+current_day; var date11=new Date(current); document.write(date1);
Поскольку мы знаем значение каждого компонента, можно разбить строку даты и создать общий формат для анализа объекта Date .
Теперь мы преобразовали строку даты, предоставленную пользователем, в объект JavaScript Date для обработки проверок, сравнений и всего, что требуется приложению. Наконец, мы должны преобразовать его обратно в строку, чтобы сохранить или отобразить в веб-браузере. Это преобразование намного проще, чем предыдущее, поскольку мы можем использовать функции для разбиения компонентов. Я думаю, что у вас должна быть общая функция преобразования для повторного использования во всех проектах. Давайте разработаем простую функцию для преобразования дат в различные строковые форматы.
var date=new Date(); var format = "YYYY-MMM-DD DDD"; document.write(dateConvert(date,format)); function dateConvert(dateobj,format){ var year = dateobj.getFullYear(); var month= ("0" + (dateobj.getMonth()+1)).slice(-2); var date = ("0" + dateobj.getDate()).slice(-2); var hours = ("0" + dateobj.getHours()).slice(-2); var minutes = ("0" + dateobj.getMinutes()).slice(-2); var seconds = ("0" + dateobj.getSeconds()).slice(-2); var day = dateobj.getDay(); var months = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"]; var dates = ["SUN","MON","TUE","WED","THU","FRI","SAT"]; var converted_date = ""; switch(format){ case "YYYY-MM-DD": converted_date = year + "-" + month + "-" + date; break; case "YYYY-MMM-DD DDD": converted_date = year + "-" + months[parseInt(month)-1] + "-" + date + " " + dates[parseInt(day)]; break; } return converted_date; }
Здесь у нас есть функция, которая принимает объект Date и желаемый формат в качестве параметров. Внутри функции все компоненты даты назначаются в переменные с помощью функций. Затем у нас есть оператор switch для выбора формата. Этот вид полезной функции многократного использования может быть очень эффективным для разработки приложений. Когда вас попросят предоставить новый формат, просто добавьте еще одну запись в оператор switch и верните компоненты в соответствии с новым форматом. Выходные данные кода будут 2013-FEB-17 SUN . Кроме того, вы можете конвертировать его в свои предпочтительные форматы для отображения.
Сравнение дат
Поиск записей между заданным диапазоном дат является одним из наиболее распространенных вариантов использования дат в веб-приложениях. Во-первых, мы должны преобразовать строку даты, предоставленную пользователем, в объект Date прежде чем думать о сравнениях. Давайте сравним две даты, созданные разными методами, как показано ниже. Для сравнения дат целесообразно использовать метод getTime() . Предположим, что эти даты были сгенерированы 18 февраля 2013 года.
var date1=new Date(); var date2=new Date("2013-02-18"); if(date1.getTime() == date2.getTime()){ console.log("Dates are equal"); }
Хотя оба объекта содержат одну и ту же дату, они не равны. date1 содержит текущую дату и будет включать текущее время. Но date2 не будет содержать текущего времени и, следовательно, не будет совпадать.
Решение состоит в том, чтобы установить время обоих объектов в стандартном формате времени. Я видел, как многие разработчики установили время для 00:00:00 для объекта текущей даты, как показано ниже.
var date1=new Date(); date1.setHours(0,0,0,0); var date2=new Date("2013-02-18");
Итак, date1 будет что-то вроде Mon Feb 18 2013 00:00:00 GMT+0530 (IST) . Но он все равно не совпадает, так как date2 будет содержать время в вашем местном часовом поясе, которое для меня GMT + 5.30. Если вы не хотите учитывать время, лучше всего установить обе даты в одно и то же время, как показано ниже.
var date1=new Date(); date1.setHours(0,0,0,0); var date2=new Date("2013-02-17"); date2.setHours(0,0,0,0);
Мы можем использовать ту же технику для сравнения диапазонов дат. Убедитесь, что для всех других компонентов обеих дат установлено одинаковое значение, и проверьте только те компоненты, которые различаются в зависимости от даты.
Должны ли мы использовать библиотеку манипуляций с датами?
На протяжении всей статьи мы обсуждали, как работает объект Date , и необходимые функции, которые мы можем использовать для манипулирования датами. Выбор библиотеки манипулирования датами — это то, что вы должны решить исходя из своих требований Простая обработка даты может быть легко сделана без библиотеки. Но если вам нужна сложная функциональность, я предлагаю вам использовать библиотеку манипулирования датами , такую как Datejs , которая предоставляет возможность реализовывать сложные функции посредством вызова вложенных функций.
И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам SitePoint и интерактивным онлайн-курсам, таким как Jump Start JavaScript .
Комментарии к этой статье закрыты. Есть вопрос по теме? Почему бы не спросить об этом на наших форумах ?