Date entry Calendar pop-up

Date entry Calendar pop-up

wonglikwonglik Posts: 33Questions: 3Answers: 0

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?

Replies

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • wonglikwonglik Posts: 33Questions: 3Answers: 0

    How can I send in the file for checking?

  • allanallan Posts: 63,419Questions: 1Answers: 10,456 Site admin
    edited May 6

    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

  • wonglikwonglik Posts: 33Questions: 3Answers: 0

    /*
    * 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);
    });
    });

  • wonglikwonglik Posts: 33Questions: 3Answers: 0

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

  • allanallan Posts: 63,419Questions: 1Answers: 10,456 Site admin

    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

  • wonglikwonglik Posts: 33Questions: 3Answers: 0

    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?

  • allanallan Posts: 63,419Questions: 1Answers: 10,456 Site admin

    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

Sign In or Register to comment.