Kendo : time picker as a text box - kendo-ui

Question

I want to be able to create a time picker as a text box (and not the default time drop down).
I am trying to use patterns validate the time format but it’s not showing me an error when the input does not match the pattern.
http://jsfiddle.net/nehaverma8nehaverma8/n5p8t/4/
How should I go about this?
{
field: "Time",
editor: timeStringEditor,
pattern: "{([0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]}", // this doesn;t work
maxLength : 5,
required : true,
validationMessage : "Please enter time",
validation: {
required: true,
unique: uniqueWeatherTime
},
}

Answer 1

Try this method
<div id="cities_tbl"></div>
var entries = [
{ "city":"Boston", "time":"10:14", datetime: "2012-08-28T10:14:00.000Z" },
{ "city":"Kyoto", "time":"23:14", datetime: "2012-08-28T23:14:00.000Z"},
{ "city":"La Paz", "time":"10:14", datetime: "2012-08-28T10:14:00.000Z"},
{ "city":"San Francisco", "time":"07:14", datetime: "2012-08-28T07:14:00.000Z"},
{ "city":"Salt Lake City", "time":"08:14", datetime: "2012-08-28T08:14:00.000Z"},
{ "city":"Salvador", "time":"11:14", datetime: "2012-08-28T11:14:00.000Z"},
{ "city":"Salzburg", "time":"16:14", datetime: "2012-08-28T16:14:00.000Z" },
{ "city":"San Diego", "time":"07:14", datetime: "2012-08-28T07:14:00.000Z" }
];
function timeEditor(container, options) {
$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoTimePicker({});
}
function dateTimeEditor(container, options) {
console.log("options", options);
$('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
.appendTo(container)
.kendoDateTimePicker({});
}
$("#cities_tbl").kendoGrid({
dataSource:{
data:entries,
schema:{
parse:function (response) {
$.each(response, function (idx, elem) {
if (elem.time && typeof elem.time === "string") {
elem.time = kendo.parseDate(elem.time, "HH:mm");
}
if (elem.datetime && typeof elem.datetime === "string") {
elem.datetime = kendo.parseDate(elem.datetime, "yyyy-MM-ddTHH:mm:ss.fffZ");
}
});
return response;
}
}
},
columns:[
{ command: [ "edit" ] },
{ field:"city", title:"City" },
{ field:"time", title:"Time", format:"{0:HH:mm}", editor: timeEditor },
{ field:"datetime", title:"Date - Time", format:"{0:yyyy-MM-dd HH:mm}", editor: dateTimeEditor }
],
editable:"inline",
navigatable:true
});
Here is a live demo:http://jsfiddle.net/OnaBai/ZCyPx/1/