Введение

В веб-разработке сбор и обработка вводимых пользователями данных о дате и времени является распространенным требованием. HTML5 предлагает два типа ввода, специально предназначенных для этой цели: «datetime» и «datetime-local». Хотя они могут звучать одинаково, между ними есть явные различия. В этой статье мы рассмотрим эти различия и предоставим примеры кода различных методов для работы с входными данными «datetime» и «datetime-local».

1. Тип ввода даты и времени

Тип ввода «datetime» используется для записи даты и времени в определенном часовом поясе. Он отображает текстовое поле, которое позволяет пользователям вводить информацию о дате и времени. Вот пример того, как его использовать:

<input type="datetime" name="eventDateTime" />

Для обработки отправленного значения на стороне сервера вы можете использовать различные языки программирования и библиотеки. Вот пример использования Python и платформы Flask:

from flask import Flask, request
app = Flask(__name__)
@app.route("/submit", methods=["POST"])
def submit_event():
    event_datetime = request.form.get("eventDateTime")
    # Process the event_datetime value
    return "Event submitted successfully."
if __name__ == "__main__":
    app.run()

2. Тип ввода datetime-local

С другой стороны, тип ввода «datetime-local» фиксирует дату и время без учета какой-либо информации о часовом поясе. Это позволяет пользователям вводить дату и время в своем местном часовом поясе. Вот пример:

<input type="datetime-local" name="eventDateTimeLocal" />

Как и в предыдущем примере, вы можете обработать отправленное значение на стороне сервера, используя предпочитаемый вами язык программирования. Вот пример использования Node.js и Express:

const express = require("express");
const app = express();
app.use(express.urlencoded({ extended: true }));
app.post("/submit", (req, res) => {
  const eventDateTimeLocal = req.body.eventDateTimeLocal;
  // Process the eventDateTimeLocal value
  res.send("Event submitted successfully.");
});
app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

3. Методы JavaScript

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

• Разбор значения даты и времени в объект Date:

const datetimeString = "2024-02-09T10:30";
const datetime = new Date(datetimeString);
console.log(datetime); // Output: Tue Feb 09 2024 10:30:00 GMT+0000 (Coordinated Universal Time)

• Форматирование значения даты и времени в определенный строковый формат:

const datetime = new Date();
const formattedDatetime = datetime.toLocaleString("en-US", {
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
});
console.log(formattedDatetime); // Output: February 9, 2024, 10:30 AM

• Проверка значения даты и времени:

function isValidDatetime(datetimeString) {
  const datetime = new Date(datetimeString);
  return !isNaN(datetime.getTime());
}
console.log(isValidDatetime("2024-02-09T10:30")); // Output: true
console.log(isValidDatetime("invalid-datetime")); // Output: false

Заключение

Подводя итог, можно сказать, что типы входных данных «datetime» и «datetime-local» служат разным целям при захвате входных данных даты и времени в веб-разработке. Первый учитывает конкретный часовой пояс, а второй фиксирует дату и время в местном часовом поясе пользователя. Понимание этих различий и использование соответствующих методов обработки и манипулирования этими входными данными будет способствовать улучшению пользовательского опыта.

Реализуя примеры и методы, обсуждаемые в этой статье, вы сможете уверенно работать как с входными данными «datetime», так и с «datetime-local» в своих проектах веб-разработки.