Datetime picker plug-in code not working quite right , need allen help ,thx

Datetime picker plug-in code not working quite right , need allen help ,thx

webprophetswebprophets Posts: 18Questions: 5Answers: 0
edited December 2014 in Plug-ins

My issue is similar to this post, but I can not solve it by adding the style sheet you gave him.

https://datatables.net/forums/discussion/21163/datetime-picker-plug-in-code

My php page is as below

I am trying to use datetime picker (2)

thx

Allen

This question has accepted answers - jump to:

Answers

  • webprophetswebprophets Posts: 18Questions: 5Answers: 0
    edited December 2014
    <head>
    
            -->
            <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    
    
            <link rel="stylesheet" type="text/css" href="css/demo.css">
            <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    
    
    
            <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
            <link rel="stylesheet" type="text/css" href="css/dataTables.tableTools.css">
            <link rel="stylesheet" type="text/css" href="css/dataTables.editor.css">
    
    
            <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/css/bootstrap-datetimepicker.css">
    
            
    <!--                        <style type="text/css" class="init">
    .datetimepicker {
      position: absolute;
      background: white;
      border: 1px solid #ddd;
    }
        </style>-->
            
            
            <script type="text/javascript" language="javascript" charset="utf-8" src="js/jquery.min.js"></script>
            <script type="text/javascript" language="javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    
    
            <script type="text/javascript" language="javascript" charset="utf-8" src="js/jquery.dataTables.min.js"></script>
            <script type="text/javascript" language="javascript" charset="utf-8" src="js/dataTables.tableTools.min.js"></script>
            <script type="text/javascript" language="javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
    
    
            <script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
    <script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/js/bootstrap-datetimepicker.min.js"></script>
            <script>
    
                (function($) {
    
                    $(document).ready(function() {
    
    
    //                    $("#datepicker").datetimepicker({minDate: 0});
                        $.fn.dataTable.Editor.fieldTypes.datetime = $.extend(true, {}, $.fn.dataTable.Editor.models.fieldType, {
                            "create": function(conf) {
                                var that = this;
    
                                conf._input = $(
                                        '<div class="input-group date" id="' + conf.id + '">' +
                                        '<input type="text" class="form-control" />' +
                                        '<span class="input-group-addon"><span class="glyphicon"></span>' +
                                        '</span>' +
                                        '</div>'
                                        )
                                        .attr($.extend({}, conf.attr))
                                        .datetimepicker($.extend({}, conf.opts));
    
                                return conf._input[0];
                            },
                            "get": function(conf) {
                                return conf._input.data("DateTimePicker").getDate().toString();
                            },
                            "set": function(conf, val) {
                                conf._input.data("DateTimePicker").setDate(val);
                            },
    // Non-standard Editor methods - custom to this plug-in. Return the jquery
    // object for the datetimepicker instance so methods can be called directly
                            inst: function(conf) {
                                return conf._input.data("DateTimePicker");
                            }
                        });
    
                        var editor = new $.fn.dataTable.Editor({
                            "ajax": "php/table.schedule_socialmedia.php",
                            "table": "#schedule_socialmedia",
                            "fields": [
                                {
                                    "label": "Message",
                                    "name": "message",
                                    "type": "text"
                                },
                                {
                                    "label": "Image",
                                    "name": "image",
                                    "type": "text"
                                },
                                {
                                    "label": "To",
                                    "name": "media_type",
                                    "type": "text"
                                },
                                {
                                    "label": "Scheduled sending time",
                                    "name": "time",
                                    "type": "datetime"
    //              "type": "date",
    //              "dateFormat": "D, d M y",
    //              "dateImage": "images\/calender.png"
    
                                },
                                {
                                    "label": "Message create time",
                                    "name": "time_add",
                                    "type": "date",
                                    "dateFormat": "D, d M y",
                                    "dateImage": "images\/calender.png"
                                }
                            ]
                        });
    
                        $('#schedule_socialmedia').dataTable({
                            "dom": "Tfrtip",
                            "ajax": "php/table.schedule_socialmedia.php",
                            "columns": [
                                {
                                    "data": "message"
                                },
                                {
                                    "data": "image",
                                    "render": function(data, type, full, meta) {
                                        if (data != "null")
                                        {
                                            return '<img src="' + '<?PHP echo BASE_URL . "uploads/" . $username . "/socialmedia/" ?>' + data + '" style = "width:120px;height:120px;border:0"></>';
                                        }
                                        else
                                        {
                                            return "this message with no image";
                                        }
                                    }
                                },
                                {
                                    "data": "media_type"
                                },
                                {
                                    "data": "time"
                                },
                                {
                                    "data": "time_add"
                                }
                            ],
                            "tableTools": {
                                "sRowSelect": "os",
                                "aButtons": [
                                    {"sExtends": "editor_create", "editor": editor},
                                    {"sExtends": "editor_edit", "editor": editor},
                                    {"sExtends": "editor_remove", "editor": editor}
                                ]
                            }
                        });
                    });
    
                }(jQuery));
    
    
            </script>
        </head>
    
  • webprophetswebprophets Posts: 18Questions: 5Answers: 0
    edited December 2014
    <body>
            <div class="container">
                <h1>
                    DataTables Editor - schedule_socialmedia
    
    
                </h1>
    <!--                                        <input type="text" id="datepicker" value="send now" readonly="readonly">
                                            </br>-->
                <table cellpadding="0" cellspacing="0" border="0" class="display" id="schedule_socialmedia" width="100%">
                    <thead>
                        <tr>
                            <th>Message</th>
                            <th>Image</th>
                            <th>To</th>
                            <th>Scheduled sending time</th>
                            <th>Message create time</th>
                        </tr>
                    </thead>
                </table>
    
            </div>
        </body>
    
  • webprophetswebprophets Posts: 18Questions: 5Answers: 0
    edited December 2014

    and my php table code is

    <?php
    
    /*
     * Editor server script for DB table schedule_socialmedia
     * Automatically generated by http://editor.datatables.net/generator
     */
    
    // DataTables PHP library
    include( "lib/DataTables.php" );
    
    // Alias Editor classes so they are easy to use
    use
        DataTables\Editor,
        DataTables\Editor\Field,
        DataTables\Editor\Format,
        DataTables\Editor\Join,
        DataTables\Editor\Validate;
    
    
    // Build our Editor instance and process the data coming from _POST
    Editor::inst( $db, 'schedule_socialmedia', 'id' )
        ->fields(
            Field::inst( 'message' )
                ->validator( 'Validate::notEmpty' ),
            Field::inst( 'image' )
                ->validator( 'Validate::notEmpty' ),
            Field::inst( 'media_type' )
                ->validator( 'Validate::notEmpty' ),
    //      Field::inst( 'time' )
    //          ->validator( 'Validate::dateFormat', array( 'empty'=>false, 'format'=>'D, j M y' ) )
    //          ->getFormatter( 'Format::date_sql_to_format', 'D, j M y' )
    //          ->setFormatter( 'Format::date_format_to_sql', 'D, j M y' ),
                            Field::inst( 'time' )
                ->validator( 'Validate::dateFormat', array( 'empty'=>false, 'format'=>'D, d M Y H:i:s' ) )
                ->getFormatter( 'Format::date_sql_to_format', 'D, d M Y H:i:s' )
                ->setFormatter( 'Format::date_format_to_sql', 'D, d M Y H:i:s' ),
            Field::inst( 'time_add' )
                ->validator( 'Validate::dateFormat', array( 'empty'=>false, 'format'=>'D, j M y' ) )
                ->getFormatter( 'Format::date_sql_to_format', 'D, j M y' )
                ->setFormatter( 'Format::date_format_to_sql', 'D, j M y' )
        )
        ->process( $_POST )
        ->json();
    
  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    edited December 2014

    Hi,

    I'm not 100% certain what the issue you are asking about is, but I presume it is related to the fact that the date time picker is shown on load?

    It looks like there is a bit of a mix of styles going on. You have the DataTables default style, and jQuery UI for the jQuery UI date picker.

    You have also included the Bootstrap date time picker, but not Bootstrap. I think that is the issue. I should perhaps include Bootstrap in the list of dependencies for that plug-in (although it is in the name :-) ).

    The ideal solution would be to have a standalone stylesheet for the date time plug-in (GitHub pages are down at the moment, so I can check if there is one - edit - there doesn't appear to be). If there isn' then include that.

    Otherwise, the options are to create one, or to load Bootstrap (and possibly update the other components to use Bootstrap).

    Regards,
    Allan

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Answer ✓

    Continuing the discussion from your other thread - since you are using jQuery UI's date picker already, you could consider using this extension to it (which I found by Googling): http://trentrichardson.com/examples/timepicker/ .

    It would probably also require an Editor field plug-in to be written, although it could be heavily based on the built in jQuery UI date one (in fact, almost exactly the same, just initialising a different widget from the look of things - also dropping the HTML5 date input type).

    Regards,
    Allan

  • webprophetswebprophets Posts: 18Questions: 5Answers: 0

    Hi Allen

    Your generator automaticaly add the demo.css jquery-ui.css jquery.datatables.css datatables.editor.css and these js file as below

        <link rel="stylesheet" type="text/css" href="css/demo.css">
        <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
        <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
        <link rel="stylesheet" type="text/css" href="css/dataTables.tableTools.css">
        <link rel="stylesheet" type="text/css" href="css/dataTables.editor.css">
    
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/jquery.min.js"></script>
        <script type="text/javascript" language="javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/dataTables.tableTools.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
        <script type="text/javascript" language="javascript" charset="utf-8" src="js/table.schedule_socialmedia.js"></script>
    

    Then I just follow your plugin doc page as below add bootstrap-datetimepicker.css and other two js file. that's all.

    https://editor.datatables.net/plug-ins/field-type/editor.datetimepicker-2

    And I have already read this post
    https://datatables.net/forums/discussion/21163/datetime-picker-plug-in-code
    and check the js file load order as your mentioned

    jQuery
    DataTables
    TableTools (if you are using it)
    Editor
    Plug-ins
    Your initialisation code
    
  • webprophetswebprophets Posts: 18Questions: 5Answers: 0

    Hi Allen

    Actually I just wanna use bootstrap datatime picker, not using other timepicker , not using jquery datapicker.

    Any suggestions?

    Because I follow your bootstrap doc page
    https://editor.datatables.net/plug-ins/field-type/editor.datetimepicker-2
    but seems stylesheet not quite right.

    As your mentioned before,

    "You have also included the Bootstrap date time picker, but not Bootstrap. I think that is the issue. I should perhaps include Bootstrap in the list of dependencies for that plug-in (although it is in the name :-) )."

    But from your doc
    I only need include these three file

    //cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/css/bootstrap-datetimepicker.css

    //cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js

    //cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/js/bootstrap-datetimepicker.min.js

    I am little bit confused. Because I just follow your bootstrap plugin document and using your generator.

    Why don't you make an example like other functions to make it easier for newbie like me :>

    Thank you very much

  • webprophetswebprophets Posts: 18Questions: 5Answers: 0

    I have send onsite box message about my html page link
    Could you have a look it ?
    Thanks

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin
    Answer ✓

    Hi,

    Thanks for the reply. The Bootstrap Date time picker library makes an assumption that Bootstrap would be included on the page. I will update the plug-in to explicitly indicate that Bootstrap is required, rather than just implicitly in the name.

    There is a Bootstrap example for Editor available on the site here. Generator at the moment doesn't automatically include all of the field required for Bootstrap (I will be writing an update for it in future which will add that option).

    So what you want to do is:

    1. Remove the jQuery UI CSS and JS libraries from your page
    2. Add Bootstrap to the page
    3. Likely you will want to include the Editor / Bootstrap and DataTables / Bootstrap integration files (and remove the default DataTables styling files!). The JS and CSS tabs below the table in the Bootstrap example show the files that are included in that example.

    You don't have to do step 3, but if you want to use Bootstrap, it makes sense to use it consistently.

    Why don't you make an example like other functions to make it easier for newbie like me

    Agreed - the plug-ins need specific examples as well. I've added it to the list!

    Let me know how you get on with this.

    Thanks,
    Allan

This discussion has been closed.