Datumsauswahl für Web-Seite, die nur zu bestimmten Terminen angeklickt werden

Question

zulassen

Gibt es einen Javascript oder eine Bibliothek, die eine Datepicker für eine Webseite (ähnlich Jquery UI DatePicker schaffen würde, die nur bestimmte Daten anklickbar zu sein erlauben würde, und hervorgehoben.

Zum Beispiel könnte ich auf der Serverseite ein Array von Tagen angeben, um die Auswahl zu ermöglichen.

Answer 1

Das Ereignis Datepicker beforeShowDay() ist genau für diesen Zweck vorgesehen. Hier ist ein Beispiel, in dem die Menge der erlaubten Daten zum Zweck der Veranschaulichung relativ klein ist. Abhängig davon, wie viele Daten Sie haben und wie sie ausgewählt werden, können Sie stattdessen eine Methode schreiben, die programmatisch ausgewählte Daten auswählt (z. B. durch Ignorieren von Wochenenden, 1. und 15. eines jeden Monats usw.). Oder Sie könnten beide Techniken kombinieren, zum Beispiel Wochenenden und eine feste Liste von Feiertagen entfernen.

$(function() { 
    // this could be a static hash, generated by the server, or loaded via ajax 
    // if via ajax, make sure to put the remaining code in a callback instead. 
    var dates_allowed = { 
      '2009-12-01': 1, 
      '2009-12-25': 1, 
      '2010-09-28': 1, 
      '2011-10-13': 1 
    }; 

    $('#datepicker').datepicker({ 
     // these aren't necessary, but if you happen to know them, why not 
     minDate: new Date(2009, 12-1, 1), 
     maxDate: new Date(2010, 9-1, 28), 

     // called for every date before it is displayed 
     beforeShowDay: function(date) { 

      // prepend values lower than 10 with 0 
      function addZero(no) { 
       if (no < 10){ 
        return "0" + no; 
       } else { 
        return no; 
       } 
      } 

      var date_str = [ 
       addZero(date.getFullYear()), 
       addZero(date.getMonth() + 1), 
       addZero(date.getDate())  
      ].join('-'); 

      if (dates_allowed[date_str]) { 
       return [true, 'good_date', 'This date is selectable']; 
      } else { 
       return [false, 'bad_date', 'This date is NOT selectable']; 
      } 
     } 
    }); 
}); 

Die Rückgabewerte sind

[0]: boolean selectable or not, 
[1]: CSS class names to apply if any (make sure to return '' if none), 
[2]: Tooltip text (optional) 

Beachten Sie, dass die Datumsvariable in der Callback angegeben ist eine Instanz eines Date-Objekt den angegebenen Tag darstellt, nicht eine Textversion von diesem Datum im angegebenen Format . So könnten Sie zum Beispiel die Liste der zulässigen Daten in einem Format erstellen, während die Datumsangaben im Datumsauswahlfenster in einem anderen Format angezeigt werden (z. B. müssen Sie beim Erstellen der Seite keine Daten aus einer Datenbank umwandeln).

Siehe auch The Coolest Javascript Calendar jahrelang Can the jQuery UI Datepicker be made to disable Saturdays and Sundays (and holidays)?

Answer 2

Sie könnten mit dem jquery ui datepicker beginnen Laden Sie das neueste Entwicklungspaket herunter und arbeiten Sie mit ui.datepicker.js Siehe _generateHTML Suchen Sie nach der nicht auswählbaren Variablen Wenn Ihr serverseitiger Code ein Skript generieren könnte - es könnte einige neue Einstellungen enthalten, können Sie die Datumsauswahl erweitern, um sie zu akzeptieren zu der Liste gültiger Daten in dieser Zeile, in der nicht auswählbar ist. Beachten Sie, dass die Datumsauswahl die Datumseingabe über die Tastatur außerhalb des gültigen Bereichs ermöglicht.

Wenn Sie bereits jquery ui verwenden, würde ich wahrscheinlich den _generateHTML-Prototyp überschreiben, nachdem Sie das jquery-UI-Skript geladen haben.

Answer 3

Vielleicht könnten Sie den DatePicker erweitern, um deaktivierte/aktivierte Daten zuzulassen ... Ich glaube, Sie könnten den Click-Handler für deaktivierte Daten entfernen, so dass sie nicht durchklickbar sind. Dann ändern Sie einfach das CSS für deaktivierte Daten und sie können "ausgegraut" werden.

Answer 4

Ich habe eine App einfach so (eine web-basierte Datumsauswahl mit verschiedenen Daten verboten) mit YUI-Kalender und eine Reihe von benutzerdefinierten Code. Davon abgesehen, habe ich dies getan, bevor ich die wunderbaren Freuden von jQuery entdeckt habe (und der "Gott, das ist nicht halb so gut wie jQuery, aber zumindest verwendet es jQuery-Methoden" von jQuery UI). Wenn ich es noch einmal machen würde, würde ich definitiv jQuery UI (trotz vieler Fehler) als Grundlage verwenden; Das Mischen von Bibliotheken ist mühsamer als der Umgang mit der Unreife von jQuery UI.

Answer 5

Versuchen Sie dijit.Calendar Es gibt eine IsDisabledDate-Eigenschaft, die Sie in Markup oder JavaScript für eine Funktion festlegen können. Siehe das zweite Beispiel. Die Methode zum Deaktivieren von Daten wird für jeden Tag aufgerufen, wenn sie gerendert wird. Die Funktion könnte etwas tun, um zu bestimmen, ob ein Muster befolgt wird (ist es ein Wochenende?), Oder es nach einer statischen Tabelle (Array) absuchen, die Sie vom Server bereitstellen, wie z. B. geschäftige Tage oder Feiertage. Die getClassForDate-Methode kann überschrieben werden, um eine CSS-Klasse zurückzugeben.

Answer 6

ich verwendet habe, und es hat die Fähigkeit, einige Tage des Kalenders zu deaktivieren. Überprüfen Sie es einfach, ich benutze es in verschiedenen ASP.NET-Projekten.

Weitere Informationen zum Deaktivieren von Daten finden Sie unter here.

Answer 7

Um Rob Van Dams Antwort auszuarbeiten, hier ist ein Codebeispiel (mit jQuery UI Datepicker) zum Abrufen von aktivierten Daten mit AJAX. Ich verwende AJAX, um eine PHP-Seite abzufragen, die das aktivierte Datum aus einer Datenbank zurückgibt (weil ich nur Daten anzeigen möchte, in denen ich tatsächliche Daten habe).

Die Idee besteht darin, die AJAX-Abfrage jedes Mal durchzuführen, wenn der Benutzer den Monat ändert und dann die aktivierten Daten für diesen Monat in einem globalen Array (allowedDates) speichert, das später von beforeShowDay verwendet wird.

Natürlich könnten Sie die AJAX-Abfrage in beforeShowDay tun, aber dies wäre aufgrund der hohen Anzahl von AJAX-Abfragen (mehr als 30 für jeden Monat) ziemlich innecient.

var allowedDates = new Object(); 

function queryAllowedDates (year, month, id) { 
    $.ajax({ 
    type: 'GET', 
    url: 'calendar_days.php', 
    dataType: 'json', 
    success: function(response) { 
     allowedDates[id] = response.allowedDates; 
    }, 
    data: {year:year,month:month}, 
    async: false 
    }); 
} 

$("#datepicker1").datepicker({ 
    dateFormat: 'dd.mm.yy', 
    changeMonth: true, 
    changeYear: true , 
    beforeShow: function (input) { 
    var currentDate = $(input).datepicker('getDate'); 
    var id = $(input).attr('id'); 
    queryAllowedDates(currentDate.getFullYear(), currentDate.getMonth()+1,id); 
    }, 
    onChangeMonthYear: function (year, month, inst) { 
    queryAllowedDates(year, month, inst.input.attr('id')); 
    }, 
    beforeShowDay: function (day) { 
    var id = $(this).attr('id'); 

    var date_str = [ 
     day.getFullYear(), 
     day.getMonth() + 1, 
     day.getDate() 
    ].join('-'); 

    if (allowedDates[id] != undefined && allowedDates[id][date_str]) { 
     return [true, 'good_date', 'This date is selectable']; 
    } else { 
     return [false, 'bad_date', 'This date is NOT selectable']; 
    } 
    } 
}); 

In diesem Beispiel gibt die PHP-Seite ein JSON-Array etwas ähnliches enthält:

{"allowedDates":{"2008-12-04":1,"2008-12-11":1}}