Date entry Calendar pop-up

wonglik

I have tested and found that date fields in scroll right pages can't have Calendar pop-up. It can pop-up without problem in the first page. Is that anything I can adjust?

colin

The "without problem in the first page" suggests in may be down to this issue here. Could you take a look at that, please, and if it doesn't help, can you post your code so we can see the issue.

Colin

wonglik

How can I send in the file for checking?

allan

Ideally if you could link to the page please. If you can't post the link publically, you can PM it to me by clicking my forum user name and then the "Send message" button.

Alternatively, a test case could be created using https://live.datatables.net , JSFiddle, CodePen, StackBltiz or one of any other similar service.

Allan

wonglik

/*
* Editor client script for DB table Orders
* Created by http://editor.datatables.net/generator
*/

addEventListener("DOMContentLoaded", function () {
var editor = new DataTable.Editor( {
ajax: 'php/table.Orders.php',
table: '#Orders',
fields: [
{
"label": "Factory:",
"name": "factory"
},
{
"label": "Customer:",
"name": "customer"
},
{
"label": "Season:",
"name": "season"
},
{
"label": "Buy:",
"name": "buy"
},
{
"label": "CoNew:",
"name": "conew"
},
{
"label": "issDate:",
"name": "issdate",
"type": "datetime",
"format": "YYYY-MM-DD"
},
{
"label": "Brand:",
"name": "brand"
},
{
"label": "ProductCategory:",
"name": "productcategory"
},
{
"label": "Style:",
"name": "style"
},
{
"label": "CustomerStyle:",
"name": "customerstyle"
},
{
"label": "Description:",
"name": "description"
},
{
"label": "Product:",
"name": "product"
},
{
"label": "T2:",
"name": "t2"
},
{
"label": "Fabric:",
"name": "fabric"
},
{
"label": "FabricType:",
"name": "fabrictype"
},
{
"label": "ProdType:",
"name": "prodtype"
},
{
"label": "Construction:",
"name": "construction"
},
{
"label": "Efficiency:",
"name": "efficiency"
},
{
"label": "PnNo:",
"name": "pnno"
},
{
"label": "POQty:",
"name": "poqty"
},
{
"label": "PNQty:",
"name": "pnqty"
},
{
"label": "MaterialArr:",
"name": "materialarr"
},
{
"label": "ExFty:",
"name": "exfty",
"type": "datetime",
"format": "YYYY-MM-DD"
},
{
"label": "FtyLine:",
"name": "ftyline"
},
{
"label": "ProdPN:",
"name": "prodpn"
},
{
"label": "Color:",
"name": "color"
},
{
"label": "Gender:",
"name": "gender"
},
{
"label": "ProdQty:",
"name": "prodqty"
},
{
"label": "Cutting:",
"name": "cutting",
"type": "datetime",
"format": "YYYY-MM-DD"
},
{
"label": "Allocate:",
"name": "allocate",
"type": "datetime",
"format": "YYYY-MM-DD"
},
{
"label": "StartSew:",
"name": "startsew",
"type": "datetime",
"format": "YYYY-MM-DD"
},
{
"label": "SewComplete:",
"name": "sewcomplete",
"type": "datetime",
"format": "YYYY-MM-DD"
},
{
"label": "Add4DaysPacking:",
"name": "add4dayspacking",
"type": "datetime",
"format": "YYYY-MM-DD"
},
{
"label": "FirstRevCRDDate:",
"name": "firstrevcrddate",
"type": "datetime",
"format": "YYYY-MM-DD"
},
{
"label": "SecondRevCRDDate:",
"name": "secondrevcrddate",
"type": "datetime",
"format": "YYYY-MM-DD"
},
{
"label": "FinalRevCRDDate:",
"name": "finalrevcrddate",
"type": "datetime",
"format": "YYYY-MM-DD"
},
{
"label": "FtyRevSewComplete:",
"name": "ftyrevsewcomplete",
"type": "datetime",
"format": "YYYY-MM-DD"
},
{
"label": "FinalRevSewComplete:",
"name": "finalrevsewcomplete",
"type": "datetime",
"format": "YYYY-MM-DD"
},
{
"label": "delayDays:",
"name": "delaydays"
},
{
"label": "delayDaysRange:",
"name": "delaydaysrange"
}
]
} );

var table = new DataTable('#Orders', {
    ajax: 'php/table.Orders.php',
    columns: [
        {
            "data": "factory"
        },
        {
            "data": "customer"
        },
        {
            "data": "season"
        },
        {
            "data": "buy"
        },
        {
            "data": "conew"
        },
        {
            "data": "issdate"
        },
        {
            "data": "brand"
        },
        {
            "data": "productcategory"
        },
        {
            "data": "style"
        },
        {
            "data": "customerstyle"
        },
        {
            "data": "description"
        },
        {
            "data": "product"
        },
        {
            "data": "t2"
        },
        {
            "data": "fabric"
        },
        {
            "data": "fabrictype"
        },
        {
            "data": "prodtype"
        },
        {
            "data": "construction"
        },
        {
            "data": "efficiency"
        },
        {
            "data": "pnno"
        },
        {
            "data": "poqty"
        },
        {
            "data": "pnqty"
        },
        {
            "data": "materialarr"
        },
        {
            "data": "exfty"
        },
        {
            "data": "ftyline"
        },
        {
            "data": "prodpn"
        },
        {
            "data": "color"
        },
        {
            "data": "gender"
        },
        {
            "data": "prodqty"
        },
        {
            "data": "cutting"
        },
        {
            "data": "allocate"
        },
        {
            "data": "startsew"
        },
        {
            "data": "sewcomplete"
        },
        {
            "data": "add4dayspacking"
        },
        {
            "data": "firstrevcrddate"
        },
        {
            "data": "secondrevcrddate"
        },
        {
            "data": "finalrevcrddate"
        },
        {
            "data": "ftyrevsewcomplete"
        },
        {
            "data": "finalrevsewcomplete"
        },
        {
            "data": "delaydays"
        },
        {
            "data": "delaydaysrange"
        }
    ],
    layout: {
        topStart: {
            buttons: [
                { extend: 'excel', editor: editor, title: null },
                { extend: 'create', editor: editor },
                { extend: 'edit', editor: editor },
            {
                extend: 'selected',
                text: 'Duplicate',
                action: function (e, dt, node, config) {
                    // Start in edit mode, and then change to create
                    editor
                        .edit(table.rows({ selected: true }).indexes(), {
                            title: 'Duplicate record',
                            buttons: 'Create from existing'
                        })
                        .mode('create');
                }
            },                  
                { extend: 'remove', editor: editor }
            ]
        }
    },
    select: true
});

// Activate an inline edit on click of a table cell
table.on('click', 'tbody td:not(:first-child)', function (e) {
editor.inline(this);
});
});

wonglik

It can show the Calendar pop-up for issDate on the first page, but can't for all other Date fields.

allan

This example has two date fields and it doesn't seem to have a problem showing both.

Can you provide a link to a page showing the issue so I can debug it please?

Allan

wonglik

I found that the date fields can pop up Calendar but the Calendar not showing next to the field. Is it the problem for right scrolling columns? Any chance to keep pop-up next to the date fields?

allan

I'd honestly need an example showing it not working as I haven't been able to reproduce the error and therefore don't actually know what is wrong. The picker is meant to be next to the input element, and in the demos I have, it does appear to be.

Can you link to the page showing the problem?

Allan