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

Question

我使用 Jeditable 允许在我的页面上编辑 table。它更新 MySQL table 并且一切正常。

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

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

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

Answer 1

直接来自 jeditable 的 source file。看fie的结尾

  if (settings.datepicker) {
    jQuery.extend(datepicker, settings.datepicker);
  }

  input.datepicker(datepicker);

它实际做的是将 jquery ui 日期选择器应用于您的输入元素。

JQuery ui Datepicker 无法更改日期时间。或者，您可以找到另一个支持此功能的库。或者您可以在 github.

上向 jeditable developers 请求功能

我建议您寻找任何其他库，因为我怀疑开发人员是否会帮助您，因为他们开发它已经六七年了。而且你不应该使用折旧的库。

Answer 2

来自 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).

可以在fiddle

中找到time输入类型的简单示例

编辑

您也可以尝试通过添加 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 以查看更改

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

Best way to allow editing of a datetime value in a jeditable environment?

jquery

mysql

datetime

jeditable