Календарь в input для ввода даты

18 февраля 2020 HTML JavaScript Bootstrap, jQuery

Чтобы при вводе даты в input выпадал удобный календарик можно воспользоваться двумя способами: стандартным полем HTML5 type="date" или JavaScript библиотекой Bootstrap Datepicker. Рассмотрим подробнее эти способы в этой статье.

Календарь для input HTML5

Просто применяем у input атрибут type="date" или type="datetime-local":

И получаем следующее:

Этот вариант самый простой, но поддерживается не всеми браузерами. Поэтому я предпочитаю использовать JavaScript библиотеку Datepicker.

Календарь для input с помощью Bootstrap DateTimePicker

Нам понадобится:

1. jQuery
2. Moment.js
3. Bootstrap.js
4. Bootstrap Datepicker js
5. Bootstrap CSS
6. Bootstrap Datepicker CSS
7. Файлы локалей библиотеки moment.

Скачать библиотеку moment можно отсюда.

Подключаем скрипты к проекту:

Использование с минимальной настройкой:

    
        
            
                
                    
                    
                        
                    
                
            
        
        
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        
    

Только время

    
        
            
                
                    
                    
                        
                    
                
            
        
        
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'LT'
                });
            });
        
    

Только дата

    
        
            
                
                    
                    
                        
                    
                
            
        
        
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'LT'
                });
            });
        
    

Поле без иконки

    
        
            
        
        
            $(function () {
                $('#datetimepicker4').datetimepicker();
            });
        
    

Включение/выключение дат

    
        
            
                
                    
                    
                        
                    
                
            
        
        
            $(function () {
                $('#datetimepicker5').datetimepicker({
                    defaultDate: "11/1/2013",
                    disabledDates: [
                        moment("12/25/2013"),
                        new Date(2013, 11 - 1, 21),
                        "11/22/2013 00:53"
                    ]
                });
            });
        
    

Дата от и до

    
        
            
                
                
                    
                
            
        
    
    
        
            
                
                
                    
                
            
        
    


    $(function () {
        $('#datetimepicker6').datetimepicker();
        $('#datetimepicker7').datetimepicker({
            useCurrent: false //Important! See issue #1075
        });
        $("#datetimepicker6").on("dp.change", function (e) {
            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker7").on("dp.change", function (e) {
            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });
    });

Кастомные иконки

    
        
            
                
                
                    
                    
                
            
        
    
    
        $(function () {
            $('#datetimepicker8').datetimepicker({
                icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down"
                }
            });
        });
    

Режимы просмотра календаря

    
        
            
                
                
                    
                    
                
            
        
    
    
        $(function () {
            $('#datetimepicker9').datetimepicker({
                viewMode: 'years'
            });
        });
    

Минимальный вид

    
        
            
                
                
                    
                    
                
            
        
    
    
        $(function () {
            $('#datetimepicker10').datetimepicker({
                viewMode: 'years',
                format: 'MM/YYYY'
            });
        });
    

Выключить дни недели

    
        
            
                
                
                    
                    
                
            
        
    
    
        $(function () {
            $('#datetimepicker11').datetimepicker({
                daysOfWeekDisabled: [0, 6]
            });
        });
    

В линию

    
        
            
                
            
        
    
    
        $(function () {
            $('#datetimepicker12').datetimepicker({
                inline: true,
                sideBySide: true
            });
        });