时间戳

首页 > 解决方案 > jQuery datepicker css 格式化

jquery - jQuery datepicker css 格式化

问题描述

我正在尝试实现 Jquery 日期选择器，使其看起来如附图所示。但我最终得到的是附加的图像（实际）实际的 预期的

1）第一个问题是我如何让绿色和红色框与那些文本框（文本框的一部分）左对齐，如果我调整窗口大小或使用不同的分辨率，因为它是 2 个不同的组件，它会失去对齐（如所见在附件中。

2) 如何在日历图标和文本条目之间添加分隔线？

3) 为文本框添加与预期图像框中相同的边框。

代码： HTML

<span class="input-color">
 <div class="color-box-green"> </div>
</span>
<div>
  <input type="text" id="greenDate" [ngModel]="data.approvedDate | date:'MM/dd/yyyy'" class="datepickerIconIn" size="10" >
</div>

$(".datepickerIconIn").datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: 'mm/dd/yy'
})

CSS

input.datepickerIconIn
{
  background-image : url('/assets/img/calender.png');  
  background-size: 20px; 
  background-Position : 98% center;
  background-Repeat :no-repeat;
  cursor:pointer;  
}
.input-color .color-box-green {
    width: 6px;   
    height: 20px;
    position: left;
    background-color: green;
    float: left;
}

标签： jqueryhtmlcss

解决方案

来自评论：«当我调整窗口大小时，颜色框和日期框显示为 2 行。»

首先，a<div>中的 a<span>是无效标记。

我建议如下：

input.datepickerIconIn{
  background-image : url('/assets/img/calender.png');  /* This obviously doesn't show here */
  background-size: 20px; 
  background-position : 98% center;
  background-repeat :no-repeat;
  cursor:pointer;  
}
.colored-input{
  margin:0 0 0 0.4em;  /* the left margin has to be the same has the .color left position offset. */
}
.input-color {
  position:absolute;
  top:0.5em;
  left:0.4em;  /* Left offset */
  width: 0.5em;
  height: 1.3em;
}
.input-color.green {
  background-color:green;
}
.input-color.red {
  background-color:red;
}
/* And so on with the colors */
<div class="colored-input">
  <span class="input-color green"></span><input type="text" id="greenDate" [ngModel]="data.approvedDate | date:'MM/dd/yyyy'" class="datepickerIconIn" size="10" >
</div>

在codePen上也是如此，您可以在其中调整视口的大小以及实例化日期选择器的位置。您会注意到颜色“标记”将在调整大小时保留输入。

您只需在输入前添加一个具有适当颜色类的空范围。整体必须在里面.colored-input。
（是的，我在这里稍微重命名了......我强烈建议您为元素使用真正有意义的类名。从长远来看，它会有所帮助。）

推荐阅读