jquery - 允许在可编辑环境中编辑日期时间值的最佳方法？

Question

我使用 Jeditable 来编辑我页面上的表格。它更新了一个 MySQL 表并且一切正常。

我还想添加编辑日期时间值的功能。所以我尝试使用 jquery.jeditable.datepicker.js 来完成这项工作。但它仅适用于日期值，不适用于日期时间值。

$('.editTimeIn').editable('save.php', { 
    type        : 'datepicker',
        datepicker: {
            dateFormat: 'yy-mm-dd',
            numberOfMonths: 2
        }
});

我需要让用户能够选择日期和时间。您对此功能有什么建议？如果可能，请使用示例。

Answer 1

来自 jeditable文档。

(String) type: Input type to use. Default input types are text, textarea or select. Additional input types are provided using custom input type API.

因此，如果您仔细查看 jeditable additional input types你会发现你可以使用

timepicker type (dependency of timepicker)

或

a time input type (perhaps this is the best way in case you need something quick and without any other plugin dependancy).

time 输入类型的简单示例可以在 fiddle 中找到

编辑

您还可以尝试通过添加 datetime-local 输入类型来扩展其他输入类型，如下所示(只是一个简单的演示)

$.editable.addInputType('datetime', {
/* Create input element. */
element : function(settings, original) {
    // pattern is fallback for browsers not supporting datetime-local   
    var datetime_local = $('<input id="datetime_" type="datetime-local" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required />');
    $(this).append(datetime_local);         
var hidden = $('<input type="hidden">');
$(this).append(hidden);
return(hidden);
},
submit : function(settings, original) {
    var value = $('input:#datetime_').val();
    $("input", this).val(value);
}
});

请检查更新的fiddle也可以查看更改