DateUpicker пользовательского интерфейса jQuery - выбор нескольких дат

Question

Есть ли способ использовать виджет DatePicker пользовательского интерфейса jQuery для выбора нескольких дат?

Вся помощь приветствуется! Если невозможно использовать указатель даты jquery UI, то есть ли что-то подобное?

Answer 1

Мне нужно было сделать то же самое, поэтому я написал несколько JavaScript, чтобы включить это, используя события onSelect и beforeShowDay. Он поддерживает свой собственный массив выбранных дат, поэтому, к сожалению, не интегрируется с текстовым полем, показывающим текущую дату и т. Д. Я просто использую его как встроенный элемент управления, и затем я могу запросить массив для выбранных в данный момент дат.
Я использовал этот код в качестве основы.

<script type="text/javascript">
// Maintain array of dates
var dates = new Array();

function addDate(date) {
    if (jQuery.inArray(date, dates) < 0) 
        dates.push(date);
}

function removeDate(index) {
    dates.splice(index, 1);
}

// Adds a date if we don't have it yet, else remove it
function addOrRemoveDate(date) {
    var index = jQuery.inArray(date, dates);
    if (index >= 0) 
        removeDate(index);
    else 
        addDate(date);
}

// Takes a 1-digit number and inserts a zero before it
function padNumber(number) {
    var ret = new String(number);
    if (ret.length == 1) 
        ret = "0" + ret;
    return ret;
}

jQuery(function () {
    jQuery("#datepicker").datepicker({
        onSelect: function (dateText, inst) {
            addOrRemoveDate(dateText);
        },
        beforeShowDay: function (date) {
            var year = date.getFullYear();
            // months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009"
            var month = padNumber(date.getMonth() + 1);
            var day = padNumber(date.getDate());
            // This depends on the datepicker's date format
            var dateString = month + "/" + day + "/" + year;

            var gotDate = jQuery.inArray(dateString, dates);
            if (gotDate >= 0) {
                // Enable date so it can be deselected. Set style to be highlighted
                return [true, "ui-state-highlight"];
            }
            // Dates not in the array are left enabled, but with no extra style
            return [true, ""];
        }
    });
});
</script>

Answer 2

С календарем пользовательского интерфейса jQuery этот плагин позволяет выбирать несколько дат:

http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/

Answer 3

Когда вы немного его модифицируете, он работает независимо от установленного вами формата даты.

$("#datepicker").datepicker({
                        dateFormat: "@", // Unix timestamp
                        onSelect: function(dateText, inst){
                            addOrRemoveDate(dateText);
                        },
                        beforeShowDay: function(date){
                            var gotDate = $.inArray($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date), dates);
                            if (gotDate >= 0) {
                                return [false,"ui-state-highlight", "Event Name"];
                            }
                            return [true, ""];
                        }
                    });     

Answer 4

Я потратил довольно много времени, пытаясь найти хороший инструмент выбора даты, поддерживающий интервальные интервалы, и в итоге нашел это:

http://keith -wood.name / datepick.html

Я полагаю, что это может быть лучшим средством выбора даты в jquery для выбора диапазона или нескольких дат, и, как утверждают, оно послужило основой для средства выбора даты в jQuery UI, и я не вижу причин сомневаться в этом, поскольку оно действительно мощный, а также хорошо документированный!

Answer 5

Плагин, разработанный @dubrox, очень легкий и работает почти так же, как jQuery UI. Мое требование состояло в том, чтобы иметь возможность ограничить количество выбранных дат.

Интуитивно понятно, что maxPicks свойство, похоже, было предоставлено для этой цели, но, к сожалению, оно не работает.

Для тех, кто ищет это исправление, вот оно:

1. Сначала вам нужно патч jquery.ui.multidatespicker.js. Я отправил запрос на github . Вы можете использовать это, пока dubrox не объединит его с мастером или не найдет собственное исправление.

2. Использование действительно просто. Приведенный ниже код приводит к тому, что средство выбора даты не выбирает никаких дат после того, как определенное количество дат (maxPicks) уже выбрано. Если вы отмените выбор какой-либо ранее выбранной даты, она позволит вам выбирать снова, пока не достигнете предела.

   $("#mydatefield").multiDatesPicker({maxPicks: 3});

Answer 6

