asp.net - 隐藏 Kendo UI DatePicker 文本框

Question

我有一个应用程序，用户习惯于使用特定格式的日期，例如以下格式（[] 表示文本框）：

[Month] [Day] [Year] [Time] [AM/PM]

每个组件都是一个单独的文本框，所以我想做的是为此使用 Kendo UI DateTimePicker，并通过选择时的 JavaScript 为我的自定义文本框设置一个值。我对那部分没意见，但我不知道如何通过 API 隐藏视图中的输入文本框，这样我只能看到日期和时间的按钮。

有人知道如何做到这一点吗？

Answer 1

隐藏它的一种可能方法是将其放在具有 0px 宽度、高度并设置溢出的空 div 下；“隐藏”

还有单独的按钮和 onclick 以编程方式打开日期选择器。

    <div style="width:0px; height:0px; overflow:hidden;">put datepicker control here</div>​

Answer 2

如果您允许用户从 KendoUI DateTimePicker 中选择日期，请尝试将格式定义为"MMM dd yy HH tt"：

$("#datepicker").kendoDateTimePicker({
    format: "MMM dd yy HH tt"
});

这将使用您想要的格式格式化所选日期。

要禁止用户输入，您应该执行以下操作：

$("#datepicker").kendoDateTimePicker({
    format: "MMM dd yyyy HH tt"
});
$("#datepicker").attr("disabled", "disabled");

这不同于：

$("#datepicker").kendoDateTimePicker({
    format: "MMM dd yyyy HH tt"
});
$("#datepicker").data("kendoDateTimePicker").enable(false);

因为这也禁止使用按钮。

在这里检查：http: //jsfiddle.net/OnaBai/AL2FJ/

Answer 3

将类“k-widget k-datepicker k-header”的跨度宽度设置为 0。

已编辑。这是我的方法，它正在发挥作用。

@(Html.Kendo().DatePickerFor(x => Model.Date)
              .Name("date").HtmlAttributes(new { style = "width:0px;" })
              .Events(e => e.Change("onChange")))