CODEWITHSUNDEEP
jquerymysqldatetimejeditable
Keith D Kaiser
Keith D Kaiser

Reputation: 1036

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

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.

Upvotes: 1

Views: 544

Answers (2)

user2560539
user2560539

Reputation:

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

Upvotes: 1

Faizan Anwer Ali
Faizan Anwer Ali

Reputation: 671

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.

Upvotes: 1

Related Questions