Скрытие текстового поля Kendo UI DatePicker

У меня есть приложение, в котором пользователи привыкли к специально отформатированной дате, например, в следующем формате ([] обозначает текстовое поле):

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

Каждый компонент представляет собой отдельное текстовое поле, поэтому я хотел бы использовать для этого Kendo UI DateTimePicker и через JavaScript при выборе установить мои пользовательские текстовые поля со значением. Я согласен с этой частью, но я не могу понять, как с помощью API скрыть текстовое поле ввода из представления, чтобы я видел только кнопки для даты и времени.

У кого-нибудь есть идея, как это можно сделать?


asp.net asp.net-mvc kendo-ui kendo-datepicker kendo-datetimepicker
person Brian Mains    schedule 14.05.2014    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Один из возможных способов скрыть это - поместить его под пустой div с шириной, высотой 0 пикселей и установить переполнение; "скрытый"

Также есть отдельная кнопка и щелчок, открывающий средство выбора даты программно.

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

arrow_upward
0
arrow_downward

Если вы разрешите пользователю выбирать дату из 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/

person OnaBai    schedule 15.05.2014

arrow_upward
0
arrow_downward

Установите ширину диапазона с классом «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")))
person Mike    schedule 14.05.2014
comment
Хорошо, это будет означать, что это решение javascript, то есть вы не можете указать это в настройках инициализации плагина? - person Brian Mains; 15.05.2014