<div id="calendar"></div>
<script>
$(document).ready(function() {
    var days = [];

    $('#calendar').datepicker({
        dateFormat: 'yymmdd',
        showWeek: true, showOtherMonths: false, selectOtherMonths: false,
        navigationAsDateFormat: true, prevText: 'MM', nextText: 'MM',
        onSelect: function(d) {
            var i = $.inArray(d, days);

            if (i == -1)
                days.push(d);
            else
                days.splice(i, 1);
        },
        beforeShowDay: function(d) {
            return ([true, $.inArray($.datepicker.formatDate('yymmdd', d), days) == -1 ? 'ui-state-free' : 'ui-state-busy']);
        }
    });
});
</script>

ПРИМЕЧАНИЕ. Вы можете предварительно заполнить days списком дат, например '20190101', с помощью фрагмента кода в PHP.

Добавьте 2 строки в ваш CSS:

#calendar .ui-state-busy a {background:#e6e6e6 !important;}
#calendar .ui-state-free a {background:none !important;}

Чтобы получить список выбранных календарем дней в виде <form>:

<div id="calendar"></div>
<form method="post">
<input type="submit" name="calendar_get" id="calendar_get" value="Validate" />
</form>

Добавьте это к <script>:

    $('#calendar_get').click(function() {
        $(this).append('<input type="hidden" name="calendar_days" value="' + days.join(',') + '" />');
    });

Применить implode к строке в $_POST['calendar_days'] и сопоставить strtotime со всеми форматированными датами.

Answer 7

используйте это на:

$('body').on('focus',".datumwaehlen", function(){
    $(this).datepicker({
        minDate: -20
    });
});

Answer 8

Используйте этот плагин http://multidatespickr.sourceforge.net

• Выберите диапазоны дат.
• Выберите несколько дат не в безопасности.
• Определить максимальное количество выбираемых дат.
• Определить диапазон X дней, откуда он Можно выбрать Y даты. Определить недоступные даты

Answer 9

Просто было требование для этого; вот код, который я использовал. Примените это к входу как обычно, я использую класс typeof__multidatepicker.

Поддерживает список уникальных дат в текстовом поле владельца. Вы также можете ввести там, это не проверено - очевидно, сервер должен проверить список результатов!

Я попытался заставить его работать со связанным текстовым полем DatePicker, но потерпел неудачу, поэтому он создает невидимый ввод для DatePicker (похоже, он не работает с display:none, отсюда и странный стиль).

Он расположен над основным вводом, поэтому указатель даты отображается в правильном месте и имеет ширину 1 пиксель, поэтому вы все еще можете ввести текст в основном текстовом поле.

Это для интрасети с фиксированной платформой, поэтому я не проводил много кросс-браузерного тестирования.

Не забудьте включить обработчик в body, иначе он работает запутанно.

$('.typeof__multidatepicker').each(
    function()
    {
        var _this = $(this);                        

        var picker = $('<input tabindex="-1" style="position:absolute;opacity:0;width:1px" type="text"/>');

        picker.insertAfter(this)
        .position({my:'left top', at:'left top', of:this})
        .datepicker({
            beforeShow:
                function()
                {
                    _this.data('mdp-popped', true);
                },
            onClose: 
                function(dt, dpicker)
                {   
                    var date = $.datepicker.formatDate(picker.datepicker('option', 'dateFormat'), picker.datepicker('getDate'));
                    var hash = {};
                    var curr = _this.val() ? _this.val().split(/\s*,\s*/) : [];
                    var a = [];

                    $.each(curr, 
                        function() 
                        { 
                            if(this != '' && !/^\s+$/.test(this)) 
                            {   
                                a.push(this); 
                                hash[this] = true;
                            }
                        }
                    );

                    if(date && !hash[date])
                    {
                        a.push(date);

                        _this.val(a.join(', '));
                    }                                                                   

                    _this.data('mdp-popped', false);
                    _this.data('mdp-justclosed', true);
                }
        }); 

        _this.on('focus', 
            function(e) 
            {                               
                if(!_this.data('mdp-popped') && !_this.data('mdp-justclosed'))
                    _this.next().datepicker('show'); 

                _this.data('mdp-justclosed', false);
            }
        );
    }
);

$('body').on('click', function(e) { $('.typeof__multidatepicker').data('mdp-justclosed', false); });