it-swarm.com.de

Markieren Sie mit jQuery Datumsangaben in einem bestimmten Bereich

Ich muss die Datumsangaben zwischen einem Startdatum und einem Enddatum markieren, die ich angeben kann. Kann mir jemand helfen? 

18
user286928

Sie können das Ereignis beforeShowDay verwenden. Es wird für jedes Datum aufgerufen, das im Kalender angezeigt werden muss. Er übergibt ein Datum und gibt ein Array mit [0] = isSelectable, 1 = cssClass, [2] = etwas QuickInfo-Text zurück

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

              }
           }
});
32
Dave Archer

Hier ist ein Arbeitsbeispiel! Sie müssen von hier aus ein Paket mit http://jqueryui.com/download mit Core, Widget und Datepicker erstellen.

Der Javascript-Teil, den Sie vorher einfügen sollten:

<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>

Fügen Sie irgendwo dieses CSS hinzu:

    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 müssen ein kleines Bild namens bg.png erstellen, damit es funktioniert

21
Mike

Ich dachte, ich würde meine zwei Cents einwerfen, da es schneller und leichter erscheint als andere:

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, '', ''];
    }
  });
});
13
Mark Murphy

Ich bin mir nicht sicher, ob dies noch nützlich sein wird, aber da dies für mich nützlich war, möchte ich mitteilen, was ich getan habe:

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 in der jquery-ui-theme.css habe ich hinzugefügt

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

Wenn Sie auch Wochenenden markieren möchten, müssen Sie stattdessen dieses CSS verwenden

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

Und das ist das Ergebnis:
jqueryUI Calendar with Weekends and Holidays Highlight

(Beachten Sie, dass ich meine Sprache auf Spanisch eingestellt habe, dies ist jedoch für diesen Code nicht wichtig.)

3
Angelo Bernardi

Spät zur Party, aber hier ist ein JSFiddle, das ich getestet habe:

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;
}

Erbaut auf Mikes Arbeitsbeispiel oben!

0
Ben

Wenn Sie Keith Woods datepick verwenden, können Sie das folgende Beispiel aus hier verwenden.

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

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

mugur, dein Code hat für mich in Firefox oder Safari nicht ganz funktioniert, er musste date var formatieren (was ich von here 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, ''];
}

Natürlich berücksichtigt die obige Funktion die Auffüllung der führenden Nullen nicht. Daher musste das dates-Array in Folgendes geändert werden:

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