使用 jQueryUI datepicker 时无法更改输入背景颜色

Posted 2023-02-23

【中文标题】使用 jQueryUI datepicker 时无法更改输入背景颜色

【英文标题】：Cannot change the input background color when using jQueryUI datepicker

【发布时间】：2019-05-14 19:07:49

【问题描述】：

我正在尝试添加一项功能，用户可以在单击时钟图标后选择日期。我通过使用 jqueryui datepicker() 组件来实现它。我遇到的问题是我无法更改日期输入区域的背景颜色。它应该是一种灰色，然后是白色，然后是灰色等。

这是我的代码：

html

     <ul>
            <li><span class="deltbtn"><i class="far fa-trash-alt"></i></span>set deadline<input type="text" class="datepicker"></li>
            <li><span class="deltbtn"><i class="far fa-trash-alt"></i></span>bbbbbbb<input type="text" class="datepicker"></li>
            <li><span class="deltbtn"><i class="far fa-trash-alt"></i></span>ccccccc<input type="text" class="datepicker"></li>
     </ul>

javascript

     var getinput = (function () 
    //grab text from input form
    var inputtext = $('#inputText').val();

    //empty the input form
    $('#inputText').val("");

    //create a new li and add it to the ul
    $('ul').append('<li><span class="deltbtn"><i class="far fa-trash-alt"></i></span>' + inputtext + '<input type="text" class="datepicker"></li>')

    //create deadline by using jQueryui.datepicker() component 
    $(function () 
        $(".datepicker").datepicker( minDate: new Date() );
    );
    $.datepicker.setDefaults(
        showOn: "both",
        buttonImageOnly: true,
        buttonImage: "deadlineicon.svg",
        buttonText: "Set Deadline"
    );
    $('ul').on('click', '.datepicker', function (event) 
        event.stopPropagation();
    )
 );

CSS

    .datepicker
    background: #fff;
    width: 25%;
    float: right;
    display: block;
    cursor: pointer;
    padding: 0.5rem 0.5rem 0.6rem 0.5rem;


.ui-datepicker-trigger  
    position:relative;
    float: right;
    top:13px; 
    right:-170px ; 
    height:20px 


input:nth-of-type(2n)
    background: #f7f7f7;

任何帮助将不胜感激。

【参考方案1】：

你的 html 结构和你想象的不一样：

代替

input:nth-of-type(2n)
    background: #f7f7f7;

试试

li:nth-child(2n) input
    background: red;