在左侧显示 Kendo 日期选择器图标答案

【问题标题】：Display Kendo datepicker icon on the left在左侧显示 Kendo 日期选择器图标
【发布时间】：2014-07-31 21:56:45
【问题描述】：

Kendo 日期选择器控件在输入的右侧添加了一个日历图标。总的来说，这很好，而且看起来还不错。

但是，我的样式指南在表单输入的左侧侧有图标。例如：

<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>

对于大多数看到“25.00 $”而不是“$25.00”的用户来说，这看起来相当愚蠢

我不希望我的所有输入都带有左侧图标，除了带有右侧图标的日期选择器。有什么办法可以把剑道的图标移到输入框的另一边？ Telerik 的文档并没有简单地指出任何此类事情，但对Is it possible to set a direction for the Kendo DatePicker (Calendar)? 的接受回答表明可能存在未记录的选项。在最终渲染中修改 DOM 或 CSS 是另一种选择。

【问题讨论】：

标签： jquery kendo-ui datepicker

【解决方案1】：

下面的 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;
}

【讨论】：

【解决方案2】：

覆盖这个 CSS

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

【讨论】：