Есть ли способ использования виджета jQuery UI Datepicker для выбора нескольких дат?
Вся помощь приветствуется! Если его не представляется возможным использовать jQuery UI datepicker, то есть ли что-то подобное?
Есть ли способ использования виджета jQuery UI Datepicker для выбора нескольких дат?
Вся помощь приветствуется! Если его не представляется возможным использовать jQuery UI datepicker, то есть ли что-то подобное?
Мне нужно было сделать то же самое, поэтому написали 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 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>
С календарем jQuery UI этот плагин позволяет выбрать несколько дат:
http://dubrox.github.io/Multiple-Dates-Picker-for-jQuery-UI/
Когда вы немного модифицируете его, он работает независимо от того, какой dateFormat вы установили.
$("#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, ""];
}
});
Я потратил довольно много времени на поиск хорошего выбора даты, который поддерживает интервалы интервалов, и в итоге нашел это:
http://keith-wood.name/datepick.html
Я считаю, что это может быть лучший выбор даты jquery для выбора диапазона или нескольких дат, и, как утверждается, он был базой для jQuery UI datepicker, и я не вижу причин сомневаться в этом, поскольку, похоже, это действительно мощный, а также хорошо документированный!
Плагин, разработанный @dubrox, очень легкий и почти идентичный пользовательскому интерфейсу jQuery. Мое требование состояло в том, чтобы иметь возможность ограничить количество выбранных дат.
Интуитивно, свойство maxPicks
, похоже, было предоставлено для этой цели, но к сожалению оно не работает.
Для тех, кто ищет это исправление, вот оно:
Сначала вам нужно патч jquery.ui.multidatespicker.js
. Я отправил запрос pull на github. Вы можете использовать это, пока dubrox не объединит его с мастером или не придумает собственное решение.
Использование действительно просто. Следующий код заставляет сборщик дат не выбирать даты, как только указанное количество дат (maxPicks
) уже выбрано. Если вы отмените выбор какой-либо ранее выбранной даты, она позволит вам выбрать еще раз, пока вы не достигнете предела еще раз.
$("#mydatefield").multiDatesPicker({maxPicks: 3});
Просто для этого требовалось; вот код, который я использовал. Примените его к входу как обычно, я использую класс 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); });
Используйте этот плагин http://multidatespickr.sourceforge.net
используйте это:
$('body').on('focus',".datumwaehlen", function(){
$(this).datepicker({
minDate: -20
});
});