Диалог выбора даты на JS без зависимостей. Отображалки от kuzkov.info

10.04.23

Разработка - Работа с интерфейсом

Диалог выбора даты на чистом js для встройки в обозреватели. Методы и свойства отображалки сделаны в 1Сном стиле и будут понятны почти любому 1Снику. Выбор данных в любом формате из возможных: Дата, Время, ДатаВремя. Аналог 1Сной отображалки "Календарь".

Скачать файлы

Наименование Файл Версия Размер
Диалог выбора даты на JS без зависимостей. Отображалки от kuzkov.info:
.zip 22,82Kb
1
.zip 22,82Kb 1 Скачать

Приветствую уважаемое сообщество!

В этой статье будем рассматривать случай отображалки диалога выбора даты на js в обозревателе.

 
Отступление 1 

 

 

Данная статья является кратким конспектом ролика на ютубе.
Если есть сложности со встроенным игрателем, то прямая ссылка для плюсануть, написать комментарий и подписаться: https://www.youtube.com/watch?v=FWKsMxJ_EPU
 



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

Особенности

  • Выбор данных в любом формате из возможных: Дата, Время, ДатаВремя;
  • Внутренний код js написан на русском языке с комментариями;
  • Методы и свойства на русском языке;
  • Написано на родном чистом js без зависимостей;


Методы и свойства

Открыть()
Закрыть()

Открыто
ПолеДанных
ВыбраннаяДата
ВыборДня
ВыборВремени
СобытиеПриВыборе


Метод Открыть()

Диалог должен открываться при вызове метода Открыть().
Диалог должен открываться под dom элементом ПолеДанных.

Если указана ВыбраннаяДата, то эта дата должна быть выделена стилем.
Текущий отображаемый месяц должен быть месяцем выбранной даты.

Текущая дата должна выделиться автоматически в открытой форме.
Если ВыбраннаяДата пустая, то текущий отображаемый месяц должен быть месяцем текущей даты.


Метод  Закрыть()

Метод должен закрыть диалог выбора даты.


Свойства

Открыто
Тип: Булево
Истина = окно отображалки открыто
Ложь = окно отбражалки закрыто


ПолеДанных

Тип: dom элемент
Отображалка должна показываться под этим dom элементом.
При открытии данные должны браться из этого поля ввода


ВыбраннаяДата

Тип: Дата
Только чтение.
Объект js даты с датой и временем.
Если из поля была прочитана дата ДатаВремя, то возвращаться после выбора должна новая дата со старым временем.


ВыборДня

Тип: Булево
Если Истина, тогда должна отображаться часть отображалки для выбора дня.


ВыборВремени

Тип: Булево
Если Истина, тогда должна отображаться часть отображалки для выбора времени.


СобытиеПриВыборе

Тип: Строка
Полное имя функции, которая должна быть вызвана при нажатии кнопки выбора.


Сценарии применения

Создание и открытие диалога.
 

// Эта функция вызывается при нажатии кнопки выбора даты.
function ВыбратьДеньВремя(){
    // Определение элемента формы как якоря для выбиралки даты и времени
    эфПолеДатыНачала = document.getElementById('ПолеПоказаВыбраннойДатыВремени');
    // Если выбиралка даты создается первый раз
    if (эфПолеДатыНачала.ДиалогВыбораДаты == undefined) {
        var двДата              = new ДиалогВыбораДаты;
        двДата.СобытиеПриВыборе = ОбработкаВыбораДня;
        двДата.ПолеДанных       = эфПолеДатыНачала;
        двДата.ВыбраннаяДата    = new Date(2023, 1, 2, 11, 22, 33);
        двДата.ВыборДня         = true;
        двДата.ВыборВремени     = true;
        двДата.Открыть();
    } else if (эфПолеДатыНачала.ДиалогВыбораДаты.Открыто ) {
        // Если диалог открыт, то при нажатии кнопки закроем выбор даты
        эфПолеДатыНачала.ДиалогВыбораДаты.Закрыть();
    }
};

function ОбработкаВыбораДня(ДиалогВыбораДаты){
    // Берем выбранную дату из объекта диалога выбора даты
    // Может нужно будет форматировать для приведения к строке для показа в поле данных
    console.log(ДиалогВыбораДаты.ВыбраннаяДата); 
    // Установка выбранной даты и времени
    эфПолеДатыНачала.value = "" + ДиалогВыбораДаты.ВыбраннаяДата.getFullYear() + "-" + (ДиалогВыбораДаты.ВыбраннаяДата.getMonth() + 1) + "-" + ДиалогВыбораДаты.ВыбраннаяДата.getDate();
    // Закроем выбор даты
    ДиалогВыбораДаты.ПолеДанных.ДиалогВыбораДаты.Закрыть();
};



Покажем на примерах

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



[Экроснимок 1. Открытие диалога]

Текущая дата отображается в красной рамке.

При нужности выбора даты и времени, включаем свойство "двДата.ВыборВремени = true" и включается блок выбора времени.



[Экроснимок 2. Выбора даты со временем]

Если нужно выбрать только время, то через "двДата.ВыборДня = false" отключаем выбор даты.


[Экроснимок 3. Выбор времени]



Приложенный пример

В приложенном примере для скачки вы можете посмотреть способ подключения и попробовать отображалку в действии.
Если что-то непонятно, то смотрите видео на ютубе на канале.

Версия 1С, с которой работаю при разработке: разработку веду на 1С 8.3.10.

Вопросы, пожелания и замечания прошу писать в личку учетки.

На этом пока все :)

Вопросы, пожелания и замечания прошу писать в личку учетки.

Если хотите быть в курсе, подписывайтесь на наш ютуб-канал, чтобы все видеть первыми.

Всем лучи добра !

Кузьков.инфо kuzkov.info json js верстка веб-формы веб-морды веб формы http веб 1с веб отображалки выбор даты диалог

См. также

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    61800    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    54407    16    21    

42

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    16700    21    4    

35

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    10743    750    elcoan    45    

106

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

2 стартмани

10.04.2023    9623    151    acces969    31    

118

Модель состояния для MVC

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    3669    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12085    1    5    

10