datepicker go under overlay then 'datetime' field is editing

Vitaliz

Hi, Allan.
I use 'datetime' type field in my project and than I edit it, datepicker appeared in left down screen corner under editor's window halftone overlay.
I upgraded editor to 1.5.4. version, but problem not solved yet.

This is link to live example http://uchet.nuzenavtor.ru/Ed-15/dt/modx_vkrzakaz.html
Datatable debug code is oreqoy.

and link to screenshot of editor's window https://dl.dropboxusercontent.com/u/18673924/editor-datetime-field.png

My editor definition:

var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.modx_vkrzakaz_sm.php',
        table: '#modx_vkrzakaz',
        fields: [

            {
                "label": "\u2116 \u0437\u0430\u043a\u0430\u0437\u0430",
                "name": "modx_vkrzakaz.no_zak"
            },
            {
                "label": "\u041a\u043b\u0438\u0435\u043d\u0442",
                "name": "modx_vkrzakaz.kli_zak",
                                "type": "select"
            },
                       
                        {
                "label": "ВУЗ",
                "name": "modx_vkrklient.vuz"
            },
                        {
                "label": "Е-mail",
                "name": "modx_vkrklient.toemail"
            },
                        {
                "label": "Город",
                "name": "modx_vkrklient.city"
            },
            {
                "label": "\u0410\u0432\u0442\u043e\u0440",
                "name": "modx_vkravtor.name"
                        },
            {
                "label": "\u0412\u0438\u0434 \u0437\u0430\u043a\u0430\u0437\u0430",
                "name": "modx_vkrzakaz.vid_zak",
                                "type": "select"
            },
                        {
                "label": "Отсутствует",
                "name": "modx_vkrzakaz.is_step1",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
            {
                "label": "Отсутствует",
                "name": "modx_vkrzakaz.is_step2",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
            {
                "label": "Отсутствует",
                "name": "modx_vkrzakaz.is_step3",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
            {
                "label": "Отсутствует",
                "name": "modx_vkrzakaz.is_step4",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
            {
                "label": "Отсутствует",
                "name": "modx_vkrzakaz.is_step5",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
            {
                "label": "Отсутствует",
                "name": "modx_vkrzakaz.is_step6",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
            {
                "label": "Отсутствует",
                "name": "modx_vkrzakaz.is_step7",
                                "type": "checkbox",
                "separator": "|",
                "options": [
                    {label: '', value: '1'}
                ]
            },
    
            {
                "label": "Тема",
                "name": "modx_vkrzakaz.tema_zak"
            },
                        {
                "label": "Предприятие",
                "name": "modx_vkrzakaz.predpr_zak"
            },
                        {
                "label": "Сезон заказа",
                "name": "modx_vkrzakaz.sezon_zak"
            },
                        {
                "label": "Срок заказа",
                "name": "modx_vkrzakaz.srok_zak",
                                type:   'datetime',
                                def:   function () { return new Date(); }
            },
                        {
                "label": "Приоритет",
                "name": "modx_vkrzakaz.priority"
            },
                        {
                "label": "\u0421\u0443\u043c\u043c\u0430 \u0437\u0430\u043a\u0430\u0437\u0430",
                "name": "modx_vkrzakaz.sum"
            },
            {
                "label": "\u041e\u043f\u043b\u0430\u0447\u0435\u043d\u043e",
                "name": "modx_vkrzakaz.sum_opl"
            },
            {       "label": "Комментарий",
                "name": "modx_vkrzakaz.comment"
            }
        ]
    } );

Vitaliz

This is my datatable definition.

var table2 = $('#modx_vkrzakaz').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.modx_vkrzakaz_sm.php',
        columns: [
                        
            {
                "data": "modx_vkrzakaz.no_zak"
            },
            {
                "data": "modx_vkrklient.fio"
            },
            {
                "data": "modx_vkravtor.name"
            },
            {
                "data": "modx_vkrvidzak.vidname"
            },
            {
                "data": "modx_vkrzakaz.tema_zak"
            },
                        {
                "data": "modx_vkrzakaz.priority"
            },
                        {
                "data": "modx_vkrzakaz.comment"
            }/*,
                          {
                "data": "modx_vkrzakaz.priority"
            }
                      
                        
                        
                         * ,
            {
                "data": "modx_vkrzakaz.sum"
            },
            {
                "data": "modx_vkrzakaz.sum_opl"
            },
            {
                data: null,
                className: "center",
                defaultContent: '1'
            },
            {
                data: null,
                className: "center",
                defaultContent: '<span class="show_msg">Просмотреть</span>'
            }*/
        ],
        lengthChange: false,
                 order: [[ 0, "asc" ]],
                select: true,
        buttons: [ 
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor } 
        ] 
    } );

Vitaliz

This field definition

 {
                "label": "Срок заказа",
                "name": "modx_vkrzakaz.srok_zak",
                 "type":   "datetime",
                 "def":     function () { return new Date(); }
 }

works in examples, but don't working in my code((.
How I can solve this problem?

allan

It looks like the Editor CSS file hasn't been included. You need to include editor.bootstrap.css on your page as well.

Allan

Vitaliz

It looks like the Editor CSS file hasn't been included.

But it's included...
Here is full text of my head section.

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

    <title>Ввод и редактирование заказов</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/buttons.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/select.bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="css/editor.bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <!--link rel="stylesheet" type="text/css" href="css/mess_init.css"-->
    <script type="text/javascript" charset="utf-8" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/buttons.bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/dataTables.select.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
    <!--script type="text/javascript" charset="utf-8" src="js/date.format.js"></script-->
        <!--script type="text/javascript" charset="utf-8" src="js/moment-loc.min.js"></script-->
        <script type="text/javascript" language="javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/editor.bootstrap.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/table.modx_vkrzakaz_redv3.js"></script>
    <!--script type="text/javascript" charset="utf-8" src="js/vkrraspred_init2.js"></script-->

</head>

Vitaliz

Thanks, Allan.
You are right. This problem in css. It was from old version. I rewrite it with new from Editor 1.5.4 package and now datepicker is working.