如何根据列表日期和当前日期之间的差异更改下拉列表项的背景颜色？

Question

我在（MVC 查看文件并使用 jQuery）中有一个下拉列表；它有一些文本和一个带有 "yyyy-MM-dd" 格式的日期的子字符串，我能够提取日期并将其与当前日期进行比较并得出差异，但是基于该差异我想指定背景颜色。

我将 dueDate 子字符串存储到一个变量中并获取当前日期以获取差异。因此，如果截止日期小于 1，则具有该特定日期的项目需要具有红色背景。当我保持 alert() 消息时，当条件为真时，控件正在进入 if 语句，但设置背景的代码如何不起作用。

已过截止日期的列表项需要有红色背景。在下面的代码片段中，只有第一项需要有红色背景。`

$(document).ready(function () {
            $("#ddldueDate").each(function () {
                //Extracting DueDate - type string
                var SelectedGroup = $(this).children("option").text();
                var dueDateStr = SelectedGroup.substring(SelectedGroup.lastIndexOf('[') + 1, SelectedGroup.lastIndexOf(']'));
                //Get current date - type string
                var d = new Date();
                var month = d.getMonth() + 1;
                var date = d.getDate();
                var currDateStr = d.getFullYear() + '-' + (month < 10 ? '0' : '') + month + '-' + (date < 10 ? '0' : '') + date;

                var diff = new Date(Date.parse(dueDateStr) - Date.parse(currDateStr));
                var days = diff / 86400000;
                //alert(days);
                if (days < 1) {
                    $(this).children("option").css({ "background-color": "red" });
                } else {
                    $(this).children("option").css({ "background-color": "white" });
                }
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12" style="width:auto">
    <select id='ddldueDate' class='form-control'>
      <option>[2019-07-27] Test 1</option>
      <option>[2021-07-24] Test 2</option>
    </select>
  </div>
</div>

`

Answer 1

我们可以使用 css 设置默认 select 选项的样式。这是我弄清楚需要什么的片段。回答我自己的问题以防万一有人可以提供任何改进。

$(document).ready(function () {
            $("#ddldueDate > option").each(function () {
                //Extracting DueDate - type string
                var SelectedGroup = $(this).text();
                var dueDateStr = SelectedGroup.substring(SelectedGroup.lastIndexOf('[') + 1, SelectedGroup.lastIndexOf(']'));
                //Get current date - type string
                var d = new Date();
                var month = d.getMonth() + 1;
                var date = d.getDate();
                var currDateStr = d.getFullYear() + '-' + (month < 10 ? '0' : '') + month + '-' + (date < 10 ? '0' : '') + date;

                var diff = new Date(Date.parse(dueDateStr) - Date.parse(currDateStr));
                var days = diff / 86400000;
                if (days < 1) {
                    $(this).css({ "background-color": "maroon" });
                    $(this).css({ "color": "white" });
                } else {
                    $(this).css({ "background-color": "white" });
                    $(this).css({ "color": "black" });
                }
            });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12" style="width:auto">
    <select id='ddldueDate' class='form-control'>
      <option>[2020-07-27] Test 1</option>
      <option>[2021-07-24] Test 2</option>
      <option>[2019-07-27] Test 3</option>
      <option>[2019-07-24] Test 4</option>
    </select>
  </div>
</div>

如何根据列表日期和当前日期之间的差异更改下拉列表项的背景颜色？

How to Change BackColor of dropdown list item based on difference between list date & current date?

css

jquery

date

date-difference