Ввод даты и времени используя jquery плагин datepicker c bootstrap 4

  • 2020-06-17
  • Дмитрий М.
  • 291

Ввод даты и времени используя jquery плагин datepicker c bootstrap 4

<script src="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/zebra_datepicker.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/css/bootstrap/zebra_datepicker.min.css"> <p> Перепробовав много плагинов наткнулся на тот, у которого есть совместимость с Bootstrap 4 - это плагин <noindex><a href="https://github.com/stefangabos/Zebra_Datepicker" target="_bank" rel="noindex">Zebra Datepicker</a></noindex>. </p> <p> Рассмотрим использование плагина на примере формы бронирования номера. Ниже будут приведены коды <b>HTML</b>, <b>CSS </b>и <b>JS</b><b> </b>для реализации данной задачи. </p> <pre class="line-numbers"><code class="language-markup">&lt;form class="booking__form" action="" method="POST"&gt; &lt;div class="row mx-0"&gt; &lt;div class="d-flex py-3"&gt; &lt;div class="form-group datepicker checkin"&gt; &lt;label for=""&gt;Заезд&lt;/label&gt; &lt;input type="text" class="form-control" readonly&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="d-flex py-3"&gt; &lt;div class="form-group datepicker checkout"&gt; &lt;label for=""&gt;Отъезд&lt;/label&gt; &lt;input type="text" class="form-control" readonly&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="d-flex"&gt; &lt;div class="input-group px-0"&gt; &lt;input type="submit" class="form-control" value="Забронировать"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/form&gt;</code> </pre> <p>Содержание файла стилей:</p> <pre class="line-numbers"><code class="language-css">.booking__form { height: 100%; background-color: #fff; -webkit-box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5); box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5) } .booking__form .form-group { position: relative; width: 220px; padding-left: 25px; padding-right: 25px; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .booking__form .form-group.hasDropdown { width: 150px } .booking__form .form-group:hover { cursor: pointer } .booking__form .form-group input { padding-top: 20px; height: calc(1.5em + 30px); border: none; background-color: transparent; font-weight: 600; font-size: 18px } .booking__form .form-group input:focus { outline: none; -webkit-box-shadow: none; box-shadow: none } .booking__form .form-group input:hover { cursor: pointer } .booking__form .form-group span.form-control { padding-top: 20px; height: calc(1.5em + 30px); border: 0; font-weight: 600; font-size: 18px } .booking__form .form-group.datepicker::after, .booking__form .form-group.hasDropdown::after { content: ''; position: absolute; right: -1.5px; top: 0; bottom: 0; width: 3px; background-color: rgba(0, 0, 0, 0.07) } .booking__form .form-group label { position: absolute; z-index: 5; left: calc(25px + .75rem); top: 2px; margin-bottom: 0; font-size: 14px; color: rgba(0, 0, 0, 0.5) } .booking__form .form-group .custom-select { height: calc(1.5em + 30px) } .booking__form .form-group .dropdown { position: absolute; z-index: 2; left: 0; width: 100%; visibility: hidden; opacity: 0; background-color: #fff; -webkit-transition: opacity .2s, visibility .2s, margin .2s; -o-transition: opacity .2s, visibility .2s, margin .2s; transition: opacity .2s, visibility .2s, margin .2s; top: auto; margin-top: 0; bottom: 100%; -webkit-box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.1) } .booking__form .form-group .dropdown ul { padding-left: 0; margin: 0; list-style: none } .booking__form .form-group .dropdown li a { display: block; padding: 12px 30px; padding-left: calc(25px + .75rem); font-weight: inherit; color: inherit; text-decoration: none } .booking__form .form-group .dropdown li.selected { font-weight: 700; background-color: #ffd40d } .booking__form .form-group.show-dropdown .dropdown { opacity: 1; visibility: visible } .booking__form .form-group svg { position: absolute; width: 24px; height: 24px; line-height: 1; top: 50%; right: 30px; z-index: 5; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } .booking__form input[type=submit].form-control { padding: .375rem .75rem; text-transform: uppercase; background-color: #ffd40d; border-radius: 0; font-weight: 700; height: 100%; } .datepicker .Zebra_DatePicker { bottom: 100%; top: auto; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) }</code> </pre> <p>Содержание для файла скриптов:</p> <pre class="line-numbers"><code class="language-javascript"> $(function() { $('.datepicker.checkin input').Zebra_DatePicker({ format: 'd M Y', container: $(".datepicker.checkin"), months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'November', 'December'], days: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'], show_select_today: 'Сегодня', lang_clear_date: 'Очистить', default_position: 'above', direction: true, onOpen: function(){ let el = $(this).parents('.datepicker').children('.Zebra_DatePicker'); $(el).css('left', '50%'); $(el).css('bottom', '100%'); $(el).css('top', 'auto'); } }); $('.datepicker.checkout input').Zebra_DatePicker({ format: 'd M Y', container: $(".datepicker.checkout"), months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'November', 'December'], days: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'], show_select_today: 'Сегодня', lang_clear_date: 'Очистить', default_position: 'above', direction: true, onOpen: function(){ let el = $(this).parents('.datepicker').children('.Zebra_DatePicker'); $(el).css('left', '50%'); $(el).css('bottom', '100%'); $(el).css('top', 'auto'); } }); });</code> </pre> <p> Получилась вот такая форма заявки: </p> <style> .booking__form { height: 100%; background-color: #fff; -webkit-box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5); box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5) } .booking__form .form-group { position: relative; width: 220px; padding-left: 25px; padding-right: 25px; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .booking__form .form-group.hasDropdown { width: 150px } .booking__form .form-group:hover { cursor: pointer } .booking__form .form-group input { padding-top: 20px; height: calc(1.5em + 30px); border: none; background-color: transparent; font-weight: 600; font-size: 18px } .booking__form .form-group input:focus { outline: none; -webkit-box-shadow: none; box-shadow: none } .booking__form .form-group input:hover { cursor: pointer } .booking__form .form-group span.form-control { padding-top: 20px; height: calc(1.5em + 30px); border: 0; font-weight: 600; font-size: 18px } .booking__form .form-group.datepicker::after, .booking__form .form-group.hasDropdown::after { content: ''; position: absolute; right: -1.5px; top: 0; bottom: 0; width: 3px; background-color: rgba(0, 0, 0, 0.07) } .booking__form .form-group label { position: absolute; z-index: 5; left: calc(25px + .75rem); top: 2px; margin-bottom: 0; font-size: 14px; color: rgba(0, 0, 0, 0.5) } .booking__form .form-group .custom-select { height: calc(1.5em + 30px) } .booking__form .form-group .dropdown { position: absolute; z-index: 2; left: 0; width: 100%; visibility: hidden; opacity: 0; background-color: #fff; -webkit-transition: opacity .2s, visibility .2s, margin .2s; -o-transition: opacity .2s, visibility .2s, margin .2s; transition: opacity .2s, visibility .2s, margin .2s; top: auto; margin-top: 0; bottom: 100%; -webkit-box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.1) } .booking__form .form-group .dropdown ul { padding-left: 0; margin: 0; list-style: none } .booking__form .form-group .dropdown li a { display: block; padding: 12px 30px; padding-left: calc(25px + .75rem); font-weight: inherit; color: inherit; text-decoration: none } .booking__form .form-group .dropdown li.selected { font-weight: 700; background-color: #ffd40d } .booking__form .form-group.show-dropdown .dropdown { opacity: 1; visibility: visible } .booking__form .form-group svg { position: absolute; width: 24px; height: 24px; line-height: 1; top: 50%; right: 30px; z-index: 5; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%) } .booking__form input[type=submit].form-control { padding: .375rem .75rem; text-transform: uppercase; background-color: #ffd40d; border-radius: 0; font-weight: 700; height: 100%; } .datepicker .Zebra_DatePicker { bottom: 100%; top: auto; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } </style> <div class="form-row"> <form class="booking__form" action="" method="POST"> <div class="row mx-0"> <div class="d-flex py-3"> <div class="form-group datepicker checkin"> <label for="">Заезд</label> <input type="text" class="form-control" readonly=""> </div> </div> <div class="d-flex py-3"> <div class="form-group datepicker checkout"> <label for="">Отъезд</label> <input type="text" class="form-control" readonly=""> </div> </div> <div class="d-flex"> <div class="input-group px-0"> <input type="submit" class="form-control" value="Забронировать"> </div> </div> </div> </form> </div> <script> $(function() { $('.datepicker.checkin input').Zebra_DatePicker({ format: 'd M Y', container: $(".datepicker.checkin"), months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'November', 'December'], days: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'], show_select_today: 'Сегодня', lang_clear_date: 'Очистить', default_position: 'above', direction: true, onOpen: function(){ let el = $(this).parents('.datepicker').children('.Zebra_DatePicker'); $(el).css('left', '50%'); $(el).css('bottom', '100%'); $(el).css('top', 'auto'); } }); $('.datepicker.checkout input').Zebra_DatePicker({ format: 'd M Y', container: $(".datepicker.checkout"), months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'November', 'December'], days: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'], show_select_today: 'Сегодня', lang_clear_date: 'Очистить', default_position: 'above', direction: true, onOpen: function(){ let el = $(this).parents('.datepicker').children('.Zebra_DatePicker'); $(el).css('left', '50%'); $(el).css('bottom', '100%'); $(el).css('top', 'auto'); } }); }); </script>

19.07.2020 13:12:37

Screenshot_6.png

Screenshot_6.png

Ввод даты и времени используя jquery плагин datepicker c bootstrap 4

Ввод даты и времени используя jquery плагин datepicker c bootstrap 4

Делал на заказ сайт для гостиницы, на котором соответственно была форма для бронирования номеров. Соответственно для формы требовалось сделать поле вводе даты и времени заезда гостей. Стилизацию полей input для ввода "Даты и Времени" обычно используют datepicker или datetimepicker плагины - эти плагины работают при поддержке библиотеки Jquery.

Но перепробовав несколько плагинов столкнулся с проблемой - почти все их них конфликтуют с библиотекой Bootstrap 4 версии и выше.

Перепробовав много плагинов наткнулся на тот, у которого есть совместимость с Bootstrap 4 - это плагин Zebra Datepicker.

Рассмотрим использование плагина на примере формы бронирования номера. Ниже будут приведены коды HTML, CSS и JS для реализации данной задачи.

<form class="booking__form" action="" method="POST">
    <div class="row mx-0">
        <div class="d-flex py-3">
            <div class="form-group datepicker checkin">
                <label for="">Заезд</label>
                <input type="text" class="form-control" readonly>
            </div>
        </div>
        <div class="d-flex py-3">
            <div class="form-group datepicker checkout">
                <label for="">Отъезд</label>
                <input type="text" class="form-control" readonly>
            </div>
        </div>
        <div class="d-flex">
            <div class="input-group px-0">
                <input type="submit" class="form-control" value="Забронировать">
            </div>
        </div>
    </div>
</form>

Содержание файла стилей:

.booking__form {
    height: 100%;
    background-color: #fff;
    -webkit-box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.5)
}
.booking__form .form-group {
    position: relative;
    width: 220px;
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.booking__form .form-group.hasDropdown {
    width: 150px
}

.booking__form .form-group:hover {
    cursor: pointer
}

.booking__form .form-group input {
    padding-top: 20px;
    height: calc(1.5em + 30px);
    border: none;
    background-color: transparent;
    font-weight: 600;
    font-size: 18px
}

.booking__form .form-group input:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

.booking__form .form-group input:hover {
    cursor: pointer
}

.booking__form .form-group span.form-control {
    padding-top: 20px;
    height: calc(1.5em + 30px);
    border: 0;
    font-weight: 600;
    font-size: 18px
}

.booking__form .form-group.datepicker::after,
.booking__form .form-group.hasDropdown::after {
    content: '';
    position: absolute;
    right: -1.5px;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: rgba(0, 0, 0, 0.07)
}

.booking__form .form-group label {
    position: absolute;
    z-index: 5;
    left: calc(25px + .75rem);
    top: 2px;
    margin-bottom: 0;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5)
}

