Markieren Sie Datumsangaben in einem bestimmten Bereich mit jQuerys Datumsauswahl.

Question

Ich muss die Daten zwischen einem Startdatum und einem Enddatum hervorheben, die ich angeben könnte. Kann mir jemand helfen?

Answer 1

Sie können die beforeShowDay event verwenden. Es wird für jedes Datum aufgerufen, das im Kalender angezeigt werden soll. Er geht in ein Datum und ein Array mit [0] = isSelectable, 1 = CssClass, [2] = some text Tooltip

$('#whatever').datepicker({ 
      beforeShowDay: function(date) { 
      if (date == myDate) { 
       return [true, 'css-class-to-highlight', 'tooltipText']; 

       } 
      } 
}); 

Answer 2

Wenn Sie mit Keith Wood datepick Sie das folgende Beispiel aus here genommen verwenden können

$(selector).datepick({onDate: highlightDays}); 

function highlightDays(date) { 
    return {selectable: true, dateClass: 'highlight-custom', title: 'tooltip'}; 
} 

Answer 3

Hier ist ein funktionierendes Beispiel! Sie werden ein Paket von hier mit http://jqueryui.com/download mit Core, Widget und Datepicker machen.

JavaScript-Teil setzen vor:

<script> 
$(document).ready(function() { 

    var dates = ['22/01/2012', '23/01/2012']; // 
      //tips are optional but good to have 
    var tips = ['some description','some other description'];  

    $('#datepicker').datepicker({     
     dateFormat: 'dd/mm/yy', 
     beforeShowDay: highlightDays, 
     showOtherMonths: true, 
     numberOfMonths: 3, 
    }); 

    function highlightDays(date) { 
     for (var i = 0; i < dates.length; i++) { 
      if (new Date(dates[i]).toString() == date.toString()) {    
       return [true, 'highlight', tips[i]]; 
      } 
     } 
     return [true, '']; 
    } 

}); 
</script> 

Der HTML-Teil:

<div id="datepicker"></div> 

irgendwo diese CSS hinzufügen:

td.highlight {border: none !important;padding: 1px 0 1px 1px !important;background: none !important;overflow:hidden;} 
td.highlight a {background: #99dd73 url(bg.png) 50% 50% repeat-x !important; border: 1px #88a276 solid !important;} 

Und Sie werden ein kleines Bild machen müssen genannt bg.png, um es zu arbeiten

Answer 4

Dachte, ich in meinen zwei Cent werfen würde, wie es schneller und geringes Gewicht als andere scheint:

jQuery(function($) { 
    var dates = { 
    '2012/6/4': 'some description', 
    '2012/6/6': 'some other description' 
    }; 

    $('#datepicker').datepicker({ 
    beforeShowDay: function(date) { 
     var search = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate(); 

     if (search in dates) { 
     return [true, 'highlight', (dates[search] || '')]; 
     } 

     return [false, '', '']; 
    } 
    }); 
}); 

Answer 5

Mugur, Ihren Code nicht ganz für mich arbeiten in Firefox oder Safari tat es erforderlich, die date var formatiert sein (was ich von here bekommen habe). Hier

function highlightDays(date) { 
for (var i = 0; i < dates.length; i++) { 

var d = date.getDate(); 
var m = date.getMonth(); 
m += 1; // JavaScript months are 0-11 
var y = date.getFullYear(); 

var dateToCheck = (d + "/" + m + "/" + y); 
    if (dates[i] == dateToCheck) { 
     return [true, 'highlight', tips[i]]; 
    } 
    } 
return [true, '']; 
} 

Und natürlich, wie die obige Funktion steht es nicht berücksichtigt führende Nullen-padding so die dates Array benötigt werden folgendermaßen geändert:

var dates = ['22/1/2014', '23/1/2014']; 

Answer 6

Nicht sicher, ob dies noch nützlich sein, aber da dies für mich war nützlich, möchte ich teilen, was ich tat:

In meinem JavaScript:

var holidays= ["2016/09/18", "2016/09/19", "2016/01/01", "2016/05/01", "2016/06/27", "2016/08/15"]; 

$("#SomeID").datepicker({ beforeShowDay: highLight }); 

function highLight(date) { 
     for (var i = 0; i < holidays.length; i++) { 
      if (new Date(holidays[i]).toString() == date.toString()) { 
       return [true, 'ui-state-holiday']; 
      } 
     } 
     return [true]; 
    } 

Und im jquery-ui-Theme.css Ich habe hinzugefügt

.ui-state-holiday .ui-state-default { 
    color: red; 
} 

Wenn Sie möchten, auch an Wochenenden markieren, müssen Sie diese CSS anstelle

.ui-state-holiday .ui-state-default, .ui-datepicker-week-end .ui-state-default { 
    color: red; 
} 

Und das ist das Ergebnis:

(Beachten Sie, dass Ich habe meine Sprache auf Spanisch konfiguriert, aber das ist nicht wichtig für diesen Code)

Answer 7

Spät zur Party, aber hier ist ein JSFiddle, die ich Test verwendet:

https://jsfiddle.net/gq6kdoc9/

HTML:

<div id="datepicker"></div> 

JavaScript:

var dates = ['11/13/2017', '11/14/2017']; 
    //tips are optional but good to have 
    var tips = ['some description', 'some other description']; 

    $('#datepicker').datepicker({ 
    dateFormat: 'dd/mm/yy', 
    beforeShowDay: highlightDays, 
    showOtherMonths: true, 
    numberOfMonths: 3, 
    }); 

    function highlightDays(date) { 
    for (var i = 0; i < dates.length; i++) { 
     if (new Date(dates[i]).toString() == date.toString()) { 
     return [true, 'highlight', tips[i]]; 
     } 
    } 
    return [true, '']; 
    } 

und CSS:

td.highlight { 
    border: none !important; 
    padding: 1px 0 1px 1px !important; 
    background: none !important; 
    overflow: hidden; 
} 

td.highlight a { 
    background: #ad3f29 url(bg.png) 50% 50% repeat-x !important; 
    border: 1px #88a276 solid !important; 
} 

Aufgebaut auf Mi kes Arbeitsbeispiel oben!