Как выделить выбранные даты в окне выбора даты - PullRequest
Новая
       1

Как выделить выбранные даты в окне выбора даты

3 голосов
/ 21 сентября 2011

Во-первых, есть способ не выделить текущий день.Во-вторых, есть ли способ выделить определенные дни, например, как был выделен текущий день?

Вот код, который у меня есть: 

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

Ответы [ 2 ]

2 голосов
/ 22 сентября 2011

Во-первых, есть способ не выделить текущий день.

Да, вы можете убрать выделение, удалив классы .ui-state-highlight и .ui-state-hover из элемента привязки.

Во-вторых, есть способ выделить определенные днинапример, как был выделен текущий день?

Да, либо добавьте классы для подсветки текущего дня в те дни, которые вы хотите выделить, либо переопределите CSS с помощью стиля .ui-state-highlight.

Для первого подхода приведен пример фрагмента кода: 

$('#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');
});

См. Первый подход в действии: http://jsfiddle.net/william/Aut9b. См. Второй подход в действии: http://jsfiddle.net/william/Aut9b/1/.

1 голос
/ 12 сентября 2016

Используйте параметр beforeShowDay средства выбора даты в jQuery UI, чтобы выделить выбранные даты в средстве выбора даты.Вот простой код: 

$( 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, '', ''];
            }
        }
    });
});

Приведенный выше JavaScript добавит event класс на выбранные даты.Теперь вам нужно определить стиль для выбранных дат.Для полного руководства, вы можете проверить ссылку на источник, упомянутый выше.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...