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

Question

I use Jeditable to allow editing of a table on my page. It updates a MySQL table and it all works fine.

I would like to add the ability to edit a datetime value as well. So I tried using jquery.jeditable.datepicker.js to do the job. But it works only with date values not datetime values.

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

I need to be able to give the user the ability to pick the date and time. What recommendations do you have for this functionality? If possible please use examples.

Answer 1

From jeditable documentation.

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

So if you take a closer look in jeditable additional input types you will see that you could use

timepicker type (dependency of timepicker)

or

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

A simple example of time input type can be found in this fiddle

EDIT

You could also try to extend additional input types by adding datetime-local input type such as below (just a simple demo)

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

Please check the updated fiddle also to view the changes

Answer 2

Directly from source file of jeditable. Look at the end of the fie

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

  input.datepicker(datepicker);

What it's actually doing is applying jquery ui datepicker to your input element.

JQuery ui Datepicker doesn't have the ability to change datetime. Alternatively you can find another library which support this. or you can request a feature from jeditable developers on github.

I recommend you to find any other library because I doubt that developers would help you because it's been six or seven years since they worked on it. and you shouldn't use depreciated libraries.