代码之家 › 专栏 › 技术社区 › Muhammad Raghib

Jquery日历弹出式颜色更改

jquery-ui html jquery javascript

Muhammad Raghib · 技术社区 · 7 年前

我正在使用jquery创建一个日期选择器。我在更改弹出日历的颜色时遇到问题。我的代码是:

 $(function() {
    $( "#checkin" ).datepicker({minDate : 0, dateFormat: 'dd-mm-yy'});
    $("#checkin").addClass("my-class");
    $("#checkout").attr("disabled", "disabled");
    $( "#checkout" ).datepicker({minDate:0, dateFormat: 'dd-mm-yy'});

    $( "#checkin" ).on("change",function(){
        onCheckin();

    });

});

function onCheckin(){
    if($("#checkin").val() !== ""){
        $("#checkout").removeAttr("disabled");
        var dateMin = $('#checkin').datepicker("getDate");
        var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(), dateMin.getDate() + 1);
        $("#checkout").datepicker('option', 'minDate', new Date(rMin));
    }else{
        $("#checkout").val("");
        $("#checkout").attr("disabled", "disabled");
    }
}

html是:

<div class='row'>
    <div class='col-4'>
    <p>Checkin: <input type='text' id='checkin' ></p><br>
    </div>
    <div class='col-4'>
    <p>Checkout: <input type='text' id='checkout'>
    </div>
</div>

Css是:

.my-class{
    background-color: #FF0F0F !important;
}

它改变了文本区域的颜色,但我想在日历弹出时提供刚性背景。我是网络开发新手。任何帮助都将不胜感激。

1 回复 | 直到 7 年前

4b0 Agit 7 年前

日历弹出窗口保持类 ui-datepicker 。因此,请尝试以下css:

.ui-datepicker {
  background-color: #FF0F0F !important;
 }

或:

$('.ui-datepicker').addClass('my-class');

您的班级是:

.my-class{
  background-color: #FF0F0F !important;
 }

正在工作的代码段。

$('#date').datepicker();
$('.ui-datepicker').addClass('my-class');

.my-class{
    background-color: #FF0F0F !important;
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<input type='text' id='date'/>

推荐文章

chris loughnane · 使用jQuery UI滑块移动和缩放svg元素时遇到问题?

6 年前

Tirkesh Turkesh · 如何在可拖放div中释放项目的精确位置元素上拖放

6 年前

ferralucho · Hightlight jquery datepicker标头选定的星期几

6 年前

Paili · 如何在jQuery自动完成中添加其他内容?

6 年前

monu · 动态嵌套选项卡创建

7 年前

Tirkesh Turkesh · 可拖动行在jquery中不工作?

7 年前

Joe · WordPress-如何按字母顺序排列jQuery自动完成搜索建议结果,优先排序第一个字符,然后再排序第二个字符等。?

7 年前

Triwahyu Pamungkas Pribadi · 如何在可拖动停止时获取目标/类名

7 年前

pcCC28 · 如何基于jwt令牌身份验证保持用户登录。

7 年前

buggy1985 · 具有多个元素的jQuery UI Sortable抛出“TypeError:无法读取null的属性‘insertBefore’”

7 年前