Диалог выбора даты на 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 Платные (руб)

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

2400 руб.

29.06.2020    14739    18    4    

25

Условное оформление элементов форм в пользовательском режиме 1С (управление видимостью и доступностью элементов форм)

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

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

6000 руб.

18.01.2022    7615    1    2    

6

Редактор граф

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

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

1500 руб.

06.10.2020    8733    6    7    

8

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

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

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

2 стартмани

10.04.2023    7327    139    acces969    31    

106

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

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

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

1 стартмани

05.07.2022    2066    kalyaka    2    

19

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

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

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

3600 руб.

29.04.2022    10497    1    5    

9

Программный интерфейс для доработки форм

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

Реализовал простой способ программного создания новых элементов, команд и реквизитов на форме.

25.11.2021    7727    AtamanovYS    19    

129

[mobile] Переносим HTML интерфейс на 1С

Работа с интерфейсом Мобильная разработка Платформа 1С v8.3 Мобильная платформа Конфигурации 1cv8 Бесплатно (free)

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

02.11.2020    14956    leobrn    82    

113