Aktivieren/deaktivieren ausgewählten Datumsbereich auf jQuery-UI-datepicker
Also ich habe Folgendes demo -http://dev.driz.co.uk/week.html, die zeigt, dass ein jQuery-UI-datepicker, dass mehrere Instanzen für jeden Monat des Jahres.
Habe ich es geändert, so dass der Benutzer auswählt, ganze Wochen und dann start-und Enddatum für diejenigen Wochen gespeichert sind auf der rechten Seitenleiste mit einer Anzahl Woche.
Was ich will zu tun ist, deaktivieren Sie die Daten, sobald der Benutzer ausgewählt hat, so dass Sie sehen können auf die Kalender-picker, welche Daten ausgewählt wurden (und auch verhindern, dass Sie hinzufügen den gleichen Zeitraum mehr als einmal).
Allerdings weiß ich nicht, wo Sie anfangen mit diesem... ich habe einige aktivieren und deaktivieren von date-Funktionen, aber nicht wissen, wie man tatsächlich deaktivieren Sie die Daten verwenden, die beforeShowDay Methode.
Beispiel:
var array = ["2013-03-14","2013-03-15","2013-03-16"]
$('.week-picker').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [ array.indexOf(string) == -1 ]
}
});
Aber wie kann ich deaktivieren Sie einen Bereich von Daten? Als ich nur noch die start-und Enddaten. Und kann ich rufen Sie die beforeShowDay NACH der datepicker ist auf der Seite wie in meinem Beispiel? UND wie kann ich dann aktivieren Sie die Termine?
Hier der code:
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active');
}, 1);
}
$('.week-picker').datepicker( {
defaultDate: '01/01/2014',
minDate: '01/01/2013',
maxDate: '01/01/2015',
changeMonth: false,
changeYear: true,
showWeek: true,
showOtherMonths: true,
selectOtherMonths: true,
numberOfMonths: 12,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
disableDates( $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
$('.remove').live('click', function(e){
enableDates($(this).attr('data-startdate'), $(this).attr('data-enddate'));
$(this).parent('div').remove();
});
});
//adds the week to the sidebar
function addWeek(weekNum, startDate, endDate){
$('.weeks-chosen').append('<div data-startdate="'+startDate+'" data-enddate="'+endDate+'"><span class="weekNum">Week '+ (weekNum - 1) +'</span> - <span class="startDate">'+startDate+'</span> - <span class="endDate">'+endDate+'</span> | <span class="remove">X Remove</span></div>');
}
//disable the dates on the calendar
function disableDates(startDate, endDate){
}
//enable the dates on the calendar
function enableDates(startDate, endDate){
}
Kurz, es sind zwei verschiedene Fragen... Wie kann ich das deaktivieren Termine NACH der datepicker auf der Seite Hinzugefügt wird. Und zweitens wie kann ich deaktivieren Sie einen Bereich zwischen zwei Terminen, so wie es aussieht ist die beforeShowDay Methode erwartet ein array von Daten anstatt einer Reihe.
- wollen Sie vermeiden Sie Duplikate?
- Ja, aber das sollte behandelt werden, indem Sie die Termine, wenn Sie ausgewählt werden eh gleich?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Eine Möglichkeit könnte sein, ein array zu erstellen der Daten auf der Grundlage der start-und Enddaten, die Sie haben. Verwenden Sie das array in
beforeShowDay
deaktivieren Sie den Bereich.Demo: http://jsfiddle.net/abhitalks/FAt66/1/
Zum Beispiel, die Relevanten Teile des JS:
Nun konnten Sie
startDate
undendDate
wenn ein Datum ausgewählt ist. Im Beispiel Geige, die ich im Zusammenhang mit oben, die start-und end-Termine werden gesetzt, wenn ein Datum ausgewählt ist, die in die beiden oberen Eingänge. Das Daten-array wird gefüllt, wenn das Datum ausgewählt ist, die in den zweiten Eingang.Hinweis: Das Beispiel oben ist Additiv, d.h. jedes mal, wenn Sie wählen Sie einen neuen Bereich Hinzugefügt wird, wie Behinderte Termine in das Ziel. Wenn Sie möchten, löschen Sie den vorhandenen Behinderten-Serie vor, die ein neues Angebot, dann könnte man einen
destroy
und befestigen Sie den datepicker. (Und auch einen reset der dateRange-array)Demo 2: http://jsfiddle.net/abhitalks/FAt66/3/
Relevanten Teil von JS:
Blick auf Ihre tatsächlichen code, ist alles was Sie brauchen, ist diese:
Dies wird halten Sie das hinzufügen des neu ausgewählten Datums reicht, um die array-und Additiv halten Sie auf deaktivieren. Aber seien Sie gewarnt, dass Sie müssen einen Fluchtweg, wenn ein bereits ausgewähltes Woche entfernt wird. In diesem Fall können Sie arbeiten mit mehreren Arrays, die können Sie ergoss sich in einer master-array.
beforeshowday
alsoption
später auf.beforeshowday
Funktion in es.dateRange = [];
von IhremonSelect
code.defaultDate
startDate
undendDate
als tatsächlicheDate
Objekte und nur diebeforeShowDay
vergleichen Sie die input-parameter an (date > startDate && date < endDate
) anstatt ein array von potenziell Hunderte oder Tausende von strings, die Umwandlung der Eingabe in ein Datum (über.datepicker
), dann zurück in einen string und dann ein string-Vergleich gegen das gesamte array.if (dt < startDate || dt > endDate) { return [true];}else {return [false];}
. Eine Sache, die ich möchte zu verstehen ist, ist es true zurück als array. Wenn ich entfernen Sie die Klammern [] es funktioniert nicht. Thx.datepicker
erwartet ein array aus drei Elementen (vonbeforeShowDay
) erste ist ein boolean. Die anderen Elemente sind für die Angabe der Klasse, etc. Wenn Sie die Dokumentation zu Lesen, es wird sofort klar Sie. Prost!Wenn es eine Anforderung zum deaktivieren einer Liste von Datumsangaben oder wie, wenn man in jeder Buchung die Art der Projekte in denen wir deaktivieren müssen einige Termine während des gesamten Prozesses. So können Sie verwenden Sie folgenden code,