.booking__form .form-group .custom-select {
    height: calc(1.5em + 30px)
}

.booking__form .form-group .dropdown {
    position: absolute;
    z-index: 2;
    left: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    background-color: #fff;
    -webkit-transition: opacity .2s, visibility .2s, margin .2s;
    -o-transition: opacity .2s, visibility .2s, margin .2s;
    transition: opacity .2s, visibility .2s, margin .2s;
    top: auto;
    margin-top: 0;
    bottom: 100%;
    -webkit-box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.1)
}

.booking__form .form-group .dropdown ul {
    padding-left: 0;
    margin: 0;
    list-style: none
}

.booking__form .form-group .dropdown li a {
    display: block;
    padding: 12px 30px;
    padding-left: calc(25px + .75rem);
    font-weight: inherit;
    color: inherit;
    text-decoration: none
}

.booking__form .form-group .dropdown li.selected {
    font-weight: 700;
    background-color: #ffd40d
}

.booking__form .form-group.show-dropdown .dropdown {
    opacity: 1;
    visibility: visible
}

.booking__form .form-group svg {
    position: absolute;
    width: 24px;
    height: 24px;
    line-height: 1;
    top: 50%;
    right: 30px;
    z-index: 5;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}
.booking__form input[type=submit].form-control {
    padding: .375rem .75rem;
    text-transform: uppercase;
    background-color: #ffd40d;
    border-radius: 0;
    font-weight: 700;
    height: 100%;
}
.datepicker .Zebra_DatePicker {
    bottom: 100%;
    top: auto;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

Содержание для файла скриптов:


$(function() {
    $('.datepicker.checkin input').Zebra_DatePicker({
        format: 'd M Y',
        container: $(".datepicker.checkin"),
        months: 	['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'November', 'December'],
        days: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
        show_select_today: 'Сегодня',
        lang_clear_date: 'Очистить',
        default_position: 'above',
        direction: true,
        onOpen: function(){
            let el = $(this).parents('.datepicker').children('.Zebra_DatePicker');
            $(el).css('left', '50%');
            $(el).css('bottom', '100%');
            $(el).css('top', 'auto');
        }
    });
    $('.datepicker.checkout input').Zebra_DatePicker({
        format: 'd M Y',
        container: $(".datepicker.checkout"),
        months: 	['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'November', 'December'],
        days: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
        show_select_today: 'Сегодня',
        lang_clear_date: 'Очистить',
        default_position: 'above',
        direction: true,
        onOpen: function(){
            let el = $(this).parents('.datepicker').children('.Zebra_DatePicker');
            $(el).css('left', '50%');
            $(el).css('bottom', '100%');
            $(el).css('top', 'auto');
        }
    });
});

Получилась вот такая форма заявки:



Статья была полезна? Поблагодарите автора.

Возврат к списку

Другие статьи