Can't get DatePicker to appear

Can't get DatePicker to appear

ashiersashiers Posts: 101Questions: 8Answers: 7

I'm trying to duplicate example: http://editor.datatables.net/examples/dates/formatting.html

The issue I'm having is that the field specified as type datetime isn't producing a datepicker in the Edit dialog form. In addition, under all fields it says, "Undo Changes". I don't know where that's coming from. How do I get rid of the "Undo Changes" and get the datepicker to appear as it should? Following is my HTML:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="../media/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="../media/css/dataTables.editor.css">
  <link rel="stylesheet" type="text/css" href="../media/extensions/Buttons/css/buttons.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="../media/extensions/Select/css/select.dataTables.min.css">
  
  <script type="text/javascript" charset="utf-8" src="../media/js/jquery.js"></script>
  <script type="text/javascript" charset="utf-8" src="../media/js/moment.js"></script>
  <script type="text/javascript" charset="utf-8" src="../media/js/jquery.dataTables.js"></script>       
  <script type="text/javascript" charset="utf-8" src="../media/js/dataTables.editor.min.js"></script> 
  <script type="text/javascript" charset="utf-8" src="../media/extensions/Buttons/js/dataTables.buttons.min.js"></script> 
  <script type="text/javascript" charset="utf-8" src="../media/extensions/Select/js/dataTables.select.min.js"></script> 

  <script type="text/javascript">
            var editor; // use a global for the submit and return data rendering in the examples
 
            $(document).ready(function() {
                editor = new $.fn.dataTable.Editor( {
                ajax: "../jsp/customdates.jsp",
                table: "#example",
                fields: [ {
                    label: "First Name:",
                    name: "first_name"
                }, {
                    label: "Last Name:",
                    name: "last_name"
                }, {
                    label: "Email Address:",
                    name: "email"
                }, {
                    label: "Start Date:",
                    name: "start_date",
                    format: "YYYY/M/D",
                    type: "datetime",
                    def:   function () { return new Date(); }                                        
                }
            ]
        } );
 
        var table = $('#example').dataTable( {
            dom: "Bfrtip",
            ajax: "../jsp/customdates.jsp",
            columns: [
                { data: "first_name" },
                { data: "last_name" },
                { data: "email" },
                { data: "start_date"}               
            ],
            select: true,
            buttons: [
                {extend: "create", editor: editor},
                {extend: "edit", editor: editor},
                {extend: "remove", editor: editor}
            ]
        });     
        
    } );


        </script>
          
</head>
<body>
  <table class="display" id="example">
            <thead>
            <tr>
                <th width="25%">FIRSTNAME</th>
                <th width="25%">LASTNAME</th>
                <th width="25%">EMAIL_ADDRESS</th>
                                <th width="25%">START_DATE</th>         
            </tr>
            </thead>
            <tbody>
            <tr>
                <td colspan="4" class="dataTables_empty">Loading data from server</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th>FIRSTNAME</th>
                <th>LASTNAME</th>
                <th>EMAIL_ADDRESS</th>
                                <th>START_DATE</th>         
            </tr>
            </tfoot>
            </table>
</body>
</html>

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,522Questions: 1Answers: 10,473 Site admin

    What version of Editor are you using? If "Undo changes" is shown then it sounds like the Editor 1.4 CSS might be getting used with 1.5 Javascript.

    Also the datetime field type was introduced in 1.5.2 and requires the CSS from that package as well. 1.5.3 is the current release and 1.5.4 should be out tomorrow.

    Allan

  • ashiersashiers Posts: 101Questions: 8Answers: 7

    I downloaded Editor version 1.5.3. You were right regarding the CSS file. I was referencing an older file: dataTables.editor.css I now see that you've changed the name of it around. It's now editor.dataTables.css. Anyway, it's working now. Thanks. Are there any significant changes I should worry about with version 1.5.4? Because I've been updating and basing my examples on version 1.5.3

  • allanallan Posts: 63,522Questions: 1Answers: 10,473 Site admin

    Nothing significant. Just bug fixes primarily. one or two minor new features. It will be a drop in replacement for 1.5.3.

    Allan

    p.s. I must confess I was tempted to say that the client / server protocol has been completely changed - but I've got a little evil streak on a Monday at 17.30 ;-)

  • ashiersashiers Posts: 101Questions: 8Answers: 7

    I certainly hope you don't make any more major changes to the client/server protocol. I've been working on JED like a MAD fool trying to make it work. So far so good. My strategy is to update all the examples and make what changes are necessary in JED to get it all working again. I know you've added some new features like uploading image files. I'll have to include and test these new features in JED. I'm getting there. I just keep plugging away at it til I get it.

  • allanallan Posts: 63,522Questions: 1Answers: 10,473 Site admin
    Answer ✓

    The current protocol is something I think should stand the test of time now. There is only one change I can think of that I will consider in future, but its more an additional than a change - and that won't be until v2 at the earliest (which is going to be some time away yet).

    Allan

This discussion has been closed.