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.

Have a look at [this answer](https://stackoverflow.com/questions/642136/jeditable-with-jquery-ui-datepicker#1406886) + the second comment below it. — Steve Chambers, Dec 04 '17 at 13:21

score 1 · Answer 1 · answered Dec 04 '17 at 11:35

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.

score 1 · Accepted Answer · 2017-12-09T01:08:25.843

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

HI #Peter Darmis this is exactly what I'm looking for. However the fiddle withe the date isn't working. The end of the edit must have a value such as 2017-12-15 09:15:00 Can you show me how to do that in the fiddle? — Keith D Kaiser, Dec 08 '17 at 19:16
@KeithDKaiser if you mean that when you submitted the form the date value was undefined then check the update. — , Dec 09 '17 at 01:10
Any way to use dropdown or other method to select the date and the time (similar to what you did in the first fiddle)? — Keith D Kaiser, Dec 09 '17 at 01:56
@KeithDKaiser the UI of the `datetime-local` type depends strictly to the browser as seen here for the `time` type. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time. The only way to use `select` for both date and time would be to write an additional type in `jeditable` similar to the `time` type that would also contain date. — , Dec 09 '17 at 09:02

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

2 Answers2