closeup-of-computer-laptop-screen-showing-calenda-with-date-and-month

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

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

datepicker2-5530444

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

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

 

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

datepicker1-2936956

Этот вариант самый простой, но поддерживается не всеми браузерами. Поэтому я предпочитаю использовать 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();
            });
        
    

datepicker2-5530444

Только время

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

datepicker3-6436755

Только дата

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

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

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

datepicker4-4486834

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

    
        
            
                
                    
                    
                        
                    
                
            
        
        
            $(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);
        });
    });

datepicker5-8048381

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

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

datepicker6-3688879

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

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

datepicker7-1668121

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

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

datepicker8-9526300

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

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

В линию

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

datepicker9-8030288