Bootstrap datetimepicker / сборщик даты не отображает календарь.Не могу выбрать дату - PullRequest
Новая
       8

Bootstrap datetimepicker / сборщик даты не отображает календарь.Не могу выбрать дату

0 голосов
/ 03 января 2019

Я пытаюсь заставить загрузчик datetimepicker работать вместе с Datatables, чтобы он фильтровал данные при выборе даты. Проблема в том, что он просто отображается в виде строки ввода на моей странице, там нет календаря или символа календаря. Это звучит как ссылка на CDN / библиотеку, но я дважды проверил и, кажется, все они загружены:

. Jquery , moment.js , начальная загрузка , самонастройки-datetimepicker.min.js , самозагрузки-datetimepicker.min.css

Я убедился, что Moment загружен до начальной загрузки и jquery. Я считаю, что это все ссылки, которые мне нужны? Любая помощь будет высоко ценится. Спасибо 

<div class="container">
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' id='from'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-4'>
        <div class="form-group">
            <div class='input-group date' id='to'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
<script>
$(function () {
                $('#from').datetimepicker({
                    format: 'DD MMMM YYYY',
                    extraFormats: ['DD MM YYYY', 'DD.MM.YYYY', 
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY', 
'DD.MMMM.YYYY', 'DD/MMMM/YYYY']
                }).on('dp.change', function (e) {
                    UpdateDataCount();
                });

                $('#to').datetimepicker({
                    format: 'DD MMMM YYYY',
                    extraFormats: ['DD MM YYYY', 'DD.MM.YYYY', 
'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY', 
'DD.MMMM.YYYY', 'DD/MMMM/YYYY']
                }).on('dp.change', function (e) {
                    UpdateDataCount();
                });
            });

UpdateDataCount: function () {
        $.fn.dataTable.ext.search.push(
            function (settings, data, dataIndex) {
                var from = $('#from').datetimepicker("getDate");
                var to = $('#to').datetimepicker("getDate");

                //data being searched
                var startDate = new Date(data[2]);

                //if true show row/ if not, don't
                if (from == null && to == null) { return true; }
                if (from == null && startDate <= to) { return true; }
                if (to == null && startDate >= from) { return true; }
                if (startDate <= to && startDate >= from) { return true; }
                return false;
            }
        );
    }
</script>

Ответы [ 2 ]

0 голосов
/ 04 января 2019

Чтобы ответить на мой собственный вопрос, datetimepicker не совместим с начальной загрузкой 4

0 голосов
/ 03 января 2019

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

У меня все работает, и тамБыли проблемы со сравнением момента Даты с ванилью Даты: 

var table = $('#example').DataTable();
var from = null;
var to = null;

$('#from').datetimepicker({
    format: 'DD MMMM YYYY',
    extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
        'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
        'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
    ]
}).on('dp.change', function(e) {
    from = e.date;
    table.draw();
});

$('#to').datetimepicker({
    format: 'DD MMMM YYYY',
    extraFormats: ['DD MM YYYY', 'DD.MM.YYYY',
        'DD/MM/YYYY', 'DD MMM YYYY', 'DD.MMM.YYYY', 'DD/MMM/YYYY', 'DD MMMM YYYY',
        'DD.MMMM.YYYY', 'DD/MMMM/YYYY'
    ]
}).on('dp.change', function(e) {
    to = e.date;
    table.draw();
});

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
        //data being searched
        var startDate = moment(data[2], "DD/MM/YYYY");
        if (!from && !to) {
            return true;
        }
        if (!from && startDate.isSameOrBefore(to, "day")) {
            return true;
        }
        if (!to && startDate.isSameOrAfter(from, "day")) {
            return true;
        }
        if (startDate.isSameOrBefore(to, "day") && startDate.isSameOrAfter(from, "day")) {
            return true;
        }
        return false;
    }
);

Рабочая JSFiddle здесь .

Надеюсь, что поможет.

...