CODEWITHSUNDEEP
javascriptjquerydatetimepicker
Pierre
Pierre

Reputation: 1246

Make datetimepicker working with editable-table

I am using two wonderful jQuery plugins for a project:

They work separately very well but unfortunately they are not compatible for each other. When I want to update a date in a HTML table, the calendar appears and closes when I click on the date/time, but the value in the table's cell is not updated (and Chrome's javascript console does not report any error message). Would you know a solution or a workaround for that ? You can quickly test it by yourself with the code below:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' dir='ltr'>
    <head>
        <title>Example</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src='http://mindmup.github.io/editable-table/mindmup-editabletable.js'></script>
        <link href='http://xdsoft.net/scripts/jquery.datetimepicker.css' rel='stylesheet' type='text/css' />
        <script src='http://xdsoft.net/scripts/jquery.datetimepicker.js'></script>
        <script>
            $(function() {
                $('table').editableTableWidget();
                $('.picker').datetimepicker({ format:'Y-m-d H:i' });
            });
        </script>
    </head>
    <body>
        <p>The date/time picker works perfectly:</p>
        <input class='picker' />
        </br></br>
        <p>But not in the table below:</p>
        <table style='border:1px solid black'>
            <tr><td class='picker'>2014-08-22 15:00</td></tr>
            <tr><td>However no problem for text, i.e. just here!</td></tr>
        </table>
    </body>
</html>

It would be awesome that these two plugins could work together. Thanks!

Pierre

Upvotes: 1

Views: 6321

Answers (3)

Phil Cairns
Phil Cairns

Reputation: 768

I found your question when I was looking for something that would do what you were looking to do. I didn't find it, so modified the mindmup solution, expanding it to include a couple of different editing methods. The ones I ended up with are:

  • Regular text.
  • Date, using bootstrap-datepicker.
  • Value text, which is something specific for my application, where the user can enter a whole number with or without commas and have them displayed with commas.
  • Numbers, being whole numbers using the <input type="number"> element.
  • Selects. These are a bit more tricky, but essentially you provide a javascript associative array, and the code uses the data-edit-source attribute to find the array.

There is an example on the git repository. I'd put the code in here, but I'm lazy, and don't want to explain it. Sorry about that. If you download the code, there is a demo in the index.html file.

The table looks like this:

<table id="secondDemo" class="table table-striped">
  <thead><tr>
    <th>Location</th>
    <th>Expires</th>
    <th>Count</th>
    <th>Value</th>
  </tr></thead>
  <tbody>
    <tr>
      <td data-edit-type="select" data-edit-source="locations">Adelaide</td>
      <td data-edit-type="date">24-Jan-2015</td>
      <td data-edit-type="ntext">8</td>
      <td data-edit-type="vtext">5,000</td>
    </tr>
    <tr>
      <td data-edit-type="select" data-edit-source="locations">Brisbane</td>
      <td data-edit-type="date">25-Jan-2015</td>
      <td data-edit-type="ntext">8</td>
      <td data-edit-type="vtext">15,000</td>
    </tr>
    <tr>
      <td data-edit-type="select" data-edit-source="locations">Melbourne</td>
      <td data-edit-type="date">26-Jan-2015</td>
      <td data-edit-type="ntext">9</td>
      <td data-edit-type="vtext">8,000</td>
    </tr>
    <tr>
      <td data-edit-type="select" data-edit-source="locations">Sydney</td>
      <td data-edit-type="date">27-Jan-2015</td>
      <td data-edit-type="ntext">6</td>
      <td data-edit-type="vtext">9,000</td>
    </tr>
  </tbody>
</table>

... and the required javascript looks like this:

var locations = {
    'Adelaide': 'Adelaide - South Australia',
    'Brisbane': 'Brisbane - Queensland',
    'Canberra': 'Canberra - Australian Capital Territory',
    'Darwin': 'Darwin - Northern Territory',
    'Hobart': 'Hobart - Tasmania',
    'Melbourne': 'Melbourne - Victoria',
    'Perth': 'Perth - Western Australia',
    'Sydney': 'Sydney - New South Wales'
};
$('#secondDemo').editableTableWidget();

Hope this helps.

Upvotes: 2

matthias_h
matthias_h

Reputation: 11416

As kind of workaround I just adjusted your Fiddle like that: Fiddle

with following changes:

$(function () {
  $('table').editableTableWidget();
  $('.picker').datetimepicker({
    format: 'Y-m-d H:i'
  });
  $('.pickertwo').datetimepicker({
    format: 'Y-m-d H:i'
   });
   $(".pickertwo").on("change", function () {
    var textVal = $(this).val();
    $(".textpick").text(textVal);
   });
   $(".pickTwo").on("click", function () {
    $(".pickertwo").focus();
   })
});

Markup changes:

<input class='picker' /> 
<table style='border:1px solid black' class="pickTwo">
<tr>
    <td class='textpick'></td>
</tr>
<tr>
    <td>However no problem for text, i.e. just here!</td>
</tr>
</table>
<input class='pickertwo' />

Problem is to hide the 2nd datepicker - setting display: none; or visibility: hidden; will disable the functionality. Maybe it's possible that you set a low z-index value for the 2nd input and hide it behind an image that matches the page where you would implement it and set a higher z-index for this image.

Upvotes: 0

Stryner
Stryner

Reputation: 7318

The editable table widget creates new <input/>'s that are hidden and appear whenever a user clicks on the field. In order for datetimepicker to work on those fields, you have to tell editable table to add the picker class to the inputs:

$(function() {
    $('table').editableTableWidget({editor: $('<input class="picker"/>')});
    $('.picker').datetimepicker({ format:'Y-m-d H:i' });
});

DEMO Here

Edit: I just realized that this won't work in the way you want. Looking at the code, editable table only creates 1 hidden input box that it uses for all table cells. Thus, this will only work if you want all of your table cells to be datepickers.

Upvotes: 0

Related Questions