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

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：要使用的输入类型。默认输入类型为 text， textarea 或 选择。使用自定义提供其他输入类型 输入类型 API。

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

timepicker类型（timepicker的依赖）

或

time 输入类型（也许这是您需要时的最佳方式 快速的东西，没有任何其他插件依赖）。

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 以查看更改

Answer 2

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

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

  input.datepicker(datepicker);

它实际上是在将 jquery ui datepicker 应用到您的输入元素。

JQuery ui Datepicker 无法更改日期时间。 或者，您可以找到另一个支持此功能的库。或者您可以向 github 上的 jeditable developers 请求功能。

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