隐藏 Kendo DatePicker 按钮 - 有选择地 (CSS)答案

【问题标题】：Hiding Kendo DatePicker button - selectively (CSS)隐藏 Kendo DatePicker 按钮 - 有选择地 (CSS)
【发布时间】：2016-08-25 17:37:26
【问题描述】：

我在Telerik site 上发现可以使用以下样式标签隐藏 Kendo DatePicker 上的默认按钮：

<style>
.k-datepicker .k-select {
    display: none;
}

.k-datepicker .k-picker-wrap {
    padding: 0;
}

.k-datepicker .k-input {
    border-radius: 3px;
}
</style>

如何将此样式应用于给定页面上的一个 Kendo DatePicker，而不是另一个？

请原谅我的新手分析，但我相信上面给出的样式使用了 Kendo css 文件中的类名，这让我不确定如何将它应用于某些控件而不是其他控件。

我的过期许可证阻止我在 Telerik 上发布这个问题。

谢谢！

【问题讨论】：

标签： html css kendo-ui datepicker styles

【解决方案1】：

在 JS 中初始化你的日期选择器，你可以像这样添加一个属性：

$("#datepicker").kendoDatePicker()
   .attr("class", "datepicker_hidden");

然后使用你的新类来设置样式

.datepicker_hidden .k-select {
    opacity: 0;
}

编辑：您可能仍希望能够单击以打开日期选择器，因此我更改了 CSS 以反映这一点。如果您打算以编程方式“单击”日期选择器，那么您可以将 display:none; 用于 css。

以下是隐藏和非隐藏日期选择器的示例：http://dojo.telerik.com/UlAcE

【讨论】：

好的，非常感谢。您的建议有效，尽管我对我的 DatePicker 使用以下 Razor 语法：我必须将“@”替换为“*”才能在此处作为评论发布... *(Html.Kendo().DatePickerFor(model => model.ShipRequestStatusDate) .Format("MM/dd/yyyy") .HtmlAttributes(new { *readonly = true, *class= "datepicker_hidden" }))
@FrancisKhoury 啊，我不知道，但是是的，这个概念应该是一样的。很高兴它成功了！