Почему поле HTML в 1С не показывает календарь для ввода даты и как это исправить?

← На главную

При работе с полем HTML в управляемых формах 1С часто возникает задача добавить поле для ввода даты с удобным выпадающим календарем. Стандартный подход с использованием HTML5-тега <input type="date"> отлично работает в современных браузерах, таких как Google Chrome, но при отображении в 1С календарь не появляется, и пользователь видит лишь простое текстовое поле. Разберем, почему так происходит и как надежно решить эту задачу.

Причина проблемы: особенности встроенного браузера 1С

Основная причина кроется в движке, который платформа 1С использует для отображения HTML-содержимого. В зависимости от версии платформы и операционной системы, это может быть устаревшая версия WebKit или Trident (движок Internet Explorer). Проанализируем ситуацию подробнее:

Отсутствие нативных UI-компонентов. Встроенный (embedded) браузер в 1С — это урезанная версия. Даже если он синтаксически понимает тег <input type="date">, у него может просто отсутствовать графическая реализация всплывающего виджета календаря. Движок знает, что это поле для даты, но не умеет его "рисовать".
Конфликты отображения (z-index). Даже в более новых версиях платформы, использующих Chromium Embedded Framework (CEF), нативный календарь может работать некорректно. Он может открываться "под" окном HTML-поля или обрезаться его границами, так как поле HTML в 1С — это отдельный оконный элемент, и нативные всплывающие окна браузера могут конфликтовать с оконным менеджером 1С.

В результате мы получаем неработоспособный элемент. Решение — отказаться от нативного HTML5-календаря в пользу кастомного, реализованного с помощью JavaScript-библиотек. Такие календари отрисовываются внутри DOM-дерева самой HTML-страницы и не зависят от поддержки нативных виджетов браузером.

Решение с использованием jQuery UI Datepicker

Это классический и проверенный способ, который гарантированно будет работать даже в старых версиях платформы 1С. Рассмотрим по шагам, как его реализовать.

Шаг 1. Подготовка HTML-структуры

Вместо <input type="date"> будем использовать обычное текстовое поле <input type="text">. В код HTML-страницы необходимо подключить библиотеку jQuery и компоненты jQuery UI (сам скрипт и стили для него).


<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Календарь в 1С</title>
    <!-- Подключаем стили для jQuery UI -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!-- Подключаем jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Подключаем jQuery UI -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>

    <p>Выберите дату:</p>
    <!-- Наше поле для даты. Тип "text"! -->
    <input type="text" id="datepicker">

</body>
</html>

Шаг 2. Инициализация календаря с помощью JavaScript

Теперь нужно добавить небольшой скрипт, который найдет наше поле по его id ("datepicker") и "привяжет" к нему виджет календаря.


<script>
    // Ждем, пока вся страница загрузится
    $(function() {
        // Инициализируем datepicker для элемента с id="datepicker"
        $("#datepicker").datepicker();
    });
</script>

Этот скрипт нужно вставить в HTML-документ, например, перед закрывающим тегом </body>. Уже на этом этапе при клике на поле ввода будет появляться англоязычный календарь.

Шаг 3. Локализация и настройка

Чтобы календарь был на русском языке и более удобным, добавим файл локализации и несколько полезных опций. Файл локализации можно скачать с официального сайта jQuery UI или подключить по CDN.


<!-- Подключаем русскую локализацию для Datepicker -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/i18n/jquery-ui-i18n.min.js"></script>

<script>
    $(function() {
        // Устанавливаем русскую локаль по умолчанию
        $.datepicker.setDefaults($.datepicker.regional["ru"]);

        // Инициализируем datepicker с дополнительными опциями
        $("#datepicker").datepicker({
            changeMonth: true, // Разрешить выбор месяца из выпадающего списка
            changeYear: true,  // Разрешить выбор года из выпадающего списка
            dateFormat: "dd.mm.yy" // Формат даты, который будет отображаться в поле
        });
    });
</script>

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

Современные альтернативы jQuery UI

Библиотека jQuery UI, хотя и надежна, считается несколько устаревшей и "тяжелой". Если вы хотите использовать более современные и легковесные решения, обратите внимание на следующие варианты:

Flatpickr: Очень популярная и легкая библиотека без зависимостей от jQuery. Она предлагает современный дизайн, множество тем оформления, отличную документацию и простую локализацию.
Air Datepicker: Еще одна легковесная альтернатива, также без jQuery. Имеет приятный минималистичный дизайн и интуитивно понятное управление.

Принцип их использования тот же: подключаете CSS и JS файлы библиотеки, а затем инициализируете календарь для вашего <input type="text">.

Интеграция с 1С: как передать выбранную дату обратно

Важный момент: когда пользователь выбирает дату в JavaScript-календаре, 1С об этом ничего не знает. Чтобы передать выбранное значение в обработчик на стороне 1С, нужно организовать "мостик" между HTML-полем и платформой.

Это делается через вызов события, которое 1С может перехватить. Например, через событие ПриНажатии у невидимого элемента формы.

Шаг 1. На форме 1С

Добавьте на форму, рядом с полем HTML, невидимую кнопку (или декорацию-гиперссылку) с именем, например, СообщитьДату. Назначьте ей обработчик события ПриНажатии.

Шаг 2. В коде HTML/JavaScript

Модифицируем наш скрипт. Будем использовать событие onSelect виджета Datepicker, которое срабатывает в момент выбора даты. В этом обработчике мы будем программно "нажимать" на нашу скрытую кнопку в 1С.


<script>
    $(function() {
        $.datepicker.setDefaults($.datepicker.regional["ru"]);

        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy-mm-dd", // Используем стандартный формат для передачи
            onSelect: function(dateText) {
                // dateText содержит выбранную дату в формате "гггг-мм-дд"
                // Генерируем событие для 1С
                // "СообщитьДату" - это имя невидимого элемента на форме 1С
                window.parent.notify("СообщитьДату", dateText);
            }
        });
    });
</script>

Обратите внимание на использование window.parent.notify() — это современный способ вызова событий 1С из поля HTML (требует версии платформы, поддерживающей этот механизм). В более старых версиях можно было использовать обходные пути, например, через изменение document.title.

Шаг 3. В модуле формы 1С

Теперь осталось обработать это событие в 1С. В обработчике нашей скрытой кнопки мы получим строку с датой.


&НаКлиенте
Процедура СообщитьДатуПриНажатии(Элемент, ДанныеСобытия)
    // ДанныеСобытия будет содержать строку "гггг-мм-дд"
    Если ЗначениеЗаполнено(ДанныеСобытия) Тогда
        // Преобразуем строку в дату 1С
        // Формат строки должен соответствовать тому, что передает JS
        Год = Число(Лев(ДанныеСобытия, 4));
        Месяц = Число(Сред(ДанныеСобытия, 6, 2));
        День = Число(Прав(ДанныеСобытия, 2));
        
        ВыбраннаяДата = Дата(Год, Месяц, День);
        
        Сообщить("Пользователь выбрал дату: " + ВыбраннаяДата);
        // Здесь можно присвоить дату реквизиту формы
        // Объект.ДатаДокумента = ВыбраннаяДата;
    КонецЕсли;
КонецПроцедуры

Таким образом, мы построили полный цикл: отобразили надежный календарь, получили выбор пользователя и передали его в 1С для дальнейшей обработки. Этот подход обеспечивает предсказуемое поведение и отличный пользовательский опыт независимо от версии платформы 1С.

← На главную