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

webprophets · December 2014

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

webprophets · 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>

webprophets · 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>

webprophets · 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();

allan · 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

allan · December 2014

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

webprophets · December 2014

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

webprophets · December 2014

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

webprophets · December 2014

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

allan · December 2014

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:

Remove the jQuery UI CSS and JS libraries from your page
Add Bootstrap to the page
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

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

Answers

Howdy, Stranger!

Categories

DataTables

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

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables