Primera es que hay una manera de resaltar el día actual. La segunda es que hay una manera de resaltar días específicos como la forma en que el día actual se destacó?

Aquí está el código que me han dado:

<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="css/calendar-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
var dates = [new Date(2011, 9 - 1, 19),
new Date(2011, 9 - 1, 20),
new Date(2011, 9 - 1, 20),
new Date(2011, 9 - 1, 21),
new Date(2011, 10 - 1, 31)];
$(function() {
$('#datepicker').datepicker({
numberOfMonths: [1, 1],
beforeShowDay: highlightDays,
});
$('#datepicker').click(function() {
//put your selected date into the data object
var data = $('#datepicker').val();
$.get('getdata.php?date=' + data, function(data) {
$('#events').html(data).show('slow');
});
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (dates[i].getTime() == date.getTime()) {
return [true, 'highlight'];
}
}
return [true, ''];
}
});
</script>
<style>
#highlight, .highlight {
background-color: #000000;
}
</style>  
</head>
<body>
<div id="datepicker" style="float:left;margin: 0 10px 0 0;font-size: 72.5%;"></div>
<div id="events" style="float:left;font-size: 10pt;">
<p>Select a date on the calendar to see events.</p>
</div>
<div style="clear:both"></div>
</body>
</html>
InformationsquelleAutor user875293 | 2011-09-21

2 Comentarios

  1. 2

    Primera es que hay una manera de resaltar el día actual.

    Sí, usted puede quitar el resaltado mediante la eliminación de .ui-state-highlight y .ui-state-hover clases a partir del elemento delimitador.

    Segundo es que hay una manera de resaltar días específicos como la forma en que el día actual se destacó?

    Sí, agregue las clases para resaltar el día actual para esos días en los que desea que han puesto de manifiesto que, o se anula el CSS con .ui-state-highlight‘s estilo.

    Para el primer enfoque, he aquí un ejemplo de fragmento de código:

    $('#datepicker').datepicker({
    numberOfMonths: [1, 1],
    beforeShowDay: highlightDays
    }).click(function() {
    //question 1
    $('.ui-datepicker-today a', $(this).next()).removeClass('ui-state-highlight ui-state-hover');
    //question 2
    $('.highlight a', $(this).next()).addClass('ui-state-highlight');
    });

    Ver el primer enfoque en la acción: http://jsfiddle.net/william/Aut9b.
    Ver el segundo método en acción: http://jsfiddle.net/william/Aut9b/1/.

    • Me doy cuenta de que este es un par de años, pero hay una manera de hacer esto si un cuadro de texto tiene un AJAX calendario Extender sobre ella? He estado buscando durante días y publicado un par de preguntas aquí tratando de hacer esto.
  2. 1

    Uso beforeShowDay opción de interfaz de usuario jQuery selector de fecha para resaltar las fechas seleccionadas en el selector de fecha. Aquí el código simple:

    $( function() {
    //An array of dates
    var eventDates = {};
    eventDates[ new Date( '08/07/2016' )] = new Date( '08/07/2016' );
    eventDates[ new Date( '08/12/2016' )] = new Date( '08/12/2016' );
    eventDates[ new Date( '08/18/2016' )] = new Date( '08/18/2016' );
    //datepicker
    $('#datepicker').datepicker({
    beforeShowDay: function( date ) {
    var highlight = eventDates[date];
    if( highlight ) {
    return [true, "event", 'Tooltip text'];
    } else {
    return [true, '', ''];
    }
    }
    });
    });

    La anterior JavaScript añadir event de clase en las fechas seleccionadas. Ahora tendrá que definir el estilo para las fechas seleccionadas. Para la guía completa, se puede comprobar el enlace de la fuente mencionada anteriormente.

Dejar respuesta

Please enter your comment!
Please enter your name here