Question

我在我的网站上实现了jquery datepicker的实例。我希望在我的日历上显示日期，这完美有效，但我想禁用任何形式的互动。我试过的一件事是禁用所有日期，这很好 - 因为在用户无法点击任何日期，但他们都变得灰暗，我不希望这发生。我已尝试在我的代码中添加各种CSS，但它不会消除禁用日期的灰化/变暗效果。

有没有人知道如何做到这一点 - 或者可能有更好的方法来简单地禁用用户交互而不实际指定日期为“已禁用”

<head>
<meta charset="UTF-8">
<title>Date-Scatter - Latest Statement Assessments</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
    .ui-highlight .ui-state-default{
        background: red !important;
        border-color: red !important;
        color: white !important;
    }

    div.ui-datepicker{
        font-size:10px;
    }

    #datepicker-container{  
        text-align:center;
    }

    #datepicker-center{
        display:inline-block;
        margin:0 auto;
    }
</style>
<script type="text/javascript" language="javascript">       
    var dates = ['2016-01-05','2016-01-15','2016-01-25'];
    jQuery(function(){
         $("#datepicker").datepicker({
            numberOfMonths: [2, 3], 
            changeMonth: false,
            changeYear: false,
            defaultDate: '-5m',
            beforeShowDay : function(date){
                var y = date.getFullYear().toString(); // get full year
                var m = (date.getMonth() + 1).toString(); // get month.
                var d = date.getDate().toString(); // get Day
                if(m.length == 1){ m = '0' + m; } // append zero(0) if single digit
                if(d.length == 1){ d = '0' + d; } // append zero(0) if single digit
                var currDate = y+'-'+m+'-'+d;
                if(dates.indexOf(currDate) >= 0){
                    return [false, "ui-highlight"]; 
                }else{
                    return [false];
                }                   
            }
        });
        $('#datepicker').find('.ui-datepicker-next').remove();  
        $('#datepicker').find('.ui-datepicker-prev').remove();
    })
</script>
</head>
<body>
    <div id="datepicker-container" style="text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold">
    Date-Scatter - Latest Statement Assessments<br/><br/>
        <div id="datepicker-center">
            <div id="datepicker">
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

感谢您的建议...... 我也突然想到也可以帮助其他人...... 我的日期选择器在div中，所以我只是删除了与div的所有鼠标交互!!!

CSS

.disabledbutton {
    pointer-events: none;
}

然后$("#datepicker").datepicker().addClass("disabledbutton")

适合我！

删除jquery datepicker的禁用日期的'greyed outness'

1 个答案: