Question

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

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

每个组件都是一个单独的文本框，所以我想要做的是使用Kendo UI DateTimePicker，并通过JavaScript选择设置我的自定义文本框的值。我对那个部分没关系，但我无法弄清楚如何通过API隐藏视图中的输入文本框，以便我只看到日期和时间的按钮。

任何人都知道如何做到这一点？

Answer 1

隐藏它的一种可能方法是将它放在一个宽度为0px，高度和设置溢出的空div下;＆＃34;隐藏＆＃34;

还有单独的按钮，然后以编程方式打开datepicker。

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

Answer 2

将类别'k-widget k-datepicker k-header'的span宽度设置为0。

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

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

Answer 3

如果您允许用户从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/

隐藏Kendo UI DatePicker TextBox

3 个答案: