Fatal编程技术网
  • javascript/
  • Javascript jquery datepicker删除当天突出显示类

Javascript jquery datepicker删除当天突出显示类

javascript jquery css date

Javascript jquery datepicker删除当天突出显示类,javascript,jquery,css,date,datepicker,Javascript,Jquery,Css,Date,Datepicker,我想从我的jquery datepicker实例中完全删除当天突出显示类。我使用datepicker内联作为一个div，因此我找到的所有用于在类上使用.find和.remove的指定方法都不起作用。我已尝试删除.ui状态突出显示的所有CSS条目，但没有任何改进。对于我的基本代码，我建议在一个新的选项卡中打开它，以便更容易地返回到这个问题。下面是代码检查的屏幕截图，显示了我需要删除的类 守则： <head><script> $( function() { var selec

我想从我的jquery datepicker实例中完全删除当天突出显示类。我使用datepicker内联作为一个div，因此我找到的所有用于在类上使用.find和.remove的指定方法都不起作用。我已尝试删除.ui状态突出显示的所有CSS条目，但没有任何改进。对于我的基本代码，我建议在一个新的选项卡中打开它，以便更容易地返回到这个问题。下面是代码检查的屏幕截图，显示了我需要删除的类

守则：

<head><script>
$( function() {
var selections = ["2017-07-29"]
function bansingle(date) {
        var excerpt = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ selections.indexOf(excerpt) == -1 ]
    }
// somehow combine this function later.
//function bandow(date) {
//              var day = date.getDay();
//          return [(day != 0 && day != 6)];
//      }


$('#dp1').datepicker({
    beforeShowDay: bansingle,
    altField:'#alternate1',
        altFormat: 'm-d-yy',
        fielddateFormat: 'm-d-yy',
    minDate: "+0d",
    //maxDate: "+1m", // set latest selectable date
});
$('#dp1').datepicker("setDate", null); //clears alternate1 input field value
});</script>
</head>
<body>
<div id="dp1"></div>
</body>
改为：

.ui-state-active {background: #F00 !important;}
当在任何可用日期上首次单击datepicker内联日历GUI时，颜色响应将与用户的操作以及将传递给PHP的数据相匹配。

您可以像这样使用其属性：

$('#dp1').datepicker({
    beforeShowDay: bansingle,
    todayHighlight: false,// make this parameter to false. It will not highlight then.
    altField:'#alternate1',
        altFormat: 'm-d-yy',
        fielddateFormat: 'm-d-yy',
    minDate: "+0d",
    //maxDate: "+1m", // set latest selectable date
});
最好的方法是编辑CSS源代码。例如：

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #fad42e;
    background: #fbec88 url(images/ui-bg_flat_55_fbec88_40x100.png) 50% 50% repeat-x;
    color: #363636;
}
。。。现在，您可以添加一个与其他单元格类似的样式

您可以如下覆盖css

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
{
    border: 1px solid #c5dbec;
    background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
    color: #2e6e9e;
}
希望你能很好地完成这个任务。@RahulGupta的可能副本与另一篇文章有一些共同点，但我正在尝试实现一个不同的最终结果，而这篇文章的建议是将CSS样式化以模仿其他单元格，正如我上面所说的，这并不适合我的需要。不过，感谢您的快速响应。todayHighlight:false在将日期选择器作为div或输入调用时不起作用（GUI本来是一个弹出窗口）。谢谢你的快速回复。欢迎@johnwayne。对不起，这对你没有帮助-（在我所有的挖掘中，在这个项目中已经有一段时间了，我没有找到关于今天突出显示选项的参考资料。我使用的是来自jqueryui.com的最新核心jquery日期选择器，你是否使用了其他发行商的某个变体？如果他们已经编写了该选项，我很想看看。可以使用引导日期选择器来完成。@johnwayried out bootstrap datepicker，bootstrap中的必备CSS与我已经构建的使用自己CSS的表单严重冲突。根据我的上一段：“编辑突出显示以使其看起来与其他可用日期一样是不好的，因为当单击当前日期时，您无法判断它是否已存在。这就是为什么我需要找出如何在我的div上使用datepicker完全删除突出显示类。"我使用的日期选择器来自持续显示的div，而不是从弹出日历GUI的输入字段。模仿其他单元格的CSS使突出显示的单元格看起来无法单击。感谢您的快速响应。请参阅我对carnaru valentin的回复，以及他类似的建议，然后是我问题的最后一段。谢谢不过反应很快。 
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
{
    border: 1px solid #c5dbec;
    background: #dfeffc url(images/ui-bg_glass_85_dfeffc_1x400.png) 50% 50% repeat-x;
    color: #2e6e9e;
}