Объединить два поля с типом дата в одно поле в виде периода

Покажу пример, как можно при помощи API для отображения стандартных виджетов, объединить два поля с типом дата в одно поле в виде периода.

Все подробности в видео, а ниже код, который был использован:

HTML:

    <div class="cust_column">
        <div style="display: flex;">
            <span class="cust_lable">Период отсутствия</span>
            <div>
                <%= UI.widget.contextValue('start_date', {
                    <!-- Обязательность поля -->
                    required: true,
                    <!--  Поле только для чтения -->
                    readonly: false,
                    <!-- Скрипт с вкладки "Скрипты", который вызываем при изменении значения -->
                    onChange: Scripts.onChangeStartDate,
                }) %>
            </div>
            <span class="cust_period">—</span>
            <div>
                <%= UI.widget.contextValue('end_date', {
                    required: true,
                    readonly: false,
                    onChange: Scripts.calcAmountDays,
                }) %>
            </div>
        </div>
    </div>


<style>
    .cust_lable {
        line-height: 1;
        color: #666;
        min-width: 168px;
        padding: 1rem 7px 1rem 0;
        margin-right: 14px;
    }
    .cust_column {
        display: flex;
        justify-content: space-between;
        margin: 1em 0;
    }
    .cust_period {
        margin: 0 16px;
        align-self: center;
        color: #666;
    }
</style>

Еще больше полезной информации в ТГ канале WhatDaELMA365