Как заставить выбор даты отображать сегодняшнюю дату в новой форме с помощью PHP

На чтение 5 мин Опубликовано 15.10.2024

Содержание

Вопрос или проблема
Ответ или решение
1. Обновление PHP кода
2. Обновление HTML
3. Настройка Datepicker
4. Валидность и очищение поля
Заключение

Вопрос или проблема

Я использую PHP 8.2 и datepicker.

У меня есть форма. В ней два поля даты, которые оба используют класс datepicker. Когда страница загружается, форма пуста (новая запись). Но поля даты по умолчанию устанавливаются на 1970-01-01. Как я могу заставить эти поля даты быть либо: 1) текущей датой (сегодняшней датой), либо 2) пустыми?

В коде (ниже) я использую value="<?= isset($start_date) ? $start_date : $today; ?>", так что если форма не проходит валидацию, я снова показываю форму с введёнными значениями.

Код:

// из новой формы

<?php
$today = date('m/d/Y');
?>

<div class="row">
    <div class="medium-12 columns">
      <label for="start_date"><strong>Дата начала:</strong>
        <input type="text" class="datepicker" name="start_date" id="start_date" value="<?= isset($start_date) ? $start_date : $today; ?>" />
      </label>
    </div>
  </div>

  <div class="row">
    <div class="medium-12 columns">
      <label for="end_date"><strong>Дата окончания:</strong>
      <input type="text" class="datepicker" name="end_date" id="end_date" value="<?= isset($end_date) ? $end_date : $today; ?>" />
      </label>
    </div>
  </div>

....

<script>
  $( function() {
    $( ".datepicker" ).datepicker();
  });
</script>

Я пытался следовать тому, что видел в одной теме, но это не сработало:

<script>
  $( function() {
    $( ".datepicker" ).datepicker({
      defaultDate: new Date(),
      dateFormat: 'mm/dd/yyyy'
    });
  });
</script>

// и 

<script>
  $( function() {
    let date = new Date().toLocaleDateString("en", {year:"numeric", day:"2-digit", month:"2-digit"});

    $( ".datepicker" ).datepicker({ defaultDate: date });

  });
</script>

Спасибо за любую помощь.

Всего хорошего!

Ответ или решение

Чтобы настроить поля даты в вашей форме на отображение сегодняшней даты с помощью PHP и datepicker, нужно выполнить несколько шагов. В вашей текущей реализации вы уже используете PHP и jQuery для настройки полей ввода даты. Давайте разберем, как правильно настроить отображение сегодняшней даты.

1. Обновление PHP кода

Начнем с изменения PHP кода, который отвечает за вывод текущей даты. Можно использовать date('Y-m-d'), чтобы получить дату в формате, который будет совместим с HTML полем ввода (input type="date"). Для полей типа text, используйте формат m/d/Y, как это указано в вашем примере.

Вот как это можно сделать:

<?php
$today = date('m/d/Y'); // Формат для отображения на экране
$default_start_date = isset($start_date) ? $start_date : $today;
$default_end_date = isset($end_date) ? $end_date : '';
?>

2. Обновление HTML

Теперь обновим HTML форму, чтобы использовать вычисленные значения $default_start_date и $default_end_date:

<div class="row">
    <div class="medium-12 columns">
      <label for="start_date"><strong>Start Date:</strong>
        <input type="text" class="datepicker" name="start_date" id="start_date" value="<?= htmlspecialchars($default_start_date); ?>" />
      </label>
    </div>
</div>

<div class="row">
    <div class="medium-12 columns">
      <label for="end_date"><strong>End Date:</strong>
        <input type="text" class="datepicker" name="end_date" id="end_date" value="<?= htmlspecialchars($default_end_date); ?>" />
      </label>
    </div>
</div>

3. Настройка Datepicker

Теперь обновим ваш JavaScript код для инициализации datepicker, так чтобы он корректно отображал сегодняшнюю дату при загрузке страницы:

<script>
  $(function() {
    $(".datepicker").datepicker({
      dateFormat: 'mm/dd/yy', // Настраиваем формат даты
      defaultDate: new Date() // Устанавливаем сегодняшнюю дату по умолчанию
    });
  });
</script>

4. Валидность и очищение поля

Если необходимо, чтобы одно из полей отображалось пустым при новой записи, то можно контролировать это с помощью переменных PHP, как показано в примере выше с $default_end_date, который в данном случае будет пустым.

Таким образом, итоговый код будет выглядеть следующим образом:

<?php
$today = date('m/d/Y'); // Сегодняшняя дата в нужном формате
$default_start_date = isset($start_date) ? $start_date : $today;
$default_end_date = isset($end_date) ? $end_date : '';
?>

<div class="row">
    <div class="medium-12 columns">
      <label for="start_date"><strong>Start Date:</strong>
        <input type="text" class="datepicker" name="start_date" id="start_date" value="<?= htmlspecialchars($default_start_date); ?>" />
      </label>
    </div>
</div>

<div class="row">
    <div class="medium-12 columns">
      <label for="end_date"><strong>End Date:</strong>
        <input type="text" class="datepicker" name="end_date" id="end_date" value="<?= htmlspecialchars($default_end_date); ?>" />
      </label>
    </div>
</div>

<script>
  $(function() {
    $(".datepicker").datepicker({
      dateFormat: 'mm/dd/yy',
      defaultDate: new Date()
    });
  });
</script>

Заключение

Теперь при загрузке формы, поле "Start Date" будет отображать сегодняшнюю дату, а поле "End Date" – будет пустым, если не указано иное. Уничтожение старого кода и правильное форматирование важны для предотвращения ошибок при работе с форматами дат. Убедитесь, что ваша библиотека jQuery и jQuery UI загружены корректно для работы datepicker. ت