it-swarm.com.ru

jQuery UI Datepicker - выбор нескольких дат

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

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

38
tarnfeld

Мне нужно было сделать то же самое, поэтому я написал несколько 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>
32
Tevin

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

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

15
Dinaraj

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

$("#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, ""];
                        }
                    });     
12
chriszero

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

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

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

10
user310457

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

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

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

  1. Для начала вам нужно patchjquery.ui.multidatespicker.js. Я отправил запрос pull на github . Вы можете использовать это до тех пор, пока Дуброкс не объединит его с мастером или не предложит собственное исправление.

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

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

1
adarshr

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

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

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

0
frasq

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

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