Question

我希望能够将时间选择器创建为文本框（而不是默认时间下拉菜单）。我正在尝试使用模式验证时间格式，但是当输入与模式不匹配时，它不会显示错误。

http://jsfiddle.net/nehaverma8nehaverma8/n5p8t/4/

我应该怎么做？

{
        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

试试这个方法

<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
});

这是一个现场演示：http://jsfiddle.net/OnaBai/ZCyPx/1/

剑道：时间选择器作为文本框

1 个答案: