Jquery 在左侧显示剑道日期选择器图标

Jquery 在左侧显示剑道日期选择器图标,jquery,kendo-ui,datepicker,Jquery,Kendo Ui,Datepicker,剑道日期选择器控件在输入的右侧添加日历图标。总的来说,这很好,看起来也不错 但是,“我的样式指南”在表单输入的左侧有图标。例如: <div class="input-prepend"> <span class="add-on"><i class="fa fa-usd"></i></span> @Html.TextBoxFor(m => m.PayContribution, "{0:0.00}",

剑道日期选择器控件在输入的右侧添加日历图标。总的来说,这很好,看起来也不错

但是,“我的样式指南”在表单输入的左侧有图标。例如:

<div class="input-prepend">
    <span class="add-on"><i class="fa fa-usd"></i></span>
    @Html.TextBoxFor(m => m.PayContribution, "{0:0.00}",
                     new { @class = "span10",
                     Value = @Model.PayContribution == 0m ?
                             "" : @Model.PayContribution.ToString() })
</div>

@Html.TextBoxFor(m=>m.PayContribution,“{0:0.00}”,
新建{@class=“span10”,
Value=@Model.PayContribution==0m?
“”:@Model.PayContribution.ToString()})
对于大多数用户来说,看到的是“25.00$”而不是“25.00$”的效果是相当愚蠢的


我不希望所有的输入都用左手图标,除了我的日期选择器用右手图标。有没有办法把剑道的图标移到输入框的另一边?Telerik的文档并没有简单地指出任何这类事情,但公认的答案表明,可能存在未记录的选项。在最终渲染中对DOM或CSS进行黑客攻击是另一种选择。

以下CSS似乎已经做到了这一点:

span[role=button].k-select {
    left: 0;
    border-left: 0;
    border-right: 1px solid rgb(231, 231, 231);
    border-radius: 0;
}

.k-picker-wrap {
    padding-left: 26px;
    padding-right: 0;
}

以下CSS似乎已经完成了这一任务:

span[role=button].k-select {
    left: 0;
    border-left: 0;
    border-right: 1px solid rgb(231, 231, 231);
    border-radius: 0;
}

.k-picker-wrap {
    padding-left: 26px;
    padding-right: 0;
}
覆盖此CSS

  .k-picker-wrap {
      padding-left: 22px;
      padding-right: 0;
  }
  .k-select {
      left: 0;  
覆盖此CSS

  .k-picker-wrap {
      padding-left: 22px;
      padding-right: 0;
  }
  .k-select {
      left: 0;