0

jQuery Datepicker を使用して小さなカレンダー ウィジェットを作成しています。非常に単純な現在の週を強調する必要があります。

<script>
$(document).ready(function(){
    $(".ui-datepicker-today").parent().addClass('current-week');
});
</script>

これは問題なく機能しますが、ページを更新したときだけです。任意の日付を選択すると、今週のハイライトが消えます。何が問題なのか誰にもわかりますか？前もって感謝します。

ここで例を見ることができます: jQuery Datepicker Calendar Widget

4

2 に答える 2

0

クリックした日の後、クラスが追加されていないので、これが役立つかどうかを確認してください

$(".ui-datepicker-current-day").click(function(){
$(this).parent().addClass('current-week');
});
于 2013-09-03T10:01:29.437 に答える
0 
<script type="text/javascript">
 $(function() {
var startDate;
var endDate;

var selectCurrentWeek = function() {
    window.setTimeout(function () {
        $('#ui-datepicker-div').find('.ui-datepicker-current-day a').addClass('ui-state-active')
    }, 1);
}

$('.datepicker').datepicker( {
    showOtherMonths: true,
    selectOtherMonths: true,
    onSelect: function(dateText, inst) { 
        var date = $(this).datepicker('getDate');
        startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
        endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
        var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
        $(this).attr("value",$.datepicker.formatDate( dateFormat, startDate, inst.settings ));   
        selectCurrentWeek();
    },
    beforeShowDay: function(date) {
        var cssClass = '';
        if(date >= startDate && date <= endDate)
            cssClass = 'ui-datepicker-current-day';
        return [true, cssClass];
    },
    onChangeMonthYear: function(year, month, inst) {
        selectCurrentWeek();
    }
});

$('#ui-datepicker-div .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('#ui-datepicker-div .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
  });
  </script>
于 2013-09-03T09:59:21.467 に答える