Проверка (сравнение) двух временных дат в Joomla4

1. Введение
2. XML-файл формы в Joomla4
3. edit.php файл шаблона Joomla4
   
   1. Подгрузка JavaScript файла в вывод шаблона Joomla4
   2. Языковые константы для JavaScript шаблона Joomla4
   3. Валидация формы с помощью JavaScript шаблона Joomla4
4. Файл joomla.asset.json
5. Файл JavaScript шаблона Joomla4

Введение

Этот код был создан для приложения на Joomla4, в котором есть события с датами начала и окончания, которые должны быть разделены менее чем на 30 дней. Код предназначен для формы ввода данных Администратором сайта.

В качестве аргумента в этом примере события описываются как лагеря (camps). Это могут быть фестивали, скачки, конференции или что-то еще, что требует определения даты их начала и окончания.

XML-файл формы в Joomla4

Даты являются обязательными полями (required="required") ввода дат (type="calendar"). Обратите внимание, что проверка передается как пользовательский класс, начинающийся с validate-.

		<!-- ... other elements ... -->
		<field
			name="date_start"
			type="calendar"
			label="COM_THINGY_CAMP_DATE_START_LABEL"
			description="COM_THINGY_CAMP_DATE_START_DESC"
			class="w-25 validate-date_start"
			required="required"
			>
		</field>

		<field
			name="date_end"
			type="calendar"
			label="COM_THINGY_CAMP_DATE_END_LABEL"
			description="COM_THINGY_CAMP_DATE_END_DESC"
			class="w-25 validate-date_end"
			required="required"
			>
		</field>
		<!-- ... other elements ... -->

edit.php файл шаблона Joomla4

Подгрузка JavaScript файла в вывод шаблона Joomla4

Файл шаблона формы обычно edit.php. Это место, чтобы загрузить необходимые JavaScript скрипты. После операторов use вставьте:

$wa = $this->document->getWebAssetManager();
$wa->useScript('keepalive')
	->useScript('form.validate')
	->useScript('com_thingy.camp');

Чтобы это сработало, вам нужно настроить установку расширения Joomla4 так, чтобы ресурсы js и css попали в папку media сайта с файлом joomla.asset.json. Как этого добиться, вам придётся посмотреть в другом месте. В этом случае загруженный файл JavaScript должен попадать в папку media/com_thingy/js/camp.js.

Языковые константы для JavaScript шаблона Joomla4

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

Text::script('COM_THINGY_JS_ERROR_DATES_WRONG_ORDER', true);
Text::script('COM_THINGY_JS_ERROR_DATES_TOO_FAR_APART', true);

Эти строки создают встроенные операторы скрипта, содержащие пары ключа и перевода. Фактические переводы содержатся в вашем языковом ini-файле вместе со всеми другими переводами строк вашего расширения.

Валидация формы с помощью JavaScript шаблона Joomla4

Для работы кода JavaScript тег формы form должен содержать класс class="form-validate":

<form action="<?php echo Route::_('index.php?option=com_thingy&view=camp&layout=edit&id=' . (int) $this->item->id); ?>"
	class="form-validate" method="post" name="adminForm" id="adminForm">

Файл joomla.asset.json

Файл joomla.asset.json находится в каталоге media с медиафайлами компонента (media/com_thingy/joomla.asset.json) и, помимо прочего, содержит следующее:

    ,{
      "name": "com_thingy.camp",
      "type": "script",
      "uri": "com_thingy/camp.js",
      "dependencies": [
        "core"
      ],
      "attributes": {
        "defer": true
      }
    }

Файл JavaScript шаблона Joomla4

В этом примере события должны происходить с интервалом менее 30 дней. Это может быть настраиваемое значение, но здесь оно жестко закодировано.

// ===== validation =====

document.addEventListener('DOMContentLoaded', (event) => {

	document.formvalidator.setHandler('date_start', function(value) {
		const regex = /^\d{4}-\d{2}-\d{2}$/;
		return regex.test(value);
	});

	document.formvalidator.setHandler('date_end', function(value) {
		const regex = /^\d{4}-\d{2}-\d{2}$/;
		if (!regex.test(value)) {
			return false;
		}
		let date_start = document.getElementById('jform_date_start').value;
		if (value <= date_start) {
			alert (Joomla.Text._('COM_THINGY_JS_ERROR_DATES_WRONG_ORDER'));
			return false;
		}
		date_start = date_start.split('-');
		date_start = new Date(date_start[0], date_start[1] - 1, date_start[2]); // milliseconds
		let date_end = value.split('-');
		date_end = new Date(date_end[0], date_end[1] - 1, date_end[2]); // milliseconds
		let diff = (date_end - date_start)/(1000*60*60*24);
		if (diff > 30) {
			alert (Joomla.Text._('COM_THINGY_JS_ERROR_DATES_TOO_FAR_APART'));
			return false;
		}
		return true;
	});
	//... more validation rules ...
});

Вы, вероятно, могли бы улучшить это. Сделать регулярное выражение даты глобальной константой? Сделать продолжительность события (разницу между датами начала и окончания) настраиваемым? Ну та возьмите и сделайте это! ;)

Перевод с английского:
https://docs.joomla.org/Joomla_4_Tips_and_Tricks:_Check_two_dates

